vue 折疊展示多行文本組件的實現代碼
折疊展示多行文本組件
折疊展示多行文本組件,自動根據傳入的expand判斷是否需要折疊
兩種模式:展開/收起展示全文本(默認)、popover展示全文本
先上代碼
<template> <div class="text-expand" ref="textExpand"> <div v-if="!(showPopover && showPopoverJudge)"> <span class="text-expand-content" :style="expandStyle"> {{ (text === null || text === undefined || text === '') ? '--' : text }} </span> <div class="expander"> <span v-if="showBtn && showBtnJudge" > <span v-if="!showFull" class="action action-expand" @click.stop="showFullFn(true)" > 展開 <i v-if="showBtnIcon" class="iconfont iconxiajiantou" /> </span> <span v-else class="action action-pack" @click.stop="showFullFn(false)" > 收起 <i v-if="showBtnIcon" class="iconfont iconshangjiantou" /> </span> </span> </div> </div> <el-popover v-else :placement="popoverPlace" trigger="hover"> <div class="popover-content"> {{ text }} </div> <span class="text-expand-content" :style="expandStyle" slot="reference">{{ text }}</span> </el-popover> </div> </template> <script> export default { name: "TextExpand", props: { text: { // 文本內容 type: String, default: () => '' }, expand: { // 折疊顯示行數 type: Number, default: () => 3 }, showBtn: { // 展開、折疊按鈕 type: Boolean, default: true }, showBtnIcon: { // 展開、折疊icon type: Boolean, default: true }, showPopover: { // popover顯示全文本 type: Boolean, default: false }, popoverPlace: { // popover位置 type: String, default: 'bottom' } }, data () { return { showFull: false, // 是否展示全文本 expandStyle: '', showBtnJudge: false, // 判斷是否需要折疊展示按鈕 showPopoverJudge: false // 判斷是否需要折疊展示popover } }, watch: { text: function (val) { this.judgeExpand() } }, mounted () { this.judgeExpand() }, methods: { showFullFn (value) { this.expandStyle = value ? '' : `display: -webkit-box;word-break: break-all;-webkit-line-clamp: ${this.expand};-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;` this.showFull = value }, judgeExpand () { // 判斷是否需要折疊 this.$nextTick(() => { const { expand } = this; const textExpandStyle = window.getComputedStyle(this.$refs.textExpand) const textExpandHeight = parseFloat(textExpandStyle.height) //獲取總高度 const textExpandLineHeight = parseFloat(textExpandStyle.lineHeight) //獲取行高 // 計算行高 const rects = Math.ceil(textExpandHeight / textExpandLineHeight) if (rects <= expand) { // 不需要折疊展示 this.showBtnJudge = false this.showPopoverJudge = false } else { this.showBtnJudge = true this.showPopoverJudge = true this.expandStyle = `display: -webkit-box;word-break: break-all;-webkit-line-clamp: ${this.expand};-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;` } }) } } } </script> <style lang="less" scoped> .text-expand{ &-content{ word-break: break-all; white-space: pre-wrap; } .expander { text-align: left; margin-top: 6px; .action { display: inline-block; font-size: 14px; color: #0281F0; cursor: pointer; i { display: inline; font-size: 12px; } } .action.action-pack { margin-left: 0; } } } .popover-content{ max-width: 40vw; max-height: 30vh; overflow: hidden; word-break: break-all; overflow-y: auto; } </style>
用法
<text-expand :text=”text” :expand=”2″ />
<text-expand :text=”text” :expand=”2″ :showBtnIcon=”false”>
<text-expand :text=”text” :expand=”2″ :showPopover=”true”>
到此這篇關於vue 折疊展示多行文本組件的文章就介紹到這瞭,更多相關vue 折疊展示多行文本組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue實現樹形結構增刪改查的示例代碼
- vue el-table實現遞歸嵌套的示例代碼
- VUE 記賬憑證模塊組件的示例代碼
- el-table嵌套el-popover處理卡頓的解決
- Vue開發Sort組件代碼詳解