From 784165d88cb5456541de2675ef6eb8a549bec6c8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 20 Oct 2020 09:31:03 +0800
Subject: [PATCH] docs(Collapse): add disabled demo (#7361)

---
 src/collapse/README.md                        | 20 +++++++++++++---
 src/collapse/README.zh-CN.md                  | 16 ++++++++++++-
 src/collapse/demo/index.vue                   | 19 +++++++++++++--
 .../test/__snapshots__/demo.spec.js.snap      | 24 ++++++++++++++++++-
 4 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/src/collapse/README.md b/src/collapse/README.md
index 82b50d63c..5bbfe7241 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -20,9 +20,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" disabled
-    >Content</van-collapse-item
-  >
+  <van-collapse-item title="Title3" name="3">Content</van-collapse-item>
 </van-collapse>
 ```
 
@@ -58,6 +56,22 @@ export default {
 };
 ```
 
+### Disabled
+
+Use the `disabled` prop to disable CollaseItem.
+
+```html
+<van-collapse v-model="activeNames">
+  <van-collapse-item title="Title1" name="1">Content</van-collapse-item>
+  <van-collapse-item title="Title2" name="2" disabled>
+    Content
+  </van-collapse-item>
+  <van-collapse-item title="Title3" name="3" disabled>
+    Content
+  </van-collapse-item>
+</van-collapse>
+```
+
 ### Custom title
 
 ```html
diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md
index 81c71d65e..a74043f65 100644
--- a/src/collapse/README.zh-CN.md
+++ b/src/collapse/README.zh-CN.md
@@ -24,7 +24,7 @@ Vue.use(CollapseItem);
 <van-collapse v-model="activeNames">
   <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
   <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
-  <van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
+  <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
 </van-collapse>
 ```
 
@@ -60,8 +60,22 @@ export default {
 };
 ```
 
+### 禁用状态
+
+通过 `disabled` 属性来禁用单个面板。
+
+```html
+<van-collapse v-model="activeNames">
+  <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
+  <van-collapse-item title="标题2" name="2" disabled>内容</van-collapse-item>
+  <van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
+</van-collapse>
+```
+
 ### 自定义标题内容
 
+通过 `title` 插槽可以自定义标题栏的内容。
+
 ```html
 <van-collapse v-model="activeNames">
   <van-collapse-item name="1">
diff --git a/src/collapse/demo/index.vue b/src/collapse/demo/index.vue
index fa3a4aa06..ba437398b 100644
--- a/src/collapse/demo/index.vue
+++ b/src/collapse/demo/index.vue
@@ -8,7 +8,7 @@
         <van-collapse-item :title="t('title') + 2">
           {{ t('text') }}
         </van-collapse-item>
-        <van-collapse-item :title="t('title') + 3" disabled>
+        <van-collapse-item :title="t('title') + 3">
           {{ t('text') }}
         </van-collapse-item>
       </van-collapse>
@@ -28,8 +28,22 @@
       </van-collapse>
     </demo-block>
 
-    <demo-block :title="t('titleSlot')">
+    <demo-block :title="t('disabled')">
       <van-collapse v-model="active3">
+        <van-collapse-item :title="t('title') + 1">
+          {{ t('text') }}
+        </van-collapse-item>
+        <van-collapse-item :title="t('title') + 2" disabled>
+          {{ t('text') }}
+        </van-collapse-item>
+        <van-collapse-item :title="t('title') + 3" disabled>
+          {{ t('text') }}
+        </van-collapse-item>
+      </van-collapse>
+    </demo-block>
+
+    <demo-block :title="t('titleSlot')">
+      <van-collapse v-model="active4">
         <van-collapse-item>
           <template #title>
             {{ t('title') + 1 }}<van-icon name="question-o" />
@@ -68,6 +82,7 @@ export default {
       active1: [0],
       active2: 0,
       active3: [],
+      active4: [],
     };
   },
 };
diff --git a/src/collapse/test/__snapshots__/demo.spec.js.snap b/src/collapse/test/__snapshots__/demo.spec.js.snap
index 8075466e2..7cf23c149 100644
--- a/src/collapse/test/__snapshots__/demo.spec.js.snap
+++ b/src/collapse/test/__snapshots__/demo.spec.js.snap
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
@@ -56,6 +56,28 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-collapse van-hairline--top-bottom">
+      <div class="van-collapse-item">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
+          <div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+            <!----></i>
+        </div>
+      </div>
+      <div class="van-collapse-item van-collapse-item--border">
+        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
+          <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+            <!----></i>
+        </div>
+      </div>
+      <div class="van-collapse-item van-collapse-item--border">
+        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
+          <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+            <!----></i>
+        </div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-collapse van-hairline--top-bottom">
       <div class="van-collapse-item">