diff --git a/src/directives/ellipsis.ts b/src/directives/ellipsis.ts new file mode 100644 index 0000000000000000000000000000000000000000..2370f4ed6c2c2d9ce5853f987b22400b1cee0c5c --- /dev/null +++ b/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>) { + 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; diff --git a/src/directives/index.ts b/src/directives/index.ts index 0329eb651b90831dcc6bdef85db58250323ae515..ad58631cd8ee53c309c1dbd11869a278c3835767 100644 --- a/src/directives/index.ts +++ b/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); }