@lx-frontend/wrap-element-ui 1.0.28-beta.3 → 2.0.0-beta.1

package/src/components/Ellipsis/MultilineEllipsis.vue

@@ -3,123 +3,106 @@
     <div class="ellipsis__container" :style="{ 'font-size': `${fontSize}px`, 'line-height': lineHeight, color }">
       <div class="ellipsis__content" ref="contentEl" :style="{ height: `${preHeight}px`, 'align-items': alignItems }">{{ preContent }}</div>
       <div class="ellipsis__last-line" ref="lastLineEl" :style="{ height: `${lastLineHeight}px` }">{{ restContent }}
-        <span v-if="isShowIconMethod()" :class="iconName"></span>
+        <el-icon v-if="isShowIconMethod()" class="ellipsis__icon"><ArrowDown /></el-icon>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MultilineEllipsis',
-  props: {
-    fontSize: {
-      type: Number,
-      default: 12
-    },
-    color: {
-      type: String,
-      default: '#000000'
-    },
-    lineCount: {
-      type: Number,
-      default: 1
-    },
-    content: {
-      type: String,
-      default: ''
-    },
-    isOverflow: {
-      type: Boolean,
-      default: false
-    },
-    iconName: {
-      type: String,
-      default: 'el-icon-arrow-down'
-    },
-    overCountTip: {
-      type: Object,
-    },
-    showIconObj: {
-      type: Object,
-      default: () => {
-        return {
-          isShowIcon: false,
-          length: 0,
-        }
-      },
-    },
-  },
-  data () {
-    return {
-      restContent: '',
-      preContent: '',
-      lastLineHeight: 0,
-      alignItems: 'center'
-    }
-  },
-  computed: {
-    preHeight () {
-      return (this.fontSize + 2) * (this.lineCount - 1)
-    },
-    lineHeight () {
-      return `${this.fontSize + 2}px`
-    }
-  },
-  mounted () {
-    // 由于在 element table 中，渲染计算时的宽度可能与实际展示时的宽度可能存在偏差，在此把宽度固定为组件挂载时获取到的宽度
-    this.$refs.contentEl.style.width = `${this.$refs.contentEl.offsetWidth}px`
-    // 处理长度为1的数据不用走截取逻辑减少计算
-    if (this.content.length === 1) {
-      this.restContent = this.content;
-      this.$refs.contentEl.remove();
-      this.lastLineHeight = (this.fontSize + 2);
-      return;
-    }
-    this.bsearch(this.content)
-    this.lastLineHeight = (this.fontSize + 2)
-  },
-  methods: {
-    bsearch (data, pre = 0) {
-      const len = data.length
-      const half = Math.floor((len - pre) / 2) + pre
-      if (len - pre <= 1) {
-        const restContent = pre === 0 ? this.content.slice(pre) : this.content.slice(pre + 1)
-        this.preContent = pre === 0 ? '' : data.slice(0, pre + 1)
-        if (!restContent) {
-          this.lastLineHeight = 0
-          this.$emit('update:isOverflow', false)
-          return false
-        }
-        this.restContent = restContent
-        this.$nextTick(() => {
-          this.$emit('update:isOverflow', this.$refs.lastLineEl.scrollWidth !== this.$refs.lastLineEl.offsetWidth)
-        })
-        return true
-      }
-      this.preContent = data.slice(0, half + 1)
-      this.$nextTick(() => {
-        const isEqual = this.$refs.contentEl.scrollHeight === this.preHeight
-        if (isEqual) {
-          this.alignItems = 'center'
-          return this.bsearch(data, half)
-        }
-        this.alignItems = 'flex-start'
-        return this.bsearch(data.slice(0, half), pre)
-      })
-      return true
-    },
-    isShowIconMethod() {
-      /**
-       * 1、isShowIcon--是否展示icon; length-- 所有传入数据总数量
-       * 2、this.overCountTip.index === this.overCountTip.length 当前列表展示个数(最后一个列)
-       * 3、length > this.overCountTip.length 满足总个数大于当前列表展示个数
-      **/ 
-      const { isShowIcon, length } = this.showIconObj;
-      return (isShowIcon && this.overCountTip.index === this.overCountTip.length && this.content.length && (length > this.overCountTip.length));
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+
+defineOptions({ name: 'MultilineEllipsis' })
+
+interface IProps {
+  fontSize?: number
+  color?: string
+  lineCount?: number
+  content?: string
+  isOverflow?: boolean
+  iconName?: string
+  overCountTip?: Record<string, any>
+  showIconObj?: { isShowIcon: boolean; length: number }
+}
+
+interface IEmits {
+  (e: 'update:is-overflow', val: boolean): void
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  fontSize: 12,
+  color: '#000000',
+  lineCount: 1,
+  content: '',
+  isOverflow: false,
+  iconName: 'el-icon-arrow-down',
+  showIconObj: () => ({ isShowIcon: false, length: 0 }),
+})
+
+const emit = defineEmits<IEmits>()
+
+const restContent = ref('')
+const preContent = ref('')
+const lastLineHeight = ref(0)
+const alignItems = ref('center')
+const contentEl = ref<HTMLElement>()
+const lastLineEl = ref<HTMLElement>()
+
+const preHeight = computed(() => {
+  return (props.fontSize + 2) * (props.lineCount - 1)
+})
+
+const lineHeight = computed(() => {
+  return `${props.fontSize + 2}px`
+})
+
+const bsearch = (data: string, pre = 0): boolean => {
+  const len = data.length
+  const half = Math.floor((len - pre) / 2) + pre
+  if (len - pre <= 1) {
+    const _restContent = pre === 0 ? props.content.slice(pre) : props.content.slice(pre + 1)
+    preContent.value = pre === 0 ? '' : data.slice(0, pre + 1)
+    if (!_restContent) {
+      lastLineHeight.value = 0
+      emit('update:is-overflow', false)
+      return false
     }
+    restContent.value = _restContent
+    nextTick(() => {
+      emit('update:is-overflow', lastLineEl.value!.scrollWidth !== lastLineEl.value!.offsetWidth)
+    })
+    return true
   }
+  preContent.value = data.slice(0, half + 1)
+  nextTick(() => {
+    const isEqual = contentEl.value!.scrollHeight === preHeight.value
+    if (isEqual) {
+      alignItems.value = 'center'
+      return bsearch(data, half)
+    }
+    alignItems.value = 'flex-start'
+    return bsearch(data.slice(0, half), pre)
+  })
+  return true
 }
+
+const isShowIconMethod = () => {
+  const { isShowIcon, length } = props.showIconObj
+  return (isShowIcon && props.overCountTip!.index === props.overCountTip!.length && props.content.length && (length > props.overCountTip!.length))
+}
+
+onMounted(() => {
+  contentEl.value!.style.width = `${contentEl.value!.offsetWidth}px`
+  if (props.content.length === 1) {
+    restContent.value = props.content
+    contentEl.value!.remove()
+    lastLineHeight.value = (props.fontSize + 2)
+    return
+  }
+  bsearch(props.content)
+  lastLineHeight.value = (props.fontSize + 2)
+})
 </script>
 
 <style lang="less">
@@ -137,5 +120,9 @@ export default {
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+    &__icon {
+      vertical-align: middle;
+      margin-left: 2px;
+    }
   }
 </style>

package/src/components/Ellipsis/index.vue

@@ -1,110 +1,135 @@
 <template>
   <div class="ellipsis-popover">
     <ElPopover
-      :disabled="showPopover === 'off' || (showPopover !== 'always' && !isOverflow)"
+      :visible="popoverVisible"
+      :width="'auto'"
       :popper-class="popoverName"
       placement="top-start"
-      trigger="hover"
+      :trigger="('manual' as any)"
     >
       <div class="popover-content">
         <slot name="popover">
-          <div v-for="(item, index) in contentArr" :key="getKey(item, index)">{{ item }}</div>
+          <div
+            v-for="(item, index) in contentArr"
+            :key="getKey(item, index)"
+          >
+            {{ item }}
+          </div>
         </slot>
       </div>
-      <div slot="reference">
-        <div v-for="(item, index) in contentArr" :key="getKey(item, index)">
-          <MultilineEllipsis
-            :content="item"
-            :fontSize="fontSize"
-            :color="color"
-            :lineCount="lineCount"
-            :iconName="iconName"
-            :showIconObj="{
-              isShowIcon: showIconObj.isShowIcon,
-              length: showIconObj.length,
-            }"
-            :overCountTip="{
-              index: index + 1,
-              length: contentArr.length,
-            }"
-            :isOverflow.sync="overflowArr[index]">
-          </MultilineEllipsis>
+      <template #reference>
+        <div
+          ref="referenceEl"
+          @mouseenter="onMouseEnter"
+          @mouseleave="onMouseLeave"
+        >
+          <div
+            v-for="(item, index) in contentArr"
+            :key="getKey(item, index)"
+          >
+            <MultilineEllipsis
+              :content="item"
+              :font-size="fontSize"
+              :color="color"
+              :line-count="lineCount"
+              :icon-name="iconName"
+              :show-icon-obj="{
+                isShowIcon: showIconObj.isShowIcon,
+                length: showIconObj.length,
+              }"
+              :over-count-tip="{
+                index: index + 1,
+                length: contentArr.length,
+              }"
+              :is-overflow="overflowArr[index]"
+              @update:is-overflow="val => handleOverflowUpdate(index, val)"
+            />
+          </div>
         </div>
-      </div>
+      </template>
     </ElPopover>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { ElPopover } from 'element-plus'
 import MultilineEllipsis from './MultilineEllipsis.vue'
 
-export default {
-  name: 'Ellipsis',
-  components: {
-    MultilineEllipsis
-  },
-  props: {
-    fontSize: {
-      type: Number,
-      default: 12
-    },
-    color: {
-      type: String,
-      default: '#000000'
-    },
-    lineCount: {
-      type: Number,
-      default: 1
-    },
-    iconName: {
-      type: String,
-      default: 'el-icon-arrow-down'
-    },
-    overCountTip: {
-      type: Object
-    },
-    showIconObj: {
-      type: Object,
-      default: () => {
-        return {
-          isShowIcon: false,
-          length: 0
-        }
-      },
-    },
-    content: {
-      type: [String, Array],
-      default: ''
-    },
-    popoverName: String,
-    showPopover: {
-      type: String,
-      default: 'auto' // 可选值 auto, always, off
-    }
-  },
-  data () {
-    return {
-      overflowArr: []
-    }
-  },
-  computed: {
-    contentArr () {
-      return typeof (this.content) === 'string' ? [this.content] : [...this.content]
-    },
-    isOverflow () {
-      return this.overflowArr.includes(true)
-    }
-  },
-  watch: {
-    contentArr (val) {
-      this.overflowArr.length = val.length
-    }
-  },
-  methods: {
-    getKey (item, index) {
-      return btoa(escape(`${item}_${index}`))
-    }
+defineOptions({ name: 'Ellipsis' })
+
+interface IProps {
+  fontSize?: number
+  color?: string
+  lineCount?: number
+  iconName?: string
+  overCountTip?: Record<string, any>
+  showIconObj?: { isShowIcon: boolean; length: number }
+  content?: string | string[]
+  popoverName?: string
+  showPopover?: string
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  fontSize: 12,
+  color: '#000000',
+  lineCount: 1,
+  iconName: 'arrow-down',
+  showIconObj: () => ({ isShowIcon: false, length: 0 }),
+  content: '',
+  showPopover: 'auto',
+})
+
+const overflowArr = ref<boolean[]>([])
+const innerVisible = ref(false)
+const referenceEl = ref<HTMLElement>()
+
+const contentArr = computed(() => {
+  return typeof props.content === 'string' ? [props.content] : [...props.content]
+})
+
+const isOverflow = computed(() => {
+  return overflowArr.value.includes(true)
+})
+
+const popoverVisible = computed(() => {
+  if (props.showPopover === 'off') return false
+  if (props.showPopover === 'always') return innerVisible.value
+  return innerVisible.value && isOverflow.value
+})
+
+watch(contentArr, (val) => {
+  if (val.length !== overflowArr.value.length) {
+    overflowArr.value = new Array(val.length).fill(false)
   }
+}, { immediate: true })
+
+const handleOverflowUpdate = (index: number, val: boolean) => {
+  const newArr = [...overflowArr.value]
+  newArr[index] = val
+  overflowArr.value = newArr
+}
+
+const checkOverflow = () => {
+  const ref = referenceEl.value
+  if (!ref) return
+  const lastLineEls = ref.querySelectorAll('.ellipsis__last-line')
+  if (lastLineEls.length > 0) {
+    overflowArr.value = [...lastLineEls as any].map((el: HTMLElement) => el.scrollWidth > el.offsetWidth)
+  }
+}
+
+const onMouseEnter = () => {
+  checkOverflow()
+  innerVisible.value = true
+}
+
+const onMouseLeave = () => {
+  innerVisible.value = false
+}
+
+const getKey = (item: any, index: number) => {
+  return btoa(escape(`${item}_${index}`))
 }
 </script>