Commit 6c668f0c authored by wlxuqu's avatar wlxuqu

collapse组件新增init()重新初始化方法,用于异步渲染的场景

parent fa59035c
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
"easycom": { "easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}, },
// "condition": { //模式配置,仅开发期间生效 "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项) "current": 0, //当前激活的模式(list 的索引项)
// "list": [{ "list": [{
// "name": "test", //模式名称 "name": "test", //模式名称
// "path": "pages/componentsC/popup/index", //启动页面,必选 "path": "pages/componentsC/test/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到 "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
// }] }]
// }, },
"pages": [ "pages": [
// 演示-组件 // 演示-组件
{ {
......
<template> <template>
<u-upload :before-upload="beforeUpload"></u-upload> <view>
<u-checkbox-group @change="checkboxGroupChange1">
<view class="" v-for="(item, index) in list1" :key="index">
<image :src="item.image" mode=""></image>
<u-checkbox v-model="item.checked" :name="item.name">{{ item.name }}</u-checkbox>
</view>
</u-checkbox-group>
<view class="">-------------------------------------------------------------------------------------</view>
<u-checkbox-group @change="checkboxGroupChange2">
<view class="" v-for="(item, index) in list2" :key="index">
<image :src="addUrl(item.image)" mode=""></image>
<u-checkbox v-model="item.checked" :name="item.name">{{ item.name }}</u-checkbox>
</view>
</u-checkbox-group>
</view>
</template> </template>
<script> <script>
export default { export default {
methods: { data() {
beforeUpload(index, list) { return {
// 返回一个promise list1: [
return new Promise((resolve, reject) => { {
this.$u.post('http://www.tp5.com/index.php/index/index/hello').then(res => { name: 'item-1',
// resolve()之后,将会进入promise的组件内部的then回调,相当于返回true checked: false,
resolve(); image: 'https://qiniu.jieyoukj.cn/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
}).catch(err => { },
// reject()之后,将会进入promise的组件内部的catch回调,相当于返回false {
reject(); name: 'item-2',
}) checked: false,
}) image: 'https://qiniu.jieyoukj.cn/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
} }
],
list2: [
{
name: 'item-1',
checked: false,
image: '/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
},
{
name: 'item-2',
checked: false,
image: '/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
} }
]
};
},
methods: {
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange1(e) {
console.log(e);
},
checkboxGroupChange2(e) {
console.log(e);
},
addUrl(url) {
return 'https://qiniu.jieyoukj.cn' + url;
} }
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss"></style>
.wrap {
padding: 40rpx;
}
</style>
\ No newline at end of file
...@@ -94,9 +94,7 @@ ...@@ -94,9 +94,7 @@
}; };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.init();
this.queryRect();
});
}, },
watch: { watch: {
open(val) { open(val) {
...@@ -123,6 +121,12 @@ ...@@ -123,6 +121,12 @@
this.hoverClass = this.uCollapse.hoverClass; this.hoverClass = this.uCollapse.hoverClass;
}, },
methods: { methods: {
// 异步获取内容,或者动态修改了内容时,需要重新初始化
init() {
this.$nextTick(() => {
this.queryRect();
});
},
// 点击collapsehead头部 // 点击collapsehead头部
headClick() { headClick() {
if (this.disabled) return; if (this.disabled) return;
......
...@@ -77,6 +77,12 @@ ...@@ -77,6 +77,12 @@
} }
}, },
methods: { methods: {
// 重新初始化一次内部的所有子元素的高度计算,用于异步获取数据渲染的情况
init() {
this.childrens.forEach((vm, index) => {
vm.init();
})
},
// collapse item被点击,由collapse item调用父组件方法 // collapse item被点击,由collapse item调用父组件方法
onChange() { onChange() {
let activeItem = []; let activeItem = [];
......
<template> <template>
<view class="u-code-wrap"> <view class="u-code-wrap">
<!-- 此组件功能由js完成,无需写html逻辑 -->
</view> </view>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment