docs(Sidebar): use composition api

src/card/test/__snapshots__/demo.spec.js.snap

@@ -137,12 +137,12 @@ exports[`should render demo and match snapshot 1`] = `
           <div>
             <transition-stub style="margin-right: 5px;">
               <span class="van-tag van-tag--plain van-tag--danger">
-                标签
+                Tag
               </span>
             </transition-stub>
             <transition-stub>
               <span class="van-tag van-tag--plain van-tag--danger">
-                标签
+                Tag
               </span>
             </transition-stub>
           </div>

src/sidebar/README.md

@@ -16,7 +16,7 @@ app.use(SidebarItem);
 ### Basic Usage
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="Title" />
   <van-sidebar-item title="Title" />
   <van-sidebar-item title="Title" />
@@ -24,11 +24,12 @@ app.use(SidebarItem);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const active = ref(0);
-      activeKey: 0,
+    return { active };
-    };
   },
 };
 ```
@@ -36,17 +37,17 @@ export default {
 ### Show Badge
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="Title" dot />
   <van-sidebar-item title="Title" badge="5" />
-  <van-sidebar-item title="Title" badge="99+" />
+  <van-sidebar-item title="Title" badge="20" />
 </van-sidebar>
 ```
 
 ### Disabled
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="Title" />
   <van-sidebar-item title="Title" disabled />
   <van-sidebar-item title="Title" />
@@ -56,7 +57,7 @@ export default {
 ### Change Event
 
 ```html
-<van-sidebar v-model="activeKey" @change="onChange">
+<van-sidebar v-model="active" @change="onChange">
   <van-sidebar-item title="Title 1" />
   <van-sidebar-item title="Title 2" />
   <van-sidebar-item title="Title 3" />
@@ -64,18 +65,20 @@ export default {
 ```
 
 ```js
-import { Notify } from 'vant';
+import { ref } from 'vue';
+import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const active = ref(0);
-      activeKey: 0,
+    const onChange = (index) => {
+      Toast(`Title ${index + 1}`);
+    };
+
+    return {
+      active,
+      onChange,
     };
-  },
-  methods: {
-    onChange(index) {
-      Notify({ type: 'primary', message: index });
-    },
   },
 };
 ```

src/sidebar/README.zh-CN.md

@@ -18,7 +18,7 @@ app.use(SidebarItem);
 通过 `v-model` 绑定当前选中项的索引。
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" />
@@ -26,11 +26,12 @@ app.use(SidebarItem);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const active = ref(0);
-      activeKey: 0,
+    return { active };
-    };
   },
 };
 ```
@@ -40,10 +41,10 @@ export default {
 设置 `dot` 属性后，会在右上角展示一个小红点；设置 `badge` 属性后，会在右上角展示相应的徽标。
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="标签名称" dot />
   <van-sidebar-item title="标签名称" badge="5" />
-  <van-sidebar-item title="标签名称" badge="99+" />
+  <van-sidebar-item title="标签名称" badge="20" />
 </van-sidebar>
 ```
 
@@ -52,7 +53,7 @@ export default {
 通过 `disabled` 属性禁用选项。
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" disabled />
   <van-sidebar-item title="标签名称" />
@@ -64,7 +65,7 @@ export default {
 设置 `change` 方法来监听切换导航项时的事件。
 
 ```html
-<van-sidebar v-model="activeKey" @change="onChange">
+<van-sidebar v-model="active" @change="onChange">
   <van-sidebar-item title="标签名 1" />
   <van-sidebar-item title="标签名 2" />
   <van-sidebar-item title="标签名 3" />
@@ -72,18 +73,20 @@ export default {
 ```
 
 ```js
-import { Notify } from 'vant';
+import { ref } from 'vue';
+import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const active = ref(0);
-      activeKey: 0,
+    const onChange = (index) => {
+      Toast(`标签名 ${index + 1}`);
+    };
+
+    return {
+      active,
+      onChange,
     };
-  },
-  methods: {
-    onChange(index) {
-      Notify({ type: 'primary', message: index });
-    },
   },
 };
 ```

src/sidebar/demo/index.vue

@@ -2,7 +2,7 @@
   <van-grid :column-num="2" :border="false">
     <van-grid-item>
       <h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
-      <van-sidebar v-model="activeKey1">
+      <van-sidebar v-model="active1">
         <van-sidebar-item :title="t('title')" />
         <van-sidebar-item :title="t('title')" />
         <van-sidebar-item :title="t('title')" />
@@ -11,16 +11,16 @@
 
     <van-grid-item>
       <h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
-      <van-sidebar v-model="activeKey2">
+      <van-sidebar v-model="active2">
         <van-sidebar-item :title="t('title')" dot />
         <van-sidebar-item :title="t('title')" badge="5" />
-        <van-sidebar-item :title="t('title')" badge="99+" />
+        <van-sidebar-item :title="t('title')" badge="20" />
       </van-sidebar>
     </van-grid-item>
 
     <van-grid-item>
       <h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
-      <van-sidebar v-model="activeKey3">
+      <van-sidebar v-model="active3">
         <van-sidebar-item :title="t('title')" />
         <van-sidebar-item :title="t('title')" disabled />
         <van-sidebar-item :title="t('title')" />
@@ -29,49 +29,53 @@
 
     <van-grid-item>
       <h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
-      <van-sidebar v-model="activeKey4" @change="onChange">
+      <van-sidebar v-model="active4" @change="onChange">
-        <van-sidebar-item :title="t('title') + 1" />
+        <van-sidebar-item :title="`${t('title')} 1`" />
-        <van-sidebar-item :title="t('title') + 2" />
+        <van-sidebar-item :title="`${t('title')} 2`" />
-        <van-sidebar-item :title="t('title') + 3" />
+        <van-sidebar-item :title="`${t('title')} 3`" />
       </van-sidebar>
     </van-grid-item>
   </van-grid>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { reactive, toRefs } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
+
+const i18n = {
   'zh-CN': {
     title: '标签名',
-      showBadge: '徽标提示',
     disabled: '禁用选项',
+    showBadge: '徽标提示',
     changeEvent: '监听切换事件',
-      selectTip: '你切换到了',
   },
   'en-US': {
-      showBadge: 'Show Badge',
     disabled: 'Disabled',
+    showBadge: 'Show Badge',
     changeEvent: 'Change Event',
-      selectTip: 'You select ',
   },
-  },
-
-  data() {
-    return {
-      activeKey1: 0,
-      activeKey2: 0,
-      activeKey3: 0,
-      activeKey4: 0,
 };
-  },
 
-  methods: {
+export default {
-    onChange(index) {
+  setup() {
-      this.$notify({
+    const t = useTranslate(i18n);
-        type: 'primary',
+    const state = reactive({
-        message: `${this.t('selectTip')} ${this.t('title')}${index + 1}`,
+      active1: 0,
+      active2: 0,
+      active3: 0,
+      active4: 0,
     });
-    },
+
+    const onChange = (index: number) => {
+      Toast(`${t('title')} ${index + 1}`);
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onChange,
+    };
   },
 };
 </script>

src/sidebar/test/__snapshots__/demo.spec.js.snap

@@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
             <div class="van-badge van-badge--fixed">
-              99+
+              20
             </div>
           </div>
         </a>