From b423259f4535768c701aed24fceeac2e7f9670ab Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 9 Dec 2020 14:06:36 +0800 Subject: [PATCH] docs(Field): use composition api --- src/field/README.md | 46 ++++++++++++++++++++---------- src/field/README.zh-CN.md | 48 +++++++++++++++++++++----------- src/field/demo/Autosize.vue | 9 +++--- src/field/demo/BasicUsage.vue | 9 +++--- src/field/demo/CustomType.vue | 8 ++++-- src/field/demo/ErrorInfo.vue | 8 ++++-- src/field/demo/FormatValue.vue | 18 ++++++------ src/field/demo/InputAlign.vue | 9 +++--- src/field/demo/InsertButton.vue | 9 +++--- src/field/demo/ShowIcon.vue | 10 +++++-- src/field/demo/ShowWordLimit.vue | 9 +++--- 11 files changed, 117 insertions(+), 66 deletions(-) diff --git a/src/field/README.md b/src/field/README.md index beab34f32..ecf5367e2 100644 --- a/src/field/README.md +++ b/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, ''); - }, - }, }; ``` diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index f8c47439b..900d7ebac 100644 --- a/src/field/README.zh-CN.md +++ b/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, ''); - }, - }, }; ``` diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue index 4c0f63513..fcc6b5dab 100644 --- a/src/field/demo/Autosize.vue +++ b/src/field/demo/Autosize.vue @@ -12,6 +12,8 @@ diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue index 8c805a6ce..92d168094 100644 --- a/src/field/demo/BasicUsage.vue +++ b/src/field/demo/BasicUsage.vue @@ -11,6 +11,8 @@ diff --git a/src/field/demo/CustomType.vue b/src/field/demo/CustomType.vue index 1c251a865..721a0a8a3 100644 --- a/src/field/demo/CustomType.vue +++ b/src/field/demo/CustomType.vue @@ -33,6 +33,8 @@ diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue index ff3703872..1c49b02ba 100644 --- a/src/field/demo/ErrorInfo.vue +++ b/src/field/demo/ErrorInfo.vue @@ -18,6 +18,8 @@ diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue index 20c10269f..7e09d267a 100644 --- a/src/field/demo/FormatValue.vue +++ b/src/field/demo/FormatValue.vue @@ -17,6 +17,8 @@ diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue index 9a8bd547d..d8d325e91 100644 --- a/src/field/demo/InputAlign.vue +++ b/src/field/demo/InputAlign.vue @@ -10,6 +10,8 @@ diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue index 1d1ba881a..07025068b 100644 --- a/src/field/demo/InsertButton.vue +++ b/src/field/demo/InsertButton.vue @@ -17,6 +17,8 @@ diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue index 03aafbf17..67940ea60 100644 --- a/src/field/demo/ShowIcon.vue +++ b/src/field/demo/ShowIcon.vue @@ -18,6 +18,8 @@ diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue index 44728e01e..e9a272b8b 100644 --- a/src/field/demo/ShowWordLimit.vue +++ b/src/field/demo/ShowWordLimit.vue @@ -14,6 +14,8 @@