uview-plus 3.4.52 → 3.4.54
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.
package/changelog.md
CHANGED
|
@@ -0,0 +1,372 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="u-dragsort" :class="direction == 'horizontal' ? 'u-dragsort--horizontal' : ''">
|
|
3
|
+
<view
|
|
4
|
+
v-for="(item, index) in list"
|
|
5
|
+
:key="item.id"
|
|
6
|
+
:id="`u-dragsort-item-${index}`"
|
|
7
|
+
:ref="(el) => setItemRef(el, index)"
|
|
8
|
+
class="u-dragsort-item"
|
|
9
|
+
:class="{
|
|
10
|
+
'dragging': dragIndex === index,
|
|
11
|
+
'nearby': closestIndex === index
|
|
12
|
+
}"
|
|
13
|
+
:style="{
|
|
14
|
+
transform: dragIndex === index ? `translateY(${dragY}px)` : 'none',
|
|
15
|
+
zIndex: dragIndex === index ? 10 : 'auto'
|
|
16
|
+
}"
|
|
17
|
+
@touchstart="onTouchStart(index, $event)"
|
|
18
|
+
@touchmove="onTouchMove($event)"
|
|
19
|
+
@touchend="onTouchEnd"
|
|
20
|
+
>
|
|
21
|
+
<!-- 默认插槽，用户可自定义 item 渲染内容 -->
|
|
22
|
+
<slot :item="item" :index="index">
|
|
23
|
+
<!-- 默认内容 -->
|
|
24
|
+
<view class="u-dragsort-item-content">
|
|
25
|
+
{{ item.label }}
|
|
26
|
+
</view>
|
|
27
|
+
</slot>
|
|
28
|
+
</view>
|
|
29
|
+
</view>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script>
|
|
33
|
+
export default {
|
|
34
|
+
name: 'u-dragsort',
|
|
35
|
+
props: {
|
|
36
|
+
initialList: {
|
|
37
|
+
type: Array,
|
|
38
|
+
required: true,
|
|
39
|
+
default: () => []
|
|
40
|
+
},
|
|
41
|
+
// 新增 draggable 属性
|
|
42
|
+
draggable: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: true
|
|
45
|
+
},
|
|
46
|
+
direction: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: 'vertical', // 可选值：'vertical' / 'horizontal'
|
|
49
|
+
validator: value => ['vertical', 'horizontal'].includes(value)
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
data() {
|
|
53
|
+
return {
|
|
54
|
+
list: [...this.initialList],
|
|
55
|
+
itemRefs: [], // 存储每个 item 的 ref
|
|
56
|
+
itemRects: [], // 缓存所有 item 的 rect
|
|
57
|
+
dragIndex: -1,
|
|
58
|
+
dragX: 0,
|
|
59
|
+
dragY: 0,
|
|
60
|
+
startX: 0,
|
|
61
|
+
startY: 0,
|
|
62
|
+
itemWidth: 0, // 横向拖动需要宽度
|
|
63
|
+
itemHeight: 80,
|
|
64
|
+
isDragging: false,
|
|
65
|
+
closestIndex: -1, // 用于临时存储最接近的 index
|
|
66
|
+
lastSwapTime: 0, // 新增：记录上次交换时间
|
|
67
|
+
initialTouchY: 0, // 新增：记录初始触摸位置
|
|
68
|
+
minDragDistance: 15, // 新增：最小拖动距离阈值
|
|
69
|
+
dragStartY: 0, // 新增：记录拖动开始位置
|
|
70
|
+
confirmedDirection: null, // 新增：确认的拖动方向
|
|
71
|
+
};
|
|
72
|
+
},
|
|
73
|
+
emits: ['drag-end'],
|
|
74
|
+
async mounted() {
|
|
75
|
+
await this.$nextTick();
|
|
76
|
+
const rect = await this.calculateItemSize(0);
|
|
77
|
+
this.itemWidth = rect.width;
|
|
78
|
+
this.itemHeight = rect.height;
|
|
79
|
+
},
|
|
80
|
+
methods: {
|
|
81
|
+
setItemRef(el, index) {
|
|
82
|
+
this.itemRefs[index] = el;
|
|
83
|
+
},
|
|
84
|
+
async calculateItemSize(index) {
|
|
85
|
+
return new Promise((resolve) => {
|
|
86
|
+
uni.createSelectorQuery()
|
|
87
|
+
.in(this)
|
|
88
|
+
.select(`#u-dragsort-item-${index}`)
|
|
89
|
+
.boundingClientRect(res => {
|
|
90
|
+
resolve(res || { width: 80, height: 80 });
|
|
91
|
+
})
|
|
92
|
+
.exec();
|
|
93
|
+
});
|
|
94
|
+
},
|
|
95
|
+
async updateItemRects() {
|
|
96
|
+
const rects = await this.getAllItemRects();
|
|
97
|
+
this.itemRects = rects;
|
|
98
|
+
},
|
|
99
|
+
async getAllItemRects() {
|
|
100
|
+
return new Promise(resolve => {
|
|
101
|
+
uni.createSelectorQuery()
|
|
102
|
+
.in(this)
|
|
103
|
+
.selectAll('.u-dragsort-item')
|
|
104
|
+
.boundingClientRect(res => {
|
|
105
|
+
resolve(res || []);
|
|
106
|
+
})
|
|
107
|
+
.exec();
|
|
108
|
+
});
|
|
109
|
+
},
|
|
110
|
+
onTouchStart(index, event) {
|
|
111
|
+
// ⚠️ 如果禁止拖动，则直接返回
|
|
112
|
+
if (!this.draggable || (this.list[index]?.draggable == false)) return;
|
|
113
|
+
|
|
114
|
+
const touch = event.touches[0];
|
|
115
|
+
this.dragIndex = index;
|
|
116
|
+
this.startX = touch.clientX;
|
|
117
|
+
this.startY = touch.clientY;
|
|
118
|
+
// 记录初始触摸位置
|
|
119
|
+
this.initialTouchY = touch.clientY;
|
|
120
|
+
this.dragX = 0;
|
|
121
|
+
this.dragY = 0;
|
|
122
|
+
this.isDragging = true;
|
|
123
|
+
|
|
124
|
+
// 记录拖动开始位置
|
|
125
|
+
this.dragStartY = touch.clientY;
|
|
126
|
+
this.confirmedDirection = null;
|
|
127
|
+
|
|
128
|
+
this.updateItemRects(); // 更新缓存
|
|
129
|
+
},
|
|
130
|
+
// throttle(func, delay) {
|
|
131
|
+
// let lastCall = 0;
|
|
132
|
+
// return (...args) => {
|
|
133
|
+
// const now = new Date().getTime();
|
|
134
|
+
// if (now - lastCall >= delay) {
|
|
135
|
+
// lastCall = now;
|
|
136
|
+
// func.apply(this, args);
|
|
137
|
+
// }
|
|
138
|
+
// };
|
|
139
|
+
// },
|
|
140
|
+
handleDragMove(event) {
|
|
141
|
+
if (this.dragIndex === -1 || !this.draggable) return;
|
|
142
|
+
|
|
143
|
+
const touch = event.touches[0];
|
|
144
|
+
const currentX = touch.clientX;
|
|
145
|
+
const currentY = touch.clientY;
|
|
146
|
+
|
|
147
|
+
const deltaX = currentX - this.startX;
|
|
148
|
+
|
|
149
|
+
// 1. 计算总拖动距离
|
|
150
|
+
const totalDragDistance = Math.abs(currentY - this.dragStartY);
|
|
151
|
+
|
|
152
|
+
// 2. 如果拖动距离小于阈值，不进行位置检测
|
|
153
|
+
if (totalDragDistance < this.minDragDistance) {
|
|
154
|
+
// 只更新位置，不检测交换
|
|
155
|
+
this.dragY = currentY - this.initialTouchY;
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// 3. 确认拖动方向（只做一次）
|
|
160
|
+
if (!this.confirmedDirection) {
|
|
161
|
+
this.confirmedDirection = currentY > this.dragStartY ? 'down' : 'up';
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
this.dragY = currentY - this.initialTouchY;
|
|
165
|
+
|
|
166
|
+
if (this.direction === 'horizontal') {
|
|
167
|
+
this.dragX = deltaX;
|
|
168
|
+
|
|
169
|
+
// 只缓存 rect，不立即交换
|
|
170
|
+
let closestIndex = this.dragIndex;
|
|
171
|
+
let minDistance = Infinity;
|
|
172
|
+
|
|
173
|
+
this.itemRects.forEach((rect, index) => {
|
|
174
|
+
if (index === this.dragIndex) return;
|
|
175
|
+
|
|
176
|
+
const centerX = rect.left + rect.width / 2;
|
|
177
|
+
const centerY = rect.top + rect.height / 2;
|
|
178
|
+
const dist = Math.hypot(currentX - centerX, currentY - centerY);
|
|
179
|
+
|
|
180
|
+
if (dist < minDistance) {
|
|
181
|
+
minDistance = dist;
|
|
182
|
+
closestIndex = index;
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
// 设置临时高亮/排序索引，并立即修改 list
|
|
187
|
+
if (closestIndex !== this.closestIndex && closestIndex !== this.dragIndex) {
|
|
188
|
+
const temp = this.list[this.dragIndex];
|
|
189
|
+
this.list.splice(this.dragIndex, 1);
|
|
190
|
+
this.list.splice(closestIndex, 0, temp);
|
|
191
|
+
|
|
192
|
+
this.dragIndex = closestIndex;
|
|
193
|
+
this.closestIndex = closestIndex;
|
|
194
|
+
}
|
|
195
|
+
} else {
|
|
196
|
+
// 4. 添加更严格的防抖
|
|
197
|
+
const now = Date.now();
|
|
198
|
+
if (now - this.lastSwapTime < 200) return; // 延长防抖时间
|
|
199
|
+
|
|
200
|
+
// 5. 使用方向感知的目标位置计算
|
|
201
|
+
const targetIndex = this.calculateTargetPosition(currentY);
|
|
202
|
+
|
|
203
|
+
if (targetIndex !== -1 && targetIndex !== this.dragIndex) {
|
|
204
|
+
this.lastSwapTime = now;
|
|
205
|
+
this.swapItems(targetIndex, event);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
// 优化：更精准的方向感知位置计算
|
|
210
|
+
calculateTargetPosition(currentY) {
|
|
211
|
+
// 获取拖动项的中心Y坐标
|
|
212
|
+
const dragCenterY = currentY;
|
|
213
|
+
let closestIndex = -1;
|
|
214
|
+
let minDistance = Infinity;
|
|
215
|
+
|
|
216
|
+
// 获取拖动项的高度
|
|
217
|
+
const dragHeight = this.itemRects[this.dragIndex]?.height || this.itemHeight;
|
|
218
|
+
|
|
219
|
+
for (let i = 0; i < this.itemRects.length; i++) {
|
|
220
|
+
if (i === this.dragIndex) continue;
|
|
221
|
+
|
|
222
|
+
const rect = this.itemRects[i];
|
|
223
|
+
if (!rect) continue;
|
|
224
|
+
|
|
225
|
+
const rectCenterY = rect.top + rect.height / 2;
|
|
226
|
+
const distance = Math.abs(dragCenterY - rectCenterY);
|
|
227
|
+
|
|
228
|
+
// 6. 方向过滤：只考虑当前拖动方向上的元素
|
|
229
|
+
const isDirectionMatch =
|
|
230
|
+
(this.confirmedDirection === 'down' && i > this.dragIndex) ||
|
|
231
|
+
(this.confirmedDirection === 'up' && i < this.dragIndex);
|
|
232
|
+
|
|
233
|
+
if (!isDirectionMatch) continue;
|
|
234
|
+
|
|
235
|
+
// 7. 使用更大的阈值（元素高度的1.2倍）
|
|
236
|
+
const threshold = dragHeight * 1.2;
|
|
237
|
+
|
|
238
|
+
if (distance < minDistance && distance < threshold) {
|
|
239
|
+
minDistance = distance;
|
|
240
|
+
closestIndex = i;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
return closestIndex;
|
|
245
|
+
},
|
|
246
|
+
|
|
247
|
+
// 优化：添加平滑交换
|
|
248
|
+
swapItems(targetIndex, event) {
|
|
249
|
+
const originalIndex = this.dragIndex;
|
|
250
|
+
|
|
251
|
+
// 6. 执行交换前保存当前样式
|
|
252
|
+
const originalTransform = this.$refs[`u-dragsort-item-${originalIndex}`]?.style.transform;
|
|
253
|
+
|
|
254
|
+
// 执行交换
|
|
255
|
+
const temp = this.list[originalIndex];
|
|
256
|
+
this.list.splice(originalIndex, 1);
|
|
257
|
+
this.list.splice(targetIndex, 0, temp);
|
|
258
|
+
|
|
259
|
+
// 更新索引
|
|
260
|
+
this.dragIndex = targetIndex;
|
|
261
|
+
this.closestIndex = targetIndex;
|
|
262
|
+
|
|
263
|
+
// 7. 使用当前触摸位置更新初始位置
|
|
264
|
+
if (event && event.touches && event.touches[0]) {
|
|
265
|
+
this.initialTouchY = event.touches[0].clientY;
|
|
266
|
+
this.dragY = 0;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
// 8. 添加位置平滑过渡
|
|
270
|
+
this.$nextTick(() => {
|
|
271
|
+
const dragItem = this.$refs[`u-dragsort-item-${targetIndex}`];
|
|
272
|
+
if (dragItem) {
|
|
273
|
+
// 保存当前位置
|
|
274
|
+
const currentTransform = dragItem.style.transform;
|
|
275
|
+
|
|
276
|
+
// 临时添加过渡效果
|
|
277
|
+
dragItem.style.transition = 'transform 0.15s ease';
|
|
278
|
+
dragItem.style.transform = currentTransform;
|
|
279
|
+
|
|
280
|
+
// 过渡结束后移除效果
|
|
281
|
+
setTimeout(() => {
|
|
282
|
+
dragItem.style.transition = '';
|
|
283
|
+
}, 150);
|
|
284
|
+
}
|
|
285
|
+
});
|
|
286
|
+
|
|
287
|
+
// 更新位置缓存
|
|
288
|
+
this.updateItemRects();
|
|
289
|
+
},
|
|
290
|
+
|
|
291
|
+
onTouchMove(event) {
|
|
292
|
+
// 记录当前Y坐标用于方向判断
|
|
293
|
+
if (event.touches && event.touches[0]) {
|
|
294
|
+
this.prevY = event.touches[0].clientY;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
// 使用requestAnimationFrame确保流畅性
|
|
298
|
+
if (!this.rafId) {
|
|
299
|
+
this.rafId = requestAnimationFrame(() => {
|
|
300
|
+
this.handleDragMove(event);
|
|
301
|
+
this.rafId = null;
|
|
302
|
+
});
|
|
303
|
+
}
|
|
304
|
+
},
|
|
305
|
+
onTouchEnd() {
|
|
306
|
+
// 取消动画帧
|
|
307
|
+
if (this.rafId) {
|
|
308
|
+
cancelAnimationFrame(this.rafId);
|
|
309
|
+
this.rafId = null;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
// if (this.isDragging && this.closestIndex !== -1 && this.closestIndex !== this.dragIndex) {
|
|
313
|
+
// const temp = this.list[this.dragIndex];
|
|
314
|
+
// this.list.splice(this.dragIndex, 1);
|
|
315
|
+
// this.list.splice(this.closestIndex, 0, temp);
|
|
316
|
+
// this.dragIndex = this.closestIndex;
|
|
317
|
+
// }
|
|
318
|
+
|
|
319
|
+
this.$emit('drag-end', this.list);
|
|
320
|
+
this.dragIndex = -1;
|
|
321
|
+
this.dragX = 0;
|
|
322
|
+
this.dragY = 0;
|
|
323
|
+
this.isDragging = false;
|
|
324
|
+
this.closestIndex = -1;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
};
|
|
328
|
+
</script>
|
|
329
|
+
|
|
330
|
+
<style scoped lang="scss">
|
|
331
|
+
.u-dragsort {
|
|
332
|
+
width: 100%;
|
|
333
|
+
|
|
334
|
+
.u-dragsort-item {
|
|
335
|
+
// transition: transform 0.15s ease, margin-top 0.15s ease;
|
|
336
|
+
transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);
|
|
337
|
+
&.dragging {
|
|
338
|
+
// 拖动时禁用过渡
|
|
339
|
+
// transition: none;
|
|
340
|
+
// 确保在最上层
|
|
341
|
+
z-index: 1000;
|
|
342
|
+
// transform: scale(1.05);
|
|
343
|
+
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
|
|
344
|
+
}
|
|
345
|
+
&.nearby {
|
|
346
|
+
opacity: 95;
|
|
347
|
+
transform: scale(1.02);
|
|
348
|
+
}
|
|
349
|
+
.u-dragsort-item-content {
|
|
350
|
+
padding: 10px;
|
|
351
|
+
text-align: center;
|
|
352
|
+
background-color: #f5f5f5;
|
|
353
|
+
border-radius: 8rpx;
|
|
354
|
+
transition: all 0.3s ease;
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
&.u-dragsort--horizontal {
|
|
359
|
+
display: flex;
|
|
360
|
+
flex-direction: row;
|
|
361
|
+
flex-wrap: wrap;
|
|
362
|
+
overflow: visible; // 取消滚动条，允许自然换行
|
|
363
|
+
.u-dragsort-item {
|
|
364
|
+
flex-shrink: 0;
|
|
365
|
+
box-sizing: border-box;
|
|
366
|
+
.u-dragsort-item-content {
|
|
367
|
+
margin: 1px;
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
</style>
|
|
@@ -8,13 +8,13 @@
|
|
|
8
8
|
<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
|
|
9
9
|
<view class="u-flex u-flex-row">
|
|
10
10
|
<text class="u-dropdown__menu__item__text" :style="{
|
|
11
|
-
color: item.disabled ? '#c0c4cc' : (index === current ||
|
|
11
|
+
color: item.disabled ? '#c0c4cc' : (index === current || highlightIndexList.includes(index)) ? activeColor : inactiveColor,
|
|
12
12
|
fontSize: addUnit(titleSize)
|
|
13
13
|
}">{{item.title}}</text>
|
|
14
14
|
<view class="u-dropdown__menu__item__arrow" :class="{
|
|
15
15
|
'u-dropdown__menu__item__arrow--rotate': index === current
|
|
16
16
|
}">
|
|
17
|
-
<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="addUnit(menuIconSize)" :color="index === current ||
|
|
17
|
+
<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="addUnit(menuIconSize)" :color="index === current || highlightIndexList.includes(index) ? activeColor : '#c0c4cc'"></u-icon>
|
|
18
18
|
</view>
|
|
19
19
|
</view>
|
|
20
20
|
</view>
|
|
@@ -71,8 +71,8 @@
|
|
|
71
71
|
zIndex: -1,
|
|
72
72
|
opacity: 0
|
|
73
73
|
},
|
|
74
|
-
//
|
|
75
|
-
|
|
74
|
+
// 让某些菜单保持高亮的状态
|
|
75
|
+
highlightIndexList: [],
|
|
76
76
|
contentHeight: 0
|
|
77
77
|
}
|
|
78
78
|
},
|
|
@@ -160,9 +160,13 @@
|
|
|
160
160
|
if (!this.closeOnClickMask) return;
|
|
161
161
|
this.close();
|
|
162
162
|
},
|
|
163
|
-
//
|
|
164
|
-
highlight(
|
|
165
|
-
|
|
163
|
+
// 外部手动设置某些菜单高亮
|
|
164
|
+
highlight(indexParams = undefined) {
|
|
165
|
+
if (Array.isArray(indexParams)) {
|
|
166
|
+
this.highlightIndexList = [...indexParams];
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
this.highlightIndexList = indexParams !== undefined ? [indexParams] : [];
|
|
166
170
|
},
|
|
167
171
|
// 获取下拉菜单内容的高度
|
|
168
172
|
getContentHeight() {
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
import { mpMixin } from '../../libs/mixin/mpMixin';
|
|
43
43
|
import { mixin } from '../../libs/mixin/mixin';
|
|
44
44
|
import { addUnit, addStyle } from '../../libs/function/index';
|
|
45
|
+
import fontUtil from './util';
|
|
45
46
|
/**
|
|
46
47
|
* icon 图标
|
|
47
48
|
* @description 基于字体的图标集，包含了大多数常见场景的图标。
|
|
@@ -71,54 +72,7 @@
|
|
|
71
72
|
export default {
|
|
72
73
|
name: 'u-icon',
|
|
73
74
|
beforeCreate() {
|
|
74
|
-
|
|
75
|
-
// #ifdef APP-NVUE
|
|
76
|
-
// nvue通过weex的dom模块引入字体，相关文档地址如下：
|
|
77
|
-
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
|
78
|
-
const domModule = weex.requireModule('dom');
|
|
79
|
-
domModule.addRule('fontFace', {
|
|
80
|
-
'fontFamily': "uicon-iconfont",
|
|
81
|
-
'src': `url('${config.iconUrl}')`
|
|
82
|
-
});
|
|
83
|
-
if (config.customIcon.family) {
|
|
84
|
-
domModule.addRule('fontFace', {
|
|
85
|
-
'fontFamily': config.customIcon.family,
|
|
86
|
-
'src': `url('${config.customIcon.url}')`
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
// #endif
|
|
90
|
-
// #ifdef APP || H5 || MP-WEIXIN || MP-ALIPAY
|
|
91
|
-
uni.loadFontFace({
|
|
92
|
-
family: 'uicon-iconfont',
|
|
93
|
-
source: 'url("' + config.iconUrl + '")',
|
|
94
|
-
success() {
|
|
95
|
-
// console.log('内置字体图标加载成功');
|
|
96
|
-
},
|
|
97
|
-
fail() {
|
|
98
|
-
// console.error('内置字体图标加载出错');
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
if (config.customIcon.family) {
|
|
102
|
-
uni.loadFontFace({
|
|
103
|
-
family: config.customIcon.family,
|
|
104
|
-
source: 'url("' + config.customIcon.url + '")',
|
|
105
|
-
success() {
|
|
106
|
-
// console.log('扩展字体图标加载成功');
|
|
107
|
-
},
|
|
108
|
-
fail() {
|
|
109
|
-
// console.error('扩展字体图标加载出错');
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
// #endif
|
|
114
|
-
// #ifdef APP-NVUE
|
|
115
|
-
if (this.customFontFamily) {
|
|
116
|
-
domModule.addRule('fontFace', {
|
|
117
|
-
'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
|
|
118
|
-
'src': `url('${this.customFontUrl}')`
|
|
119
|
-
})
|
|
120
|
-
}
|
|
121
|
-
// #endif
|
|
75
|
+
fontUtil.loadFont();
|
|
122
76
|
},
|
|
123
77
|
data() {
|
|
124
78
|
return {
|
|
@@ -7,7 +7,7 @@ function once(fn) {
|
|
|
7
7
|
return function(...args) {
|
|
8
8
|
if (!called) {
|
|
9
9
|
result = fn.apply(this, args);
|
|
10
|
-
|
|
10
|
+
called = true;
|
|
11
11
|
}
|
|
12
12
|
return result;
|
|
13
13
|
};
|
|
@@ -15,7 +15,7 @@ function once(fn) {
|
|
|
15
15
|
|
|
16
16
|
// 使用高阶函数
|
|
17
17
|
const loadFont = once(() => {
|
|
18
|
-
console.log('这个函数只能执行一次');
|
|
18
|
+
// console.log('这个函数只能执行一次');
|
|
19
19
|
// #ifdef APP-NVUE
|
|
20
20
|
// nvue通过weex的dom模块引入字体，相关文档地址如下：
|
|
21
21
|
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
|
@@ -33,6 +33,7 @@ const loadFont = once(() => {
|
|
|
33
33
|
// #endif
|
|
34
34
|
// #ifdef APP || H5 || MP-WEIXIN || MP-ALIPAY
|
|
35
35
|
uni.loadFontFace({
|
|
36
|
+
global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
|
|
36
37
|
family: 'uicon-iconfont',
|
|
37
38
|
source: 'url("' + config.iconUrl + '")',
|
|
38
39
|
success() {
|
|
@@ -44,6 +45,7 @@ const loadFont = once(() => {
|
|
|
44
45
|
});
|
|
45
46
|
if (config.customIcon.family) {
|
|
46
47
|
uni.loadFontFace({
|
|
48
|
+
global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
|
|
47
49
|
family: config.customIcon.family,
|
|
48
50
|
source: 'url("' + config.customIcon.url + '")',
|
|
49
51
|
success() {
|
|
@@ -66,8 +68,8 @@ const loadFont = once(() => {
|
|
|
66
68
|
return true;
|
|
67
69
|
});
|
|
68
70
|
|
|
69
|
-
let
|
|
71
|
+
let fontUtil = {
|
|
70
72
|
loadFont
|
|
71
73
|
}
|
|
72
74
|
|
|
73
|
-
export default
|
|
75
|
+
export default fontUtil
|
package/index.js
CHANGED
|
@@ -38,9 +38,12 @@ import platform from './libs/function/platform'
|
|
|
38
38
|
// http
|
|
39
39
|
import http from './libs/function/http.js'
|
|
40
40
|
|
|
41
|
+
// fontUtil
|
|
42
|
+
import fontUtil from './components/u-icon/util.js';
|
|
43
|
+
|
|
41
44
|
// 导出
|
|
42
45
|
let themeType = ['primary', 'success', 'error', 'warning', 'info'];
|
|
43
|
-
export { route, http, debounce, throttle, calc, digit, platform, themeType, mixin, mpMixin, props, color, test, zIndex }
|
|
46
|
+
export { route, http, debounce, throttle, calc, digit, platform, themeType, mixin, mpMixin, props, color, test, zIndex, fontUtil }
|
|
44
47
|
export * from './libs/function/index.js'
|
|
45
48
|
export * from './libs/function/colorGradient.js'
|
|
46
49
|
|
package/package.json
CHANGED