mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-23 15:09:16 +08:00
[improvement] Collapse: add disabled prop (#1892)
This commit is contained in:
neverland
GitHub
parent
45bee844d9
commit
ea129825f1
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
b({ expanded }),
|
||||
{ 'van-hairline--top': index }
|
||||
]"
|
||||
<div :class="[b(), { 'van-hairline--top': index }]">
|
||||
<cell
|
||||
v-bind="$props"
|
||||
:class="b('title', { disabled, expanded })"
|
||||
@click="onClick"
|
||||
>
|
||||
<cell :class="b('title')" @click="onClick" v-bind="$props">
|
||||
<slot name="title" slot="title" />
|
||||
<slot name="icon" slot="icon" />
|
||||
<slot name="value" />
|
||||
@ -35,6 +34,7 @@ export default create({
|
||||
label: String,
|
||||
title: [String, Number],
|
||||
value: [String, Number],
|
||||
disabled: Boolean,
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@ -116,6 +116,10 @@ export default create({
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { parent } = this;
|
||||
const name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
|
||||
const expanded = !this.expanded;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<van-collapse v-model="active1">
|
||||
<van-collapse-item :title="$t('title1')">{{ $t('content1') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title3')">{{ $t('content3') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title3')" disabled>{{ $t('content3') }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ Use `v-model` to control the name of active panels
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3" disabled>Content</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -90,6 +90,7 @@ export default {
|
||||
| value | Right text | `String | Number` | - |
|
||||
| label | Description below the title | `String` | - |
|
||||
| border | Whether to show inner border | `Boolean` | `true` |
|
||||
| disabled | Whether to disabled collapse | `Boolean` | `false` |
|
||||
| is-link | Whether to show link icon | `Boolean` | `true` |
|
||||
|
||||
### CollapseItem Slot
|
||||
|
||||
@ -4,8 +4,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-collapse">
|
||||
<div class="van-collapse-item van-collapse-item--expanded">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>有赞微商城</span>
|
||||
<!---->
|
||||
@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<div disabled="disabled" class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--disabled">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>有赞美业</span>
|
||||
<!---->
|
||||
@ -49,8 +49,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-collapse">
|
||||
<div class="van-collapse-item van-collapse-item--expanded">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>有赞微商城</span>
|
||||
<!---->
|
||||
|
||||
@ -20,7 +20,7 @@ Vue.use(Collapse).use(CollapseItem);
|
||||
<van-collapse-item title="有赞零售" name="2">
|
||||
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞美业" name="3">
|
||||
<van-collapse-item title="有赞美业" name="3" disabled>
|
||||
线上拓客，随时预约，贴心顺手的开单收银
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
@ -102,6 +102,7 @@ export default {
|
||||
| value | 标题栏右侧内容 | `String | Number` | - |
|
||||
| label | 标题栏描述信息 | `String` | - |
|
||||
| border | 是否显示内边框 | `Boolean` | `true` |
|
||||
| disabled | 是否禁用面板 | `Boolean` | `false` |
|
||||
| is-link | 标题栏是否展示右侧箭头并开启点击反馈 | `Boolean` | `true` |
|
||||
|
||||
### CollapseItem Slot
|
||||
|
||||
@ -10,6 +10,27 @@
|
||||
&::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
.van-cell__right-icon::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
&,
|
||||
& .van-cell__right-icon {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@ -20,18 +41,6 @@
|
||||
|
||||
&__content {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
.van-collapse-item__title {
|
||||
.van-cell__right-icon::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user