Skip to content

Commit c33b937

Browse files
wlxuquwlxuqu
committed
1. 修复Picker单列和多列在微信小程序上可能存在的问题
2. 修复mask组件演示无效的问题 3. 重构Grid宫格组件，各校小程序使用float布局，H5和APP使用flex布局 4. 优化CircleProgress圆形进度条卡顿的问题 5. 修改Field组件的名为button的slot为right 6. 修复Th组件的width参数带单位时无效的问题 7. 处理npm安装方式，mixin.js中条件编译无效，getRect方法带来的问题 8. 优化tabsSwiper全屏选项卡滑块位置可能错乱的问题
1 parent ead9b90 commit c33b937

File tree

31 files changed

+2297
-324
lines changed

31 files changed

+2297
-324
lines changed

‎App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,4 @@
2626
background: transparent;
2727
}
2828
/* #endif */
29-
</style>
29+
</style>

‎common/http.interceptor.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ const install = (Vue, vm) => {
66
// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
77
// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
88
// originalData: true,
9+
// 设置自定义头部content-type
10+
// header: {
11+
// 'content-type': 'xxx'
12+
// }
913
});
1014
// 请求拦截，配置Token等参数
1115
Vue.prototype.$u.http.interceptor.request = (config) => {

‎pages.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
// "current": 0, //当前激活的模式(list 的索引项)
77
// "list": [{
88
// "name": "test", //模式名称
9-
// "path": "pages/componentsC/test/index", //启动页面，必选
9+
// "path": "pages/componentsC/grid/index", //启动页面，必选
1010
// "query": "id=1&name=2" //启动参数，在页面的-+onLoad函数里面得到
1111
// }]
1212
// },
@@ -245,6 +245,13 @@
245245
"navigationBarTitleText": "美团登录"
246246
}
247247
},
248+
// 城市选择
249+
{
250+
"path": "citySelect/index",
251+
"style": {
252+
"navigationBarTitleText": "城市选择"
253+
}
254+
},
248255
// SubmitBar提交订单栏
249256
{
250257
"path": "submitBar/index",

‎pages/componentsA/modal/index.vue

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -81,20 +81,5 @@
8181
</script>
8282

8383
<style scoped lang="scss">
84-
.warp {
85-
display: flex;
86-
align-items: center;
87-
justify-content: center;
88-
height: 100%;
89-
}
90-
91-
.rect {
92-
width: 120px;
93-
height: 120px;
94-
background-color: #fff;
95-
}
9684
97-
.logo {
98-
height: auto;
99-
}
10085
</style>

‎pages/componentsB/picker/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export default {
133133
},
134134
columnchange(e) {
135135
let column = e.column, index = e.index;
136-
this.defaultSelector.splice(column, 1, index)
136+
this.defaultSelector[column] = index;
137137
switch (column) {
138138
case 0:
139139
switch (index) {

‎pages/componentsC/test/index.vue

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,48 @@
11
<template>
2-
<view class="">
3-
<u-keyboard ref="uKeyboard" mode="number" v-model="show" @backspace="backspace" @change="change"><u-message-input :value="value"></u-message-input></u-keyboard>
2+
<view class="u-demo">
3+
<view class="u-demo-wrap">
4+
<view class="u-demo-title">演示效果</view>
5+
<view class="u-demo-area">
6+
<city-select v-model="value" @city-change="cityChange"></city-select>
7+
<view class="u-demo-result-line">{{ input ? input : 'Picker值' }}</view>
8+
</view>
9+
</view>
10+
<view class="u-config-wrap">
11+
<view class="u-config-title u-border-bottom">参数配置</view>
12+
<view class="u-config-item">
13+
<view class="u-item-title">状态</view>
14+
<u-button @click="value = true">打开Picker</u-button>
15+
</view>
16+
</view>
417
</view>
518
</template>
619

720
<script>
21+
import citySelect from './u-city-select.vue';
822
export default {
23+
components: {
24+
citySelect
25+
},
926
data() {
1027
return {
11-
show: true,
12-
value: ''
28+
height: 30,
29+
bgColor: this.$u.color.bgColor,
30+
marginTop: 30,
31+
marginBottom: 30,
32+
value: false,
33+
input: '',
1334
};
1435
},
1536
methods: {
16-
change(val) {
17-
this.value += val;
18-
},
19-
backspace() {
20-
// 删除value的最后一个字符
21-
if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
22-
//console.log(this.value);
37+
cityChange(e) {
38+
this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
2339
}
2440
}
2541
};
2642
</script>
43+
44+
<style scoped>
45+
.btn-wrap {
46+
margin: 100rpx 30rpx;
47+
}
48+
</style>

‎pages/componentsC/test/u-city-select.vue

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<template>
2+
<u-popup v-model="value" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
3+
close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
4+
<u-tabs :list="genTabsList" :is-scroll="true" :current="tabsIndex" @change="tabsChange"></u-tabs>
5+
<view class="area-box">
6+
<view class="u-flex" :class="{ 'change':isChange }">
7+
<view class="area-item">
8+
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
9+
<scroll-view :scroll-y="true">
10+
<u-cell-group>
11+
<u-cell-item v-for="(item,index) in provinces" :title="item.label" :arrow="false" :index="index" :key="index"
12+
@click="provinceChange">
13+
<u-icon v-show="isChooseP&&province===index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
14+
</u-cell-item>
15+
</u-cell-group>
16+
</scroll-view>
17+
</view>
18+
</view>
19+
<view class="area-item">
20+
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
21+
<scroll-view :scroll-y="true">
22+
<u-cell-group v-show="isChooseP">
23+
<u-cell-item v-for="(item,index) in citys" :title="item.label" :arrow="false" :index="index" :key="index"
24+
@click="cityChange">
25+
<u-icon v-show="isChooseC&&city===index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
26+
</u-cell-item>
27+
</u-cell-group>
28+
</scroll-view>
29+
</view>
30+
</view>
31+
32+
<view class="area-item">
33+
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
34+
<scroll-view :scroll-y="true">
35+
<u-cell-group v-show="isChooseC">
36+
<u-cell-item v-for="(item,index) in areas" :title="item.label" :arrow="false" :index="index" :key="index"
37+
@click="areaChange">
38+
<u-icon v-show="isChooseA&&area===index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
39+
</u-cell-item>
40+
</u-cell-group>
41+
</scroll-view>
42+
</view>
43+
</view>
44+
</view>
45+
</view>
46+
</u-popup>
47+
</template>
48+
49+
<script>
50+
import provinces from "uview-ui/libs/util/province.js";
51+
import citys from "uview-ui/libs/util/city.js";
52+
import areas from "uview-ui/libs/util/area.js";
53+
/**
54+
* city-select 省市区级联选择器
55+
* @property {String Number} z-index 弹出时的z-index值（默认1075）
56+
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
57+
* @property {String} default-region 默认选中的地区，中文形式
58+
* @property {String} default-code 默认选中的地区，编号形式
59+
*/
60+
export default {
61+
name: 'u-city-select',
62+
props: {
63+
// 通过双向绑定控制组件的弹出与收起
64+
value: {
65+
type: Boolean,
66+
default: false
67+
},
68+
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
69+
defaultRegion: {
70+
type: Array,
71+
default () {
72+
return [];
73+
}
74+
},
75+
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
76+
areaCode: {
77+
type: Array,
78+
default () {
79+
return [];
80+
}
81+
},
82+
// 是否允许通过点击遮罩关闭Picker
83+
maskCloseAble: {
84+
type: Boolean,
85+
default: true
86+
},
87+
// 弹出的z-index值
88+
zIndex: {
89+
type: [String, Number],
90+
default: 0
91+
}
92+
},
93+
data() {
94+
return {
95+
cityValue: "",
96+
isChooseP: false, //是否已经选择了省
97+
province: 0, //省级下标
98+
provinces: provinces,
99+
isChooseC: false, //是否已经选择了市
100+
city: 0, //市级下标
101+
citys: citys[0],
102+
isChooseA: false, //是否已经选择了区
103+
area: 0, //区级下标
104+
areas: areas[0][0],
105+
tabsList: [{
106+
name: '请选择'
107+
}],
108+
tabsIndex: 0,
109+
}
110+
},
111+
mounted() {
112+
this.init();
113+
},
114+
computed: {
115+
isChange() {
116+
return this.tabsIndex > 1;
117+
},
118+
genTabsList() {
119+
let tabsList = [{
120+
name: "请选择"
121+
}];
122+
if (this.isChooseP) {
123+
tabsList[0]['name'] = this.provinces[this.province]['label'];
124+
tabsList[1] = {
125+
name: "请选择"
126+
};
127+
}
128+
if (this.isChooseC) {
129+
tabsList[1]['name'] = this.citys[this.city]['label'];
130+
tabsList[2] = {
131+
name: "请选择"
132+
};
133+
}
134+
if (this.isChooseA) {
135+
tabsList[2]['name'] = this.areas[this.area]['label'];
136+
}
137+
return tabsList;
138+
},
139+
uZIndex() {
140+
// 如果用户有传递z-index值，优先使用
141+
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
142+
}
143+
},
144+
methods: {
145+
init() {
146+
if (this.areaCode.length) {
147+
this.setProvince("", this.areaCode[0]);
148+
this.setCity("", this.areaCode[1]);
149+
this.setArea("", this.areaCode[2]);
150+
} else if (this.defaultRegion.length) {
151+
this.setProvince(this.defaultRegion[0], "");
152+
this.setCity(this.defaultRegion[1], "");
153+
this.setArea(this.defaultRegion[2], "");
154+
};
155+
},
156+
setProvince(label = "", value = "") {
157+
this.provinces.map((v, k) => {
158+
if (value ? v.value == value : v.label == label) {
159+
this.provinceChange(k);
160+
}
161+
})
162+
},
163+
setCity(label = "", value = "") {
164+
this.citys.map((v, k) => {
165+
if (value ? v.value == value : v.label == label) {
166+
this.cityChange(k);
167+
}
168+
})
169+
},
170+
setArea(label = "", value = "") {
171+
this.areas.map((v, k) => {
172+
if (value ? v.value == value : v.label == label) {
173+
this.isChooseA = true;
174+
this.area = k;
175+
}
176+
})
177+
},
178+
close() {
179+
this.$emit('input', false);
180+
},
181+
tabsChange(index) {
182+
this.tabsIndex = index;
183+
},
184+
provinceChange(index) {
185+
this.isChooseP = true;
186+
this.isChooseC = false;
187+
this.isChooseA = false;
188+
this.province = index;
189+
this.citys = citys[index];
190+
this.tabsIndex = 1;
191+
},
192+
cityChange(index) {
193+
this.isChooseC = true;
194+
this.isChooseA = false;
195+
this.city = index;
196+
this.areas = areas[this.province][index];
197+
this.tabsIndex = 2;
198+
},
199+
areaChange(index) {
200+
this.isChooseA = true;
201+
this.area = index;
202+
let result = {};
203+
result.province = this.provinces[this.province];
204+
result.city = this.citys[this.city];
205+
result.area = this.areas[this.area];
206+
this.$emit('city-change', result);
207+
this.close();
208+
}
209+
}
210+
211+
}
212+
</script>
213+
<style lang="scss">
214+
.area-box {
215+
width: 100%;
216+
overflow: hidden;
217+
height: 800rpx;
218+
219+
>view {
220+
width: 150%;
221+
transition: transform 0.3s ease-in-out 0s;
222+
transform: translateX(0);
223+
224+
&.change {
225+
transform: translateX(-33.3333333%);
226+
}
227+
}
228+
229+
.area-item {
230+
width: 33.3333333%;
231+
height: 800rpx;
232+
}
233+
}
234+
</style>

‎pages/example/template.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ export default [
4040
path: 'address',
4141
icon: 'address',
4242
title: 'Address 收货地址',
43+
},{
44+
path: 'citySelect',
45+
icon: 'citySelect',
46+
title: 'citySelect 城市选择',
4347
}
4448
]
4549
}

0 commit comments

Comments
 (0)