手机端的vantUI组件,van-collapse-item 在设置了isLink=false, readonly=true,并且没有设置内容的情况下依然可以展开。
想要的效果是没有内容就显示为列表的样式,有内容就显示为collapse的样式
直接修改style是没用的,因为官方就是通过修改style控制显示隐藏的,只能在class上下手:
样式:
<style lang="scss" scoped>
.hide_collapse_item {
::v-deep .van-collapse-item__wrapper {
display: none;
height: 0;
}
}
</style>
van-collapse-item__wrapper就是展开面板的类名,现在将hide_collapse_item给到面板的父节点就行了。由于需要判断当前的 van-collapse-item 需不需要展开,所以选择在watch里通过style控制。
watch: {
isExport: {
handler(val) {
this.$nextTick(() => {
if (!val) {
// 不能展开,隐藏展开面板
const parentDom = this.$refs.collapse.$el
parentDom.classList.add('hide_collapse_item')
} else {
const parentDom = this.$refs.collapse.$el
parentDom.classList.remove('hide_collapse_item')
}
})
},
immediate: true
}
},
因为我是将 van-collapse-item 单独做成组件了,所以这个样式只对当前的 van-collapse-item 生效,如果在 van-collapse-item 外面控制就需要遍历每一个item做一遍操作。