chore: eslint config

eslint.config.js

@@ -7,6 +7,7 @@ module.exports = antfu(
       'no-console': 'off',
       'node/prefer-global/process': 'off',
       'vue/custom-event-name-casing': 'off',
+      'vue/component-name-in-template-casing': 'off',
     },
   },
   unocss.configs.flat,

src/components/EllipsisText/index.ts

@@ -0,0 +1,4 @@
+import ellipsisText from './src/EllipsisText.vue'
+import { withInstall } from '@/utils'
+
+export const EllipsisText = withInstall(ellipsisText)

src/components/EllipsisText/src/EllipsisText.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watchEffect } from 'vue'
+import type { CSSProperties } from 'vue'
+import Tooltip from './Tooltip.vue'
+
+interface Props {
+  maxWidth?: number | string // 文本最大宽度
+  line?: number // 最大行数
+  expand?: boolean // 是否启用点击文本展开全部
+  tooltip?: boolean // 是否启用文本提示框
+  // 以下均为 tooltip 组件属性
+  tooltipMaxWidth?: number // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
+  tooltipFontSize?: number // 提示文本字体大小，单位px，优先级高于 overlayStyle
+  tooltipColor?: string // 提示文本字体颜色，优先级高于 overlayStyle
+  tooltipBackgroundColor?: string // 提示框背景颜色，优先级高于 overlayStyle
+  tooltipOverlayStyle?: CSSProperties // 提示框内容区域样式
+}
+const props = withDefaults(defineProps<Props>(), {
+  maxWidth: '100%',
+  line: undefined,
+  expand: false,
+  tooltip: true,
+  tooltipMaxWidth: undefined,
+  tooltipFontSize: 14,
+  tooltipColor: '#FFF',
+  tooltipBackgroundColor: 'rgba(0, 0, 0, .85)',
+  tooltipOverlayStyle: () => ({ padding: '8px 12px', textAlign: 'justify' }),
+})
+const emit = defineEmits(['expandChange'])
+const textMaxWidth = computed(() => {
+  if (typeof props.maxWidth === 'number')
+    return `${props.maxWidth}px`
+
+  return props.maxWidth
+})
+const showTooltip = ref()
+const ellipsis = ref()
+const defaultTooltipMaxWidth = ref()
+watchEffect(() => {
+  showTooltip.value = props.tooltip
+})
+watchEffect(
+  () => {
+    if (props.tooltip) {
+      if (props.tooltipMaxWidth)
+        defaultTooltipMaxWidth.value = props.tooltipMaxWidth
+
+      else
+        defaultTooltipMaxWidth.value = ellipsis.value.offsetWidth + 24
+    }
+  },
+  { flush: 'post' },
+)
+function onExpand() {
+  if (ellipsis.value.style['-webkit-line-clamp']) {
+    if (props.tooltip) {
+      showTooltip.value = false
+      nextTick(() => {
+        ellipsis.value.style['-webkit-line-clamp'] = ''
+      })
+    }
+    else {
+      ellipsis.value.style['-webkit-line-clamp'] = ''
+    }
+    emit('expandChange', true)
+  }
+  else {
+    if (props.tooltip)
+      showTooltip.value = true
+
+    ellipsis.value.style['-webkit-line-clamp'] = props.line
+    emit('expandChange', false)
+  }
+}
+</script>
+
+<template>
+  <Tooltip
+    v-if="showTooltip"
+    :max-width="defaultTooltipMaxWidth"
+    :font-size="tooltipFontSize"
+    :color="tooltipColor"
+    :background-color="tooltipBackgroundColor"
+    :overlay-style="tooltipOverlayStyle"
+  >
+    <template #tooltip>
+      <slot name="tooltip">
+        <slot />
+      </slot>
+    </template>
+    <div
+      ref="ellipsis"
+      class="m-ellipsis"
+      :class="[line ? 'ellipsis-line' : 'not-ellipsis-line', { 'cursor-pointer': expand }]"
+      :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+      v-bind="$attrs"
+      @click="expand ? onExpand() : () => false"
+    >
+      <slot />
+    </div>
+  </Tooltip>
+  <div
+    v-else
+    ref="ellipsis"
+    class="m-ellipsis"
+    :class="[line ? 'ellipsis-line' : 'not-ellipsis-line', { 'cursor-pointer': expand }]"
+    :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+    v-bind="$attrs"
+    @click="expand ? onExpand() : () => false"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .m-ellipsis {
+    overflow: hidden;
+    cursor: text;
+  }
+
+  .ellipsis-line {
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+  }
+
+  .not-ellipsis-line {
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+</style>

src/components/EllipsisText/src/Tooltip.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import { cancelRaf, rafTimeout } from './_utils'
+
+interface Props {
+  maxWidth?: number // 提示框内容最大宽度，单位px
+  content?: string // 展示的文本 string | slot
+  tooltip?: string // 提示的文本 string | slot
+  fontSize?: number // 提示文本字体大小，单位px，优先级高于 overlayStyle
+  color?: string // 提示文本字体颜色，优先级高于 overlayStyle
+  backgroundColor?: string // 提示框背景颜色，优先级高于 overlayStyle
+  overlayStyle?: CSSProperties // 提示框内容区域样式
+}
+withDefaults(defineProps<Props>(), {
+  maxWidth: 120,
+  content: '暂无内容',
+  tooltip: '暂无提示',
+  fontSize: 14,
+  color: '#FFF',
+  backgroundColor: 'rgba(0, 0, 0, .85)',
+  overlayStyle: () => ({}),
+})
+const emit = defineEmits(['openChange'])
+const visible = ref(false)
+const hideTimer = ref()
+const top = ref(0) // 提示框top定位
+const left = ref(0) // 提示框left定位
+const contentRef = ref() // 声明一个同名的模板引用
+const tooltipRef = ref() // 声明一个同名的模板引用
+function getPosition() {
+  const contentWidth = contentRef.value && contentRef.value.offsetWidth // 展示文本宽度
+  const tooltipWidth = tooltipRef.value && tooltipRef.value.offsetWidth // 提示文本宽度
+  const tooltipHeight = tooltipRef.value && tooltipRef.value.offsetHeight // 提示文本高度
+  top.value = tooltipHeight + 4
+  left.value = (tooltipWidth - contentWidth) / 2
+}
+function onShow() {
+  getPosition()
+  cancelRaf(hideTimer.value)
+  visible.value = true
+  emit('openChange', visible.value)
+}
+function onHide(): void {
+  hideTimer.value = rafTimeout(() => {
+    visible.value = false
+    emit('openChange', visible.value)
+  }, 100)
+}
+</script>
+
+<template>
+  <div class="m-tooltip" @mouseenter="onShow" @mouseleave="onHide">
+    <div
+      ref="tooltipRef"
+      class="m-tooltip-content"
+      :class="{ 'show-tip': visible }"
+      :style="`--tooltip-font-size: ${fontSize}px; --tooltip-color: ${color}; --tooltip-background-color: ${backgroundColor}; max-width: ${maxWidth}px; top: ${-top}px; left: ${-left}px;`"
+      @mouseenter="onShow"
+      @mouseleave="onHide"
+    >
+      <div class="u-tooltip" :style="overlayStyle">
+        <slot name="tooltip">
+          {{ tooltip }}
+        </slot>
+      </div>
+      <div class="m-tooltip-arrow">
+        <span class="u-tooltip-arrow" />
+      </div>
+    </div>
+    <div ref="contentRef">
+      <slot>{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .m-tooltip {
+    position: relative;
+    display: inline-block;
+
+    .m-tooltip-content {
+      position: absolute;
+      z-index: 9999;
+      width: max-content;
+      padding-bottom: 12px;
+      pointer-events: none;
+      opacity: 0;
+      transition:
+        transform 0.25s,
+        opacity 0.25s;
+      transform: scale(0.8); // 缩放变换
+      transform-origin: 50% 75%;
+
+      .u-tooltip {
+        min-width: 32px;
+        min-height: 32px;
+        padding: 6px 8px;
+        font-size: var(--tooltip-font-size);
+        line-height: 1.5714;
+        color: var(--tooltip-color);
+        text-align: start;
+        text-decoration: none;
+        word-wrap: break-word;
+        background-color: var(--tooltip-background-color);
+        border-radius: 6px;
+        box-shadow:
+          0 6px 16px 0 rgb(0 0 0 / 8%),
+          0 3px 6px -4px rgb(0 0 0 / 12%),
+          0 9px 28px 8px rgb(0 0 0 / 5%);
+      }
+
+      .m-tooltip-arrow {
+        position: absolute;
+        bottom: 12px;
+        left: 50%;
+        z-index: 9;
+        display: block;
+        width: 16px;
+        height: 16px;
+        overflow: hidden;
+        pointer-events: none;
+        content: '';
+        transform: translateX(-50%) translateY(100%) rotate(180deg);
+
+        &::before {
+          position: absolute;
+          inset-inline-start: 0;
+          bottom: 0;
+          width: 16px;
+          height: 8px;
+          clip-path: path(
+            'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z'
+          );
+          background-color: var(--tooltip-background-color);
+        }
+
+        &::after {
+          position: absolute;
+          inset-inline: 0;
+          bottom: 0;
+          z-index: 0;
+          width: 8.9706px;
+          height: 8.9706px;
+          margin: auto;
+          content: '';
+          background: transparent;
+          border-radius: 0 0 2px;
+          box-shadow: 3px 3px 7px rgb(0 0 0 / 10%);
+          transform: translateY(50%) rotate(-135deg);
+        }
+      }
+    }
+
+    .show-tip {
+      pointer-events: auto;
+      opacity: 1;
+      transform: scale(1); // 缩放变换
+    }
+  }
+</style>

src/components/EllipsisText/src/_utils.ts

@@ -0,0 +1,41 @@
+// cancelAnimationFrame
+export const cancelAnimationFrame = window.cancelAnimationFrame
+// 使用 requestAnimationFrame 模拟 setTimeout 和 setInterval
+export function rafTimeout(fn: Function, delay = 0, interval = false): object {
+  const requestAnimationFrame
+    = typeof window !== 'undefined' ? window.requestAnimationFrame : () => {}
+  let start: any = null
+  const raf = {
+    // 引用类型保存，方便获取 requestAnimationFrame()方法返回的 ID.
+    id: requestAnimationFrame(timeElapse),
+  }
+  function timeElapse(timestamp: number) {
+    /*
+      timestamp参数：与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻
+    */
+    if (!start)
+      start = timestamp
+
+    const elapsed = timestamp - start
+    if (elapsed >= delay) {
+      fn() // 执行目标函数func
+      if (interval) {
+        // 使用间歇调用
+        start = null
+        raf.id = requestAnimationFrame(timeElapse)
+      }
+    }
+    else {
+      raf.id = requestAnimationFrame(timeElapse)
+    }
+  }
+
+  return raf
+}
+// 用于取消 rafTimeout 函数
+export function cancelRaf(raf: { id: number }): void {
+  const cancelAnimationFrame
+    = typeof window !== 'undefined' ? window.cancelAnimationFrame : () => {}
+  if (raf && raf.id)
+    cancelAnimationFrame(raf.id)
+}