Vant - vue使用collapse组件的自定义折叠面板
vue使用collapse组件的自定义折叠面板
·
vue使用vatn 的 collapse组件自定义标题的折叠面板;点击跳转collapse
效果图如下:
第一张是收起状态,第二张是展开状态:
实现代码如下:
<template>
<div class="quote">
<div class="container">
<div class="content">
<p class="quoteNews">您当日的报价信息</p>
<!-- 使用vant收缩组件 -->
<van-collapse v-model="activeNames" v-for="(item, index) in quoteList" :key="index">
<van-collapse-item :name="index">
<!-- 自定义标题内容 -->
<template #title>
<div class="item">
<div class="left"><img src="./协同任务.png" alt="" /></div>
<div class="right">
<span class="name">{{ item.name }}:{{ item.id }}</span>
<span class="lately">{{ item.lately }}</span>
</div>
</div>
</template>
<!-- 展开部分的样式 -->
<div v-for="(value, ind) in item.children" :key="ind" class="children">
<span class="first"
>报价时间<span class="active quoteTime">{{ value.quoteTime }}</span></span
>
<div class="second">
<span class="left"
>交强险(元) <span class="active">{{ value.jiaoqianxian }}</span></span
>
<span class="right"
>商业险(元) <span class="active r10">{{ value.jiaoqianxian }}</span></span
>
</div>
<div class="third">
<span class="left"
>车加险(元) <span class="active">{{ value.chejiaxian }}</span></span
>
<span class="right"
>合计保费(元) <span class="active">{{ value.hejibaofei }}</span></span
>
</div>
<div class="more"><a>详情查询</a></div>
</div>
<div class="" v-if="!item.children || item.children.length <= 0">
<p :style="{ fontSize: '.3rem' }">暂无数据</p>
</div>
</van-collapse-item>
</van-collapse>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'quote',
data() {
return {
value: '',
activeNames: [''], // 默认展开的项 默认不展开
// 模拟数据
quoteList: [
{
name: '张三',
id: 'BDBB00002871',
lately: '苏KL446Y最近三次报价',
children: [
{
quoteTime: '17:35',
jiaoqianxian: '2000',
shangyexian: '20',
chejiaxian: '2000',
hejibaofei: '200000',
},
{
quoteTime: '20:35',
jiaoqianxian: '3000',
shangyexian: '20',
chejiaxian: '2000',
hejibaofei: '200000',
},
{
quoteTime: '22:35',
jiaoqianxian: '24000',
shangyexian: '20',
chejiaxian: '2000',
hejibaofei: '400000',
},
],
},
{
name: '李四',
id: 'BDBB00002871',
lately: '苏KL446Y最近三次报价',
children: [],
},
],
};
},
};
</script>
<style scoped lang="less">
.content {
padding: 0 10px;
// 覆盖折叠面板搜索组件原来的样式
/deep/ .van-collapse-item {
margin-bottom: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.van-cell {
padding: 0 0.42rem 0 0;
}
// 右侧箭头的位置
.van-cell__right-icon {
margin-top: 0.38rem;
}
// 内容区
.van-collapse-item__content {
padding: 10px;
}
}
}
.quoteNews {
text-align: left;
font-size: 0.32rem;
margin-top: 7px;
}
// 每一项
.item {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 0.3rem;
height: 1.4rem;
padding: 3px 0;
// 左侧
.left {
height: 100%;
line-height: 1.3rem;
border-right: 1.5px solid #ededed;
padding: 0 10px;
img {
display: inline-block;
vertical-align: middle;
width: 0.7rem;
}
}
// 右侧
.right {
display: flex;
flex-direction: column;
text-align: left;
margin-left: 10px;
.name {
max-width: 4.2rem;
color: #000;
}
.lately {
max-width: 4.2rem;
font-size: 0.27rem;
color: #777;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
// 展开的内容
.children {
text-align: left;
border-bottom: 1px solid #f2f2f2;
span {
font-size: 0.28rem;
color: #000;
}
.second,
.third {
display: flex;
margin-top: 3px;
.left,
.right {
min-width: 50%;
}
}
.active {
color: #f52a7c;
}
.quoteTime {
margin-left: 0.6rem;
}
.r10 {
margin-left: 10px;
}
.more {
overflow: hidden;
a {
float: right;
font-size: 0.2rem;
margin: 8px 0;
color: #6784fe;
text-decoration: underline; // 字体设置下划线
}
}
}
</style>
更多推荐
已为社区贡献16条内容
所有评论(0)