需求: Collapse面板的数据是动态获取的,并且面板中的数据会有增删的操作,所以需要面板能自动适应内容的高度,避免出现高度不够内容显示不全,或多出一截空白的情况
思路: 通过ref获取面板,并调用uview提供的方法init()重新初始化内部高度计算
通过ref和init()重新初始化面板高度
通过ref获取Collapse面板,然后在数据改变时重新初始化面板高度,需要注意的是,vue3中使用ref获取元素的方法和nextTick的调用与vue2有所不同
<u-collapse
ref="collapse"
@open="getAcquirerAddress">
<u-collapse-item>
......
</u-collapse-item>
</u-collapse>
<script setup lang="ts">
import { ref,nextTick } from 'vue';
//获取Collapse面板,变量名要与ref值相同
const collapse = ref<any>(null);
//折叠面板高度自适应
const initCollapse = ()=>{
//在下一次页面刷新中重新初始化面板高度
nextTick (()=>{
collapse.value.init();
})
}
//获取地址列表
const getAcquirerAddress = ()=>{
acquirerApi.getAcquirerAddress().then((res:any)=>{
............
initCollapse();//获取数据并赋值后,重新计算面板高度
})
}
//点击标签,删除地址
const clickTab =(addressId:number,index:number)=>{
acquirerApi.deleteAddress(addressId).then((res:any)=>{
..........
initCollapse();//删除数据后,重新计算面板高度
})
}
</script>
解决重新计算高度后面板收缩问题
面板初始化后会自动收缩,体验不好,如下所示。
发现初始化后默认展开的面板不会收缩,而且现在的Collapse面板也只使用一个Collapse-item,那只要把这个item设置为默认展开就好了。但是第一次进到页面的时候不希望这个面板自动展开,所以添加一个变量collapseOpen,当用户点击面板展开时,就把这个面板设置为默认展开的,这样初始化后就不会收缩了。完整代码如下
<-- :value="['open']" 的意思是,当u-collapse-item的name为open时该item默认展开-->
<u-collapse
:value="['open']"
ref="collapse"
@open="getAcquirerAddress">
<u-collapse-item
:name="collapseOpen"
>
......
</u-collapse-item>
</u-collapse>
<script setup lang="ts">
import { ref,nextTick } from 'vue';
//获取Collapse面板,变量名要与ref值相同
const collapse = ref<any>(null);
//collapseOpen 的初始值不是"open",所以不会默认展开
const collapseOpen = ref("");
//折叠面板高度自适应
const initCollapse = ()=>{
//在下一次页面刷新中重新初始化面板高度
nextTick (()=>{
collapse.value.init();
})
}
//获取地址列表
const getAcquirerAddress = ()=>{
acquirerApi.getAcquirerAddress().then((res:any)=>{
............
//赋值为open,这样在重新计算面板高度后面板就不会收缩,问题解决
collapseOpen.value = "open";
initCollapse();//获取数据并赋值后,重新计算面板高度
})
}
//点击标签,删除地址
const clickTab =(addressId:number,index:number)=>{
acquirerApi.deleteAddress(addressId).then((res:any)=>{
..........
initCollapse();//删除数据后,重新计算面板高度
})
}
</script>
最终效果如下