docs(Field): use composition api

src/field/README.md

@@ -23,11 +23,12 @@ The value of field is bound with v-model.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 ```
@@ -45,14 +46,20 @@ Use `type` prop to custom different type fields.
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       tel: '',
       text: '',
       digit: '',
       number: '',
       password: '',
+    });
+
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -89,11 +96,17 @@ export default {
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '123',
+    });
+
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -155,18 +168,21 @@ Use `formatter` prop to format the input value.
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '',
+    });
+    const formatter = (value) => value.replace(/\d/g, '');
+
+    return {
+      ...toRefs(state),
+      formatter,
     };
   },
-  methods: {
-    formatter(value) {
-      return value.replace(/\d/g, '');
-    },
-  },
 };
 ```
 

src/field/README.zh-CN.md

@@ -28,11 +28,12 @@ app.use(Field);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 ```
@@ -55,14 +56,20 @@ export default {
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       tel: '',
       text: '',
       digit: '',
       number: '',
       password: '',
+    });
+
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -105,11 +112,17 @@ export default {
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '123',
+    });
+
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -177,19 +190,22 @@ export default {
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '',
+    });
+    // 过滤输入的数字
+    const formatter = (value) => value.replace(/\d/g, '');
+
+    return {
+      ...toRefs(state),
+      formatter,
     };
   },
-  methods: {
-    formatter(value) {
-      // 过滤输入的数字
-      return value.replace(/\d/g, '');
-    },
-  },
 };
 ```
 

src/field/demo/Autosize.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -26,10 +28,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 </script>

src/field/demo/BasicUsage.vue

@@ -11,6 +11,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -23,10 +25,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 </script>

src/field/demo/CustomType.vue

@@ -33,6 +33,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -62,13 +64,15 @@ export default {
   },
 
   data() {
-    return {
+    const state = reactive({
       text: '',
       phone: '',
       digit: '',
       number: '',
       password: '',
-    };
+    });
+
+    return toRefs(state);
   },
 };
 </script>

src/field/demo/ErrorInfo.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -35,10 +37,12 @@ export default {
   },
 
   data() {
-    return {
+    const state = reactive({
       phone: '123',
       username: '',
-    };
+    });
+
+    return toRefs(state);
   },
 };
 </script>

src/field/demo/FormatValue.vue

@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -33,17 +35,17 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '',
-    };
-  },
+    });
+    const formatter = (value) => value.replace(/\d/g, '');
 
-  methods: {
-    formatter(value) {
-      return value.replace(/\d/g, '');
-    },
+    return {
+      ...toRefs(state),
+      formatter,
+    };
   },
 };
 </script>

src/field/demo/InputAlign.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -24,10 +26,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 </script>

src/field/demo/InsertButton.vue

@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -33,10 +35,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      sms: '',
-    };
+  setup() {
+    const sms = ref('');
+    return { sms };
   },
 };
 </script>

src/field/demo/ShowIcon.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -32,11 +34,13 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       icon1: '',
       icon2: '123',
-    };
+    });
+
+    return toRefs(state);
   },
 };
 </script>

src/field/demo/ShowWordLimit.vue

@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -28,10 +30,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 </script>