inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <script>
I 2 import Tooltip from 'ant-design-vue/es/tooltip'
3 import { cutStrByFullLength, getStrFullLength } from '@/components/_util/util'
4 /*
5     const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
6
7     const TooltipOverlayStyle = {
8       overflowWrap: 'break-word',
9       wordWrap: 'break-word',
10     };
11   */
12
13 export default {
14   name: 'Ellipsis',
15   components: {
16     Tooltip
17   },
18   props: {
19     prefixCls: {
20       type: String,
21       default: 'ant-pro-ellipsis'
22     },
23     tooltip: {
24       type: Boolean
25     },
26     length: {
27       type: Number,
28       required: true
29     },
30     lines: {
31       type: Number,
32       default: 1
33     },
34     fullWidthRecognition: {
35       type: Boolean,
36       default: false
37     }
38   },
39   methods: {
40     getStrDom (str, fullLength) {
41       return (
42         <span>{ cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '') }</span>
43       )
44     },
45     getTooltip (fullStr, fullLength) {
46       return (
47         <Tooltip>
48           <template slot="title">{ fullStr }</template>
49           { this.getStrDom(fullStr, fullLength) }
50         </Tooltip>
51       )
52     }
53   },
54   render () {
55     const { tooltip, length } = this.$props
56     const str = this.$slots.default.map(vNode => vNode.text).join('')
57     const fullLength = getStrFullLength(str)
58     const strDom = tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
59     return (
60       strDom
61     )
62   }
63 }
64 </script>