uview-plus 3.4.53 → 3.4.55
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 +10 -0
- package/components/u-city-locate/u-city-locate.vue +180 -0
- package/components/u-dropdown/u-dropdown.vue +11 -7
- package/components/u-icon/u-icon.vue +2 -48
- package/components/u-icon/util.js +6 -4
- package/components/u-index-anchor/indexAnchor.js +1 -1
- package/components/u-index-anchor/u-index-anchor.vue +6 -2
- package/components/u-index-list/u-index-list.vue +7 -3
- package/index.js +4 -1
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
## 3.4.55（2025-07-21）
|
|
2
|
+
feat: 新增city-locate城市定位选择组件
|
|
3
|
+
|
|
4
|
+
feat: 优化index-list组件索引
|
|
5
|
+
|
|
6
|
+
## 3.4.54（2025-07-18）
|
|
7
|
+
feat: dropdown组件的highlight方法支持同时高亮多个菜单项
|
|
8
|
+
|
|
9
|
+
feat: 支持一次性全局加载icon字体
|
|
10
|
+
|
|
1
11
|
## 3.4.53（2025-07-18）
|
|
2
12
|
feat: dropdown组件的highlight方法支持同时高亮多个菜单项 感谢@keeplearning66
|
|
3
13
|
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="u-city-locate">
|
|
3
|
+
<up-index-list :indexList="indexList">
|
|
4
|
+
<template #header>
|
|
5
|
+
<view class="u-current-city-wrap">
|
|
6
|
+
<view class="u-current-city-title">定位城市</view>
|
|
7
|
+
<view class="u-current-city-item" @tap="location">
|
|
8
|
+
<view class="u-location-city">{{locationCity}}</view>
|
|
9
|
+
</view>
|
|
10
|
+
</view>
|
|
11
|
+
</template>
|
|
12
|
+
<template :key="index" v-for="(item, index) in cityList">
|
|
13
|
+
<!-- #ifdef APP-NVUE -->
|
|
14
|
+
<up-index-anchor :text="indexList[index]"></up-index-anchor>
|
|
15
|
+
<!-- #endif -->
|
|
16
|
+
<up-index-item>
|
|
17
|
+
<!-- #ifndef APP-NVUE -->
|
|
18
|
+
<up-index-anchor :text="indexList[index]"></up-index-anchor>
|
|
19
|
+
<!-- #endif -->
|
|
20
|
+
<view class="hot-city-list" v-if="index == 0">
|
|
21
|
+
<view class="" v-for="(item1, index1) in item" @tap="selectedCity(item1)">
|
|
22
|
+
<view class="hot-city-item">{{ item1[nameKey] }}</view>
|
|
23
|
+
</view>
|
|
24
|
+
</view>
|
|
25
|
+
<view v-else class="item-list" v-for="(item1, index1) in item" :key="index1">
|
|
26
|
+
<view class="list__item" @tap="selectedCity(item1)">
|
|
27
|
+
<text class="list__item__city-name">{{item1[nameKey]}}</text>
|
|
28
|
+
</view>
|
|
29
|
+
<up-line></up-line>
|
|
30
|
+
</view>
|
|
31
|
+
</up-index-item>
|
|
32
|
+
</template>
|
|
33
|
+
<template #footer>
|
|
34
|
+
<view class="u-safe-area-inset--bottom">
|
|
35
|
+
<text class="list__footer"></text>
|
|
36
|
+
</view>
|
|
37
|
+
</template>
|
|
38
|
+
</up-index-list>
|
|
39
|
+
</view>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script>
|
|
43
|
+
export default{
|
|
44
|
+
name: 'u-city-locate',
|
|
45
|
+
props:{
|
|
46
|
+
indexList: {
|
|
47
|
+
type: Array,
|
|
48
|
+
default: ['城市']
|
|
49
|
+
},
|
|
50
|
+
hotCity:{
|
|
51
|
+
type: Array,
|
|
52
|
+
default: () => {
|
|
53
|
+
return [
|
|
54
|
+
{
|
|
55
|
+
name: '北京',
|
|
56
|
+
value: 'beijing'
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: '上海',
|
|
60
|
+
value: 'shanghai'
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: '广州',
|
|
64
|
+
value: 'guangzhou'
|
|
65
|
+
},
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
cityList:{
|
|
70
|
+
type: Array,
|
|
71
|
+
default: () => {
|
|
72
|
+
return [
|
|
73
|
+
[{
|
|
74
|
+
name: '北京',
|
|
75
|
+
value: 'beijing'
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
name: '上海',
|
|
79
|
+
value: 'shanghai'
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
name: '广州',
|
|
83
|
+
value: 'guangzhou'
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
name: '深圳',
|
|
87
|
+
value: 'shenzhen'
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: '杭州',
|
|
91
|
+
value: 'hangzhou'
|
|
92
|
+
}]
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
locationType: {
|
|
97
|
+
type: String,
|
|
98
|
+
default: 'wgs84'
|
|
99
|
+
},
|
|
100
|
+
currentCity: {
|
|
101
|
+
type: String,
|
|
102
|
+
default: ''
|
|
103
|
+
},
|
|
104
|
+
nameKey: {
|
|
105
|
+
type: String,
|
|
106
|
+
default: 'name'
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
computed:{
|
|
110
|
+
},
|
|
111
|
+
watch:{
|
|
112
|
+
currentCity(val) {
|
|
113
|
+
this.locationCity = val;
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
data(){
|
|
117
|
+
return{
|
|
118
|
+
locationCity: '定位中....'
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
emits: ['location-success', 'select-city'],
|
|
122
|
+
methods:{
|
|
123
|
+
// 获取城市
|
|
124
|
+
selectedCity(city){
|
|
125
|
+
this.locationCity = city[this.nameKey];
|
|
126
|
+
this.$emit('select-city', {
|
|
127
|
+
locationCity: this.locationCity
|
|
128
|
+
});
|
|
129
|
+
},
|
|
130
|
+
// 定位操作
|
|
131
|
+
location(){
|
|
132
|
+
let That = this;
|
|
133
|
+
uni.getLocation({
|
|
134
|
+
type: this.locationType,
|
|
135
|
+
geocode:true,
|
|
136
|
+
success(res){
|
|
137
|
+
console.log(res);
|
|
138
|
+
That.locationCity = res.address && res.address.city;
|
|
139
|
+
That.$emit('location-success', {
|
|
140
|
+
...res,
|
|
141
|
+
locationCity: That.locationCity
|
|
142
|
+
});
|
|
143
|
+
},
|
|
144
|
+
fail(){
|
|
145
|
+
That.locationCity = "定位失败，请点击重试"
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
},
|
|
149
|
+
},
|
|
150
|
+
// 页面挂载后进行异步操作
|
|
151
|
+
created(){
|
|
152
|
+
},
|
|
153
|
+
mounted(){
|
|
154
|
+
this.location();
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
</script>
|
|
158
|
+
|
|
159
|
+
<style lang="scss">
|
|
160
|
+
.list__item {
|
|
161
|
+
padding: 8px 1px;
|
|
162
|
+
}
|
|
163
|
+
.u-current-city-title {
|
|
164
|
+
color: grey;
|
|
165
|
+
margin-bottom: 5px;
|
|
166
|
+
}
|
|
167
|
+
.u-current-city-item {
|
|
168
|
+
height: 30px;
|
|
169
|
+
}
|
|
170
|
+
.hot-city-list {
|
|
171
|
+
display: flex !important;
|
|
172
|
+
flex-direction: row !important;
|
|
173
|
+
padding: 12px 0;
|
|
174
|
+
.hot-city-item {
|
|
175
|
+
padding: 6px 12px;
|
|
176
|
+
margin: 5px;
|
|
177
|
+
border: 1px solid #ededed;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
</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
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
fontSize: addUnit(size),
|
|
18
18
|
color: color
|
|
19
19
|
}"
|
|
20
|
-
>{{ text }}</text>
|
|
20
|
+
>{{ text.name || text }}</text>
|
|
21
21
|
</view>
|
|
22
22
|
<!-- #ifdef APP-NVUE -->
|
|
23
23
|
</header>
|
|
@@ -70,7 +70,11 @@
|
|
|
70
70
|
return error('u-index-anchor必须要搭配u-index-item组件使用')
|
|
71
71
|
}
|
|
72
72
|
// 设置u-index-item的id为anchor的text标识符，因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
|
|
73
|
-
|
|
73
|
+
if (typeof this.text == 'string') {
|
|
74
|
+
indexListItem.id = this.text.charCodeAt(0)
|
|
75
|
+
} else {
|
|
76
|
+
indexListItem.id = this.text.name.charCodeAt(0)
|
|
77
|
+
}
|
|
74
78
|
// #endif
|
|
75
79
|
}
|
|
76
80
|
},
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
<text
|
|
67
67
|
class="u-index-list__letter__item__index"
|
|
68
68
|
:style="{color: activeIndex === index ? '#fff' : inactiveColor}"
|
|
69
|
-
>{{ item }}</text>
|
|
69
|
+
>{{ item.key || item }}</text>
|
|
70
70
|
</view>
|
|
71
71
|
</view>
|
|
72
72
|
<u-transition
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
width: addUnit(indicatorHeight)
|
|
88
88
|
}"
|
|
89
89
|
>
|
|
90
|
-
<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
|
|
90
|
+
<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex].key || uIndexList[activeIndex] }}</text>
|
|
91
91
|
</view>
|
|
92
92
|
</u-transition>
|
|
93
93
|
</view>
|
|
@@ -392,7 +392,11 @@
|
|
|
392
392
|
this.$emit('select', this.uIndexList[currentIndex])
|
|
393
393
|
// #ifndef APP-NVUE || MP-WEIXIN
|
|
394
394
|
// 在非nvue中，由于anchor和item都在u-index-item中，所以需要对index-item进行偏移
|
|
395
|
-
|
|
395
|
+
if (typeof this.uIndexList[currentIndex] == 'string') {
|
|
396
|
+
this.scrollIntoView = `u-index-item-${this.uIndexList[currentIndex].charCodeAt(0)}`
|
|
397
|
+
} else {
|
|
398
|
+
this.scrollIntoView = `u-index-item-${this.uIndexList[currentIndex].name.charCodeAt(0)}`
|
|
399
|
+
}
|
|
396
400
|
// #endif
|
|
397
401
|
|
|
398
402
|
// #ifdef MP-WEIXIN
|
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