Vue 实现文本溢出展开收起详情功能

这类功能很常见,其实之前也写过,今天特意整理出来分享给大家,我这里分装成一个组件,大家有需要的可以复制即用。

完整代码:

<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="el-icon-caret-bottom" />
          </span>
          <span v-else class="action action-pack" @click.stop="showFullFn(false)">
            收起
            <i v-if="showBtnIcon" class="el-icon-caret-top" />
          </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 {
  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 () {
      this.textExpand();
    },
  },
  mounted() {
    this.textExpand();
  },
  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;
    },
    textExpand() {
      // 判断是否需要折叠
      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: right;
    .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;
  overflow-y: auto;
  word-break: break-all;
}
</style>

总结

以上就是今天要分享的内容,本文仅仅简单介绍了平常工作中常见的需求,同一种需求不同状态下写,代码也会不一样,写文章也是为了更好的总结,从中慢慢积累经验。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » Vue 实现文本溢出展开收起详情功能

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们