前端elementui el-popover 多行文本换行显示优化

前端多行文本换行显示优化

下载vue-ellipsis-text包，分析源码-自定义JfEllipsisText组件
使用场景：1.适用于单行文字超出显示省略号；
2.适用于多行文本超出指定行显示省略号（或追加【更多】按钮）

多行文本换行的样式：

display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: pre-wrap;
word-break: break-word;  一行单词中实在没有其他靠谱的换行点的时候换行（针对英文）

v-ellipsis自定义指令
获取el.clienHeight和el.scrollHeight的值，来判断文本是否显示完整，是否需要下拉图标来显示全部的文本

directives: {
    ellipsis: {
      // 指令的定义
      inserted: function(el) {
        const dom = el.querySelector('[popover-ellipsis]')
        if (!dom) return
        if (el.clientHeight < el.scrollHeight) {
          dom.style.display = 'inline-block'
        }
      }
    }
  },

// 弹窗显示隐藏
    handlePopoverShow() {
      const el = this.$refs.container
      this.popoverWidth = (el && el.clientWidth || 320) + 10
      this.$nextTick(() => {
        this.visible = !this.visible
      })
    },
    // 显示文本域详情
    handleFocus() {
      const el = this.$refs.container
      this.popoverWidth = (el && el.clientWidth || 320) + 10

      this.detailFlag = 1
    },