Skip to content

Commit 6c668f0

Browse files
wlxuquwlxuqu
committed
collapse组件新增init()重新初始化方法，用于异步渲染的场景
1 parent fa59035 commit 6c668f0

File tree

5 files changed

+79
-32
lines changed

5 files changed

+79
-32
lines changed

‎pages.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
"easycom": {
33
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
44
},
5-
// "condition": { //模式配置，仅开发期间生效
6-
// "current": 0, //当前激活的模式(list 的索引项)
7-
// "list": [{
8-
// "name": "test", //模式名称
9-
// "path": "pages/componentsC/popup/index", //启动页面，必选
10-
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11-
// }]
12-
// },
5+
"condition": { //模式配置，仅开发期间生效
6+
"current": 0, //当前激活的模式(list 的索引项)
7+
"list": [{
8+
"name": "test", //模式名称
9+
"path": "pages/componentsC/test/index", //启动页面，必选
10+
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11+
}]
12+
},
1313
"pages": [
1414
// 演示-组件
1515
{

‎pages/componentsC/test/index.vue

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,65 @@
11
<template>
2-
<u-upload :before-upload="beforeUpload"></u-upload>
2+
<view>
3+
<u-checkbox-group @change="checkboxGroupChange1">
4+
<view class="" v-for="(item, index) in list1" :key="index">
5+
<image :src="item.image" mode=""></image>
6+
<u-checkbox v-model="item.checked" :name="item.name">{{ item.name }}</u-checkbox>
7+
</view>
8+
</u-checkbox-group>
9+
<view class="">-------------------------------------------------------------------------------------</view>
10+
<u-checkbox-group @change="checkboxGroupChange2">
11+
<view class="" v-for="(item, index) in list2" :key="index">
12+
<image :src="addUrl(item.image)" mode=""></image>
13+
<u-checkbox v-model="item.checked" :name="item.name">{{ item.name }}</u-checkbox>
14+
</view>
15+
</u-checkbox-group>
16+
</view>
317
</template>
418

519
<script>
6-
export default {
7-
methods: {
8-
beforeUpload(index, list) {
9-
// 返回一个promise
10-
return new Promise((resolve, reject) => {
11-
this.$u.post('http://www.tp5.com/index.php/index/index/hello').then(res => {
12-
// resolve()之后，将会进入promise的组件内部的then回调，相当于返回true
13-
resolve();
14-
}).catch(err => {
15-
// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false
16-
reject();
17-
})
18-
})
19-
}
20+
export default {
21+
data() {
22+
return {
23+
list1: [
24+
{
25+
name: 'item-1',
26+
checked: false,
27+
image: 'https://qiniu.jieyoukj.cn/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
28+
},
29+
{
30+
name: 'item-2',
31+
checked: false,
32+
image: 'https://qiniu.jieyoukj.cn/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
33+
}
34+
],
35+
list2: [
36+
{
37+
name: 'item-1',
38+
checked: false,
39+
image: '/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
40+
},
41+
{
42+
name: 'item-2',
43+
checked: false,
44+
image: '/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
45+
}
46+
]
47+
};
48+
},
49+
methods: {
50+
// 选中任一checkbox时，由checkbox-group触发
51+
checkboxGroupChange1(e) {
52+
console.log(e);
53+
},
54+
checkboxGroupChange2(e) {
55+
console.log(e);
56+
},
57+
58+
addUrl(url) {
59+
return 'https://qiniu.jieyoukj.cn' + url;
2060
}
2161
}
62+
};
2263
</script>
2364

24-
<style lang="scss" scoped>
25-
.wrap {
26-
padding: 40rpx;
27-
}
28-
</style>
65+
<style lang="scss"></style>

‎uview-ui/components/u-collapse-item/u-collapse-item.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,7 @@
9494
};
9595
},
9696
mounted() {
97-
this.$nextTick(() => {
98-
this.queryRect();
99-
});
97+
this.init();
10098
},
10199
watch: {
102100
open(val) {
@@ -123,6 +121,12 @@
123121
this.hoverClass = this.uCollapse.hoverClass;
124122
},
125123
methods: {
124+
// 异步获取内容，或者动态修改了内容时，需要重新初始化
125+
init() {
126+
this.$nextTick(() => {
127+
this.queryRect();
128+
});
129+
},
126130
// 点击collapsehead头部
127131
headClick() {
128132
if (this.disabled) return;

‎uview-ui/components/u-collapse/u-collapse.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@
7777
}
7878
},
7979
methods: {
80+
// 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
81+
init() {
82+
this.childrens.forEach((vm, index) => {
83+
vm.init();
84+
})
85+
},
8086
// collapse item被点击，由collapse item调用父组件方法
8187
onChange() {
8288
let activeItem = [];

‎uview-ui/components/u-verification-code/u-verification-code.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<view class="u-code-wrap">
3-
3+
<!-- 此组件功能由js完成，无需写html逻辑 -->
44
</view>
55
</template>
66

0 commit comments

Comments
 (0)