• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue 折叠展示多行文本组件的实现代码

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

折叠展示多行文本组件

折叠展示多行文本组件,自动根据传入的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 折叠展示多行文本组件内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
浅谈Vue3 父子传值发布时间:2022-02-05
下一篇:
关于Vue脚手架中render 理解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap