[improvement] Collapse: add disabled prop (#1892)

packages/collapse-item/index.vue

@@ -1,11 +1,10 @@
 <template>
-  <div
+  <div :class="[b(), { 'van-hairline--top': index }]">
-    :class="[
+    <cell
-      b({ expanded }),
+      v-bind="$props"
-      { 'van-hairline--top': index }
+      :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;

packages/collapse/demo/index.vue

@@ -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>
 

packages/collapse/en-US.md

@@ -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

packages/collapse/test/__snapshots__/demo.spec.js.snap

@@ -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-collapse-item">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+        <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-collapse-item">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+        <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>
             <!---->

packages/collapse/zh-CN.md

@@ -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

packages/vant-css/src/collapse.css

@@ -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;
+    background-color: $white;
-  }
-
-  &--expanded {
-    .van-collapse-item__title {
-      .van-cell__right-icon::before {
-        transform: rotate(-90deg);
-      }
-
-      &::after {
-        visibility: visible;
-      }
-    }
   }
 }