@lx-frontend/wrap-element-ui 1.0.1-beta.3 → 1.0.1-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,119 +1,119 @@
1
- <template>
2
- <div class="ellipsis-popover">
3
- <ElPopover
4
- :disabled="showPopover === 'off' || (showPopover !== 'always' && !isOverflow)"
5
- :popper-class="popoverName"
6
- placement="top-start"
7
- trigger="hover"
8
- >
9
- <div class="popover-content">
10
- <slot name="popover">
11
- <div v-for="(item, index) in contentArr" :key="getKey(item, index)">{{ item }}</div>
12
- </slot>
13
- </div>
14
- <div slot="reference">
15
- <div v-for="(item, index) in contentArr" :key="getKey(item, index)">
16
- <MultilineEllipsis
17
- :content="item"
18
- :fontSize="fontSize"
19
- :color="color"
20
- :lineCount="lineCount"
21
- :iconName="iconName"
22
- :showIconObj="{
23
- isShowIcon: showIconObj.isShowIcon,
24
- length: showIconObj.length,
25
- }"
26
- :overCountTip="{
27
- index: index + 1,
28
- length: contentArr.length,
29
- }"
30
- :isOverflow.sync="overflowArr[index]">
31
- </MultilineEllipsis>
32
- </div>
33
- </div>
34
- </ElPopover>
35
- </div>
36
- </template>
37
-
38
- <script>
39
- import MultilineEllipsis from './MultilineEllipsis.vue'
40
-
41
- export default {
42
- name: 'Ellipsis',
43
- components: {
44
- MultilineEllipsis
45
- },
46
- props: {
47
- fontSize: {
48
- type: Number,
49
- default: 12
50
- },
51
- color: {
52
- type: String,
53
- default: '#000000'
54
- },
55
- lineCount: {
56
- type: Number,
57
- default: 1
58
- },
59
- iconName: {
60
- type: String,
61
- default: 'el-icon-arrow-down'
62
- },
63
- overCountTip: {
64
- type: Object
65
- },
66
- showIconObj: {
67
- type: Object,
68
- default: () => {
69
- return {
70
- isShowIcon: false,
71
- length: 0
72
- }
73
- },
74
- },
75
- content: {
76
- type: [String, Array],
77
- default: ''
78
- },
79
- popoverName: String,
80
- showPopover: {
81
- type: String,
82
- default: 'auto' // 可选值 auto, always, off
83
- }
84
- },
85
- data () {
86
- return {
87
- overflowArr: []
88
- }
89
- },
90
- computed: {
91
- contentArr () {
92
- return typeof (this.content) === 'string' ? [this.content] : [...this.content]
93
- },
94
- isOverflow () {
95
- return this.overflowArr.includes(true)
96
- }
97
- },
98
- watch: {
99
- contentArr (val) {
100
- this.overflowArr.length = val.length
101
- }
102
- },
103
- methods: {
104
- getKey (item, index) {
105
- return btoa(escape(`${item}_${index}`))
106
- }
107
- }
108
- }
109
- </script>
110
-
111
- <style lang="less">
112
- .ellipsis-popover {
113
- width: 100%;
114
- }
115
-
116
- .popover-content {
117
- padding: 18px 20px;
118
- }
119
- </style>
1
+ <template>
2
+ <div class="ellipsis-popover">
3
+ <ElPopover
4
+ :disabled="showPopover === 'off' || (showPopover !== 'always' && !isOverflow)"
5
+ :popper-class="popoverName"
6
+ placement="top-start"
7
+ trigger="hover"
8
+ >
9
+ <div class="popover-content">
10
+ <slot name="popover">
11
+ <div v-for="(item, index) in contentArr" :key="getKey(item, index)">{{ item }}</div>
12
+ </slot>
13
+ </div>
14
+ <div slot="reference">
15
+ <div v-for="(item, index) in contentArr" :key="getKey(item, index)">
16
+ <MultilineEllipsis
17
+ :content="item"
18
+ :fontSize="fontSize"
19
+ :color="color"
20
+ :lineCount="lineCount"
21
+ :iconName="iconName"
22
+ :showIconObj="{
23
+ isShowIcon: showIconObj.isShowIcon,
24
+ length: showIconObj.length,
25
+ }"
26
+ :overCountTip="{
27
+ index: index + 1,
28
+ length: contentArr.length,
29
+ }"
30
+ :isOverflow.sync="overflowArr[index]">
31
+ </MultilineEllipsis>
32
+ </div>
33
+ </div>
34
+ </ElPopover>
35
+ </div>
36
+ </template>
37
+
38
+ <script>
39
+ import MultilineEllipsis from './MultilineEllipsis.vue'
40
+
41
+ export default {
42
+ name: 'Ellipsis',
43
+ components: {
44
+ MultilineEllipsis
45
+ },
46
+ props: {
47
+ fontSize: {
48
+ type: Number,
49
+ default: 12
50
+ },
51
+ color: {
52
+ type: String,
53
+ default: '#000000'
54
+ },
55
+ lineCount: {
56
+ type: Number,
57
+ default: 1
58
+ },
59
+ iconName: {
60
+ type: String,
61
+ default: 'el-icon-arrow-down'
62
+ },
63
+ overCountTip: {
64
+ type: Object
65
+ },
66
+ showIconObj: {
67
+ type: Object,
68
+ default: () => {
69
+ return {
70
+ isShowIcon: false,
71
+ length: 0
72
+ }
73
+ },
74
+ },
75
+ content: {
76
+ type: [String, Array],
77
+ default: ''
78
+ },
79
+ popoverName: String,
80
+ showPopover: {
81
+ type: String,
82
+ default: 'auto' // 可选值 auto, always, off
83
+ }
84
+ },
85
+ data () {
86
+ return {
87
+ overflowArr: []
88
+ }
89
+ },
90
+ computed: {
91
+ contentArr () {
92
+ return typeof (this.content) === 'string' ? [this.content] : [...this.content]
93
+ },
94
+ isOverflow () {
95
+ return this.overflowArr.includes(true)
96
+ }
97
+ },
98
+ watch: {
99
+ contentArr (val) {
100
+ this.overflowArr.length = val.length
101
+ }
102
+ },
103
+ methods: {
104
+ getKey (item, index) {
105
+ return btoa(escape(`${item}_${index}`))
106
+ }
107
+ }
108
+ }
109
+ </script>
110
+
111
+ <style lang="less">
112
+ .ellipsis-popover {
113
+ width: 100%;
114
+ }
115
+
116
+ .popover-content {
117
+ padding: 18px 20px;
118
+ }
119
+ </style>