feat: 新增文本省略组件

Author: LsyWeb

vue/README.md

@@ -1,2 +1,7 @@
-# Vue实用代码片段
+# Vue
+- Vue组件
+  - [文本省略](./TextEllipsis/)
+  - [瀑布流](./Waterfall/)
+  - [无限滚动](./InfiniteScrollList/)
+  - [权限控制](./Access/)
 - [hook](./hook) 

vue/TextEllipsis/README.md

@@ -0,0 +1,2 @@
+# 文本省略
+> 特点：支持展开折叠，支持自定义省略文本

vue/TextEllipsis/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <div ref="root" class="text-ellipsis-wrapper">
+    {{ expanded ? props.content : text }}
+    <span class="text-ellipsis-action" v-if="hasAction" @click="onClickAction">
+      {{ actionText }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  defineProps,
+  withDefaults,
+  defineExpose,
+  defineEmits,
+  onMounted,
+  computed,
+  ref,
+} from "vue";
+
+export type TextEllipsisProps = {
+  /**
+   * @description 展示的文本
+   */
+  content: string;
+  /**
+   * @description 文本行高，单位px，默认为 24px（16px * 1.5）
+   */
+  lineHeight?: number;
+  /**
+   * @description 展示的行数，默认为1
+   */
+  rows?: number;
+  /**
+   * @description 展开操作的文案，默认为"展开"
+   */
+  expandText?: string;
+  /**
+   * @description 收起操作的文案，默认为"收起"
+   */
+  collapseText?: string;
+  /**
+   * @description 省略号的文本内容，默认为"..."
+   */
+  dots?: string;
+};
+
+export type TextEllipsisExpose = {
+  toogle: (collapse?: boolean) => void;
+};
+
+const props = withDefaults(defineProps<TextEllipsisProps>(), {
+  content: "",
+  rows: 1,
+  expandText: "展开",
+  collapseText: "收起",
+  dots: "...",
+  lineHeight: 24,
+});
+
+const text = ref<string>("");
+
+const expanded = ref<boolean>(false);
+
+const hasAction = ref<boolean>(false);
+
+const root = ref<HTMLElement>();
+
+// 操作按钮文本展示
+const actionText = computed(() =>
+  expanded.value ? props.collapseText : props.expandText,
+);
+
+// px转换为数字 例如：'12px' => 12
+const pxToNum = (value: string | null) => {
+  if (!value) return 0;
+  const match = value.match(/^\d*(\.\d*)?/);
+  return match ? Number(match[0]) : 0;
+};
+
+// 计算文本省略
+const calcEllipsised = () => {
+  // 克隆一份容器，并离屏渲染到页面中
+  const cloneContainer = () => {
+    if (!root.value) return;
+
+    const originStyle = window.getComputedStyle(root.value);
+    const container = document.createElement("div");
+    const styleNames: string[] = Array.prototype.slice.apply(originStyle);
+    styleNames.forEach((name) => {
+      container.style.setProperty(name, originStyle.getPropertyValue(name));
+    });
+    // 离屏渲染
+    container.style.position = "fixed";
+    container.style.zIndex = "-9999";
+    container.style.top = "-9999px";
+    container.style.height = "auto";
+    container.style.minHeight = "auto";
+    container.style.maxHeight = "auto";
+    // 该功能必须要求有全局行高（外层组件有设置过lineHeight），否则无法计算，以下是兼容处理
+    container.style.lineHeight = props.lineHeight + "px";
+
+    container.innerText = props.content;
+    document.body.appendChild(container);
+    return container;
+  };
+
+  const calcEllipsisText = (container: HTMLDivElement, maxHeight: number) => {
+    const { content, dots } = props;
+    const end = content.length;
+
+    const calcEllipse = () => {
+      // 计算前后内容
+      const tail = (left: number, right: number): string => {
+        if (right - left <= 1) {
+          return content.slice(0, left) + dots;
+        }
+
+        const middle = Math.round((left + right) / 2);
+
+        // 设置拦截位置
+        container.innerText =
+          content.slice(0, middle) + dots + actionText.value;
+        // 拦截后的高度仍然与要求的高度不匹配
+        if (container.offsetHeight > maxHeight) {
+          return tail(left, middle);
+        }
+
+        return tail(middle, right);
+      };
+
+      container.innerText = tail(0, end);
+    };
+    calcEllipse();
+    return container.innerText;
+  };
+
+  const container = cloneContainer();
+  if (!container) return;
+  const { paddingBottom, paddingTop, lineHeight } = container.style;
+  const maxHeight = Math.ceil(
+    (Number(props.rows) + 0.5) * pxToNum(lineHeight) +
+      pxToNum(paddingTop) +
+      pxToNum(paddingBottom),
+  );
+
+  if (maxHeight < container.offsetHeight) {
+    hasAction.value = true;
+
+    text.value = calcEllipsisText(container, maxHeight);
+  } else {
+    hasAction.value = false;
+    text.value = props.content;
+  }
+
+  document.body.removeChild(container);
+};
+
+const toogle = (collapse?: boolean) => {
+  if (collapse === undefined) {
+    expanded.value = !expanded.value;
+    return;
+  }
+  expanded.value = collapse;
+};
+
+const emit = defineEmits<{
+  (event: "onClickAction", e: Event): void;
+}>();
+
+const onClickAction = (e: Event) => {
+  emit("onClickAction", e);
+  toogle();
+};
+
+onMounted(calcEllipsised);
+
+defineExpose<TextEllipsisExpose>({
+  toogle,
+});
+</script>
+
+<style scoped>
+.text-ellipsis-action {
+  color: #1890ff;
+  cursor: pointer;
+}
+</style>