docs(Collapse): add disabled demo (#7361)

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
+  <van-collapse-item title="Title3" name="3">Content</van-collapse-item>
-    >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

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

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: [],
     };
   },
 };

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