Collapse, CollapseItem
组件van-collapse-item
折叠面板进行判断,如果有内容显示箭头可点击,否则箭头不显示!
具体实现代码如下:
<template>
<van-collapse v-model="activeNames">
<van-collapse-item
v-for="(item, index) in items"
:key="index"
:title="item.title"
:name="`item-${index}`"
:clickable="item.hasContent"
>
<div v-if="item.hasContent">
<!-- 内容区域 -->
{{ item.content }}
</div>
<!-- 使用 slot 自定义标题,包括箭头 -->
<template #title>
<div class="custom-title">
{{ item.title }}
<van-icon
v-if="item.hasContent"
class="arrow"
name="arrow-right"
/>
</div>
</template>
</van-collapse-item>
</van-collapse>
</template>
<script>
export default {
data() {
return {
activeNames: [], // 控制折叠面板的展开和收起
items: [
{ title: '标题1', content: '内容1', hasContent: true },
{ title: '标题2', content: '', hasContent: false }, // 没有内容
// ... 其他条目
],
};
},
};
</script>
<style scoped>
.custom-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.arrow {
// 箭头的样式
}
</style>
以上是编程学习网小编为您介绍的“van-collapse-item折叠面板判断,有内容显示箭头可点击”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:van-collapse-item折叠面板判断,有内容显示箭头可点击
基础教程推荐
猜你喜欢
- vscode 安装代码实时预览到浏览器插件 2022-10-29
- Firefox返回时Iframe的显示Bug的解决方法 2024-04-23
- 基于Vue制作组织架构树组件 2024-04-08
- 通过Ajax请求动态填充页面数据的实例 2023-02-23
- web初始:html记忆 2023-10-29
- VUE跨域代理配置 2023-10-08
- Vue导出word+echarts,pdf 2023-10-08
- 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一) 2023-10-08
- el-table(Sortable)简单实现拖动排序(亲测有效) 2024-12-10
- elementUI禁掉当前月之后的月份 2024-12-09