mali-applet-ui 0.2.96 → 0.2.97
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.
|
@@ -51,9 +51,24 @@ export default {
|
|
|
51
51
|
this.$emit('input', value)
|
|
52
52
|
},
|
|
53
53
|
updateStyle () {
|
|
54
|
+
if (this.placement === 'top') {
|
|
55
|
+
this.left = '-20rpx'
|
|
56
|
+
}
|
|
57
|
+
if (this.placement === 'top-start') {
|
|
58
|
+
this.left = '-20rpx'
|
|
59
|
+
}
|
|
60
|
+
if (this.placement === 'top-end') {
|
|
61
|
+
this.left = '-20rpx'
|
|
62
|
+
}
|
|
54
63
|
if (this.placement === 'bottom') {
|
|
55
64
|
this.left = '-20rpx'
|
|
56
65
|
}
|
|
66
|
+
if (this.placement === 'bottom-start') {
|
|
67
|
+
this.left = '-20rpx'
|
|
68
|
+
}
|
|
69
|
+
if (this.placement === 'bottom-end') {
|
|
70
|
+
this.left = '-20rpx'
|
|
71
|
+
}
|
|
57
72
|
},
|
|
58
73
|
toggleVisible () {
|
|
59
74
|
if (!this.trigger || ['tap', 'click'].includes(this.trigger)) {
|
|
@@ -7,10 +7,18 @@
|
|
|
7
7
|
</slow>
|
|
8
8
|
</view>
|
|
9
9
|
<view class="ml-tooltip-arrows">
|
|
10
|
-
<ml-icon v-if="placement === 'bottom'" name="arrow-up-filling" />
|
|
10
|
+
<ml-icon v-if="placement === 'bottom-start'" name="arrow-up-filling" />
|
|
11
|
+
<ml-icon v-else-if="placement === 'bottom'" name="arrow-up-filling" />
|
|
12
|
+
<ml-icon v-else-if="placement === 'bottom-end'" name="arrow-up-filling" />
|
|
13
|
+
<ml-icon v-else-if="placement === 'top-start'" name="arrow-down-filling" />
|
|
11
14
|
<ml-icon v-else-if="placement === 'top'" name="arrow-down-filling" />
|
|
15
|
+
<ml-icon v-else-if="placement === 'top-end'" name="arrow-down-filling" />
|
|
16
|
+
<ml-icon v-else-if="placement === 'right-start'" name="arrow-left-filling" />
|
|
12
17
|
<ml-icon v-else-if="placement === 'right'" name="arrow-left-filling" />
|
|
18
|
+
<ml-icon v-else-if="placement === 'right-end'" name="arrow-left-filling" />
|
|
19
|
+
<ml-icon v-else-if="placement === 'left-start'" name="arrow-right-filling" />
|
|
13
20
|
<ml-icon v-else-if="placement === 'left'" name="arrow-right-filling" />
|
|
21
|
+
<ml-icon v-else-if="placement === 'left-end'" name="arrow-right-filling" />
|
|
14
22
|
</view>
|
|
15
23
|
</view>
|
|
16
24
|
</view>
|
|
@@ -66,24 +74,59 @@ export default {
|
|
|
66
74
|
color: rgba(0, 0, 0, 0.85);
|
|
67
75
|
font-size: 32rpx;
|
|
68
76
|
}
|
|
69
|
-
&.placement-bottom
|
|
77
|
+
&.placement-bottom,
|
|
78
|
+
&.placement-bottom-start,
|
|
79
|
+
&.placement-bottom-end {
|
|
70
80
|
.ml-tooltip-title {
|
|
71
81
|
top: calc(100% + 20rpx);
|
|
72
82
|
}
|
|
73
83
|
.ml-tooltip-arrows {
|
|
74
84
|
top: -22rpx;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
&.placement-bottom-start {
|
|
88
|
+
.ml-tooltip-arrows {
|
|
75
89
|
left: 10rpx;
|
|
76
90
|
}
|
|
77
91
|
}
|
|
78
|
-
&.placement-
|
|
92
|
+
&.placement-bottom {
|
|
93
|
+
.ml-tooltip-arrows {
|
|
94
|
+
left: 50%;
|
|
95
|
+
transform: translateX(-50%);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
&.placement-bottom-end {
|
|
99
|
+
.ml-tooltip-arrows {
|
|
100
|
+
right: 10rpx;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&.placement-top,
|
|
105
|
+
&.placement-top-start,
|
|
106
|
+
&.placement-top-end {
|
|
79
107
|
.ml-tooltip-title {
|
|
80
108
|
bottom: calc(100% + 20rpx);
|
|
81
109
|
}
|
|
82
110
|
.ml-tooltip-arrows {
|
|
83
111
|
bottom: -22rpx;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
&.placement-top-start {
|
|
115
|
+
.ml-tooltip-arrows {
|
|
84
116
|
left: 10rpx;
|
|
85
117
|
}
|
|
86
118
|
}
|
|
119
|
+
&.placement-top {
|
|
120
|
+
.ml-tooltip-arrows {
|
|
121
|
+
left: 50%;
|
|
122
|
+
transform: translateX(-50%);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
&.placement-top-end {
|
|
126
|
+
.ml-tooltip-arrows {
|
|
127
|
+
right: 10rpx;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
87
130
|
&.placement-left {
|
|
88
131
|
.ml-tooltip-title {
|
|
89
132
|
top: 0;
|