docs(Rate): use composition api

This commit is contained in:
chenjiahan 2020-12-06 16:58:05 +08:00
parent dea44580df
commit e5df5d734e
3 changed files with 59 additions and 31 deletions

View File

@ -19,11 +19,12 @@ app.use(Rate);
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const value = ref(3);
value: 3, return { value };
};
}, },
}; };
``` ```
@ -53,11 +54,12 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const value = ref(2.5);
value: 2.5, return { value };
};
}, },
}; };
``` ```
@ -87,11 +89,19 @@ export default {
``` ```
```javascript ```javascript
import { ref } from 'vue';
import { Toast } from 'vant';
export default { export default {
method: { setup() {
onChange(value) { const value = ref(3);
const onChange = (value) => {
Toast('current value:' + value); Toast('current value:' + value);
}, };
return {
value,
onChange,
};
}, },
}; };
``` ```

View File

@ -23,11 +23,12 @@ app.use(Rate);
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const value = ref(3);
value: 3, return { value };
};
}, },
}; };
``` ```
@ -57,11 +58,12 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const value = ref(2.5);
value: 2.5, return { value };
};
}, },
}; };
``` ```
@ -91,11 +93,19 @@ export default {
``` ```
```javascript ```javascript
import { ref } from 'vue';
import { Toast } from 'vant';
export default { export default {
method: { setup() {
onChange(value) { const value = ref(3);
const onChange = (value) => {
Toast('当前值:' + value); Toast('当前值:' + value);
}, };
return {
value,
onChange,
};
}, },
}; };
``` ```

View File

@ -45,6 +45,10 @@
</template> </template>
<script> <script>
import { toRefs, reactive } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import Toast from '../../toast';
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
@ -69,8 +73,9 @@ export default {
}, },
}, },
data() { setup() {
return { const t = useTranslate();
const state = reactive({
value1: 3, value1: 3,
value2: 3, value2: 3,
value3: 3, value3: 3,
@ -78,14 +83,17 @@ export default {
value5: 4, value5: 4,
value6: 3, value6: 3,
value7: 2, value7: 2,
}; });
},
methods: { const onChange = (value) => {
onChange(value) { Toast(t('toastContent', value));
this.value7 = value; };
this.$toast(this.t('toastContent', value));
}, return {
...toRefs(state),
t,
onChange,
};
}, },
}; };
</script> </script>