43 lines
1017 B
TypeScript
43 lines
1017 B
TypeScript
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;
|