feat(directives/ellipsis): add ellipsis directive (#2688)

src/directives/ellipsis.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties, DirectiveBinding, ObjectDirective, App } from 'vue';
+
+interface IValue {
+  width?: number;
+  line?: number;
+}
+
+interface IOptions {
+  [key: string]: CSSProperties;
+}
+
+const cssProperties: IOptions = {
+  single: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  multiple: {
+    display: '-webkit-box',
+    overflow: 'hidden',
+    wordBreak: 'break-all',
+  },
+};
+
+const Ellipsis: ObjectDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<Array<IValue>>) {
+    const { value = [100, 1], arg = 'single' } = binding;
+    const [width, line] = value;
+    Object.entries(cssProperties[arg]).forEach(([key, value]) => {
+      el.style[key] = value;
+    });
+    el.style.width = `${width}px`;
+    if (arg === 'multiple') {
+      el.style.webkitLineClamp = `${line}`;
+      el.style.webkitBoxOrient = 'vertical';
+    }
+  },
+};
+export function setupEllipsisDirective(app: App) {
+  app.directive('ellipsis', Ellipsis);
+}
+export default Ellipsis;

src/directives/index.ts

@@ -4,8 +4,10 @@
 import type { App } from 'vue';
 import { setupPermissionDirective } from './permission';
 import { setupLoadingDirective } from './loading';
+import { setupEllipsisDirective } from './ellipsis';
 
 export function setupGlobDirectives(app: App) {
   setupPermissionDirective(app);
   setupLoadingDirective(app);
+  setupEllipsisDirective(app);
 }