From 9af0840f36f93d9f0a5dee416e3cf14548068b16 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 8 Dec 2020 20:54:06 +0800
Subject: [PATCH] docs(Slider): use composition api

---
 src/slider/README.md       | 56 ++++++++++++++++++++------------------
 src/slider/README.zh-CN.md | 56 ++++++++++++++++++++------------------
 src/slider/demo/index.vue  | 24 ++++++++++------
 3 files changed, 76 insertions(+), 60 deletions(-)

diff --git a/src/slider/README.md b/src/slider/README.md
index ca37bd44b..234d94b30 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -19,18 +19,19 @@ app.use(Slider);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      value: 50,
+  setup() {
+    const value = ref(50);
+    const onChange = (value) => {
+      Toast('Current value: ' + value);
+    };
+    return {
+      value,
+      onChange,
     };
-  },
-  methods: {
-    onChange(value) {
-      Toast('Current value：' + value);
-    },
   },
 };
 ```
@@ -44,19 +45,20 @@ Add `range` attribute to open dual thumb mode.
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      // value must be an Array
-      value: [10, 50],
+  setup() {
+    // value must be an Array
+    const value = ref([10, 50]);
+    const onChange = (value) => {
+      Toast('Current value: ' + value);
+    };
+    return {
+      value,
+      onChange,
     };
-  },
-  methods: {
-    onChange(value) {
-      Toast('current value：' + value);
-    },
   },
 };
 ```
@@ -123,19 +125,21 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      value: 50,
-      value2: [10, 50],
+  setup() {
+    const value = ref(50);
+    const value2 = ref([10, 50]);
+    const onChange = (value) => {
+      Toast('Current value: ' + value);
+    };
+    return {
+      value,
+      value2,
+      onChange,
     };
-  },
-  methods: {
-    onChange(value) {
-      Toast('Current value：' + value);
-    },
   },
 };
 ```
diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md
index 0f4a6bddc..a8ba89029 100644
--- a/src/slider/README.zh-CN.md
+++ b/src/slider/README.zh-CN.md
@@ -23,18 +23,19 @@ app.use(Slider);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      value: 50,
-    };
-  },
-  methods: {
-    onChange(value) {
+  setup() {
+    const value = ref(50);
+    const onChange = (value) => {
       Toast('当前值：' + value);
-    },
+    };
+    return {
+      value,
+      onChange,
+    };
   },
 };
 ```
@@ -48,19 +49,20 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      // 双滑块模式时，值必须是数组
-      value: [10, 50],
-    };
-  },
-  methods: {
-    onChange(value) {
+  setup() {
+    // 双滑块模式时，值必须是数组
+    const value = ref([10, 50]);
+    const onChange = (value) => {
       Toast('当前值：' + value);
-    },
+    };
+    return {
+      value,
+      onChange,
+    };
   },
 };
 ```
@@ -129,19 +131,21 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      value: 50,
-      value2: [10, 50],
-    };
-  },
-  methods: {
-    onChange(value) {
+  setup() {
+    const value = ref(50);
+    const value2 = ref([10, 50]);
+    const onChange = (value) => {
       Toast('当前值：' + value);
-    },
+    };
+    return {
+      value,
+      value2,
+      onChange,
+    };
   },
 };
 ```
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index 78d5a240e..f6f9723f2 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -51,6 +51,10 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '../../composables/use-translate';
+import Toast from '../../toast';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -77,8 +81,9 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const t = useTranslate();
+    const state = reactive({
       value1: 50,
       value2: [20, 60],
       value3: 0,
@@ -88,13 +93,16 @@ export default {
       value7: 50,
       value8: 50,
       value9: [20, 60],
-    };
-  },
+    });
 
-  methods: {
-    onChange(value) {
-      this.$toast(this.t('text') + value);
-    },
+    const onChange = (value) => {
+      Toast(t('text') + value);
+    };
+
+    return {
+      ...toRefs(state),
+      onChange,
+    };
   },
 };
 </script>