docs(ContactEdit): use composition api

This commit is contained in:
chenjiahan 2020-12-13 14:23:36 +08:00
parent 4d888702de
commit 03e65d9427
3 changed files with 54 additions and 40 deletions

View File

@ -26,21 +26,24 @@ app.use(ContactEdit);
``` ```
```js ```js
import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
data() { setup() {
return { const editingContact = ref({});
editingContact: {}, const onSave = (contactInfo) => {
};
},
methods: {
onSave(contactInfo) {
Toast('Save'); Toast('Save');
}, };
onDelete(contactInfo) { const onDelete = (contactInfo) => {
Toast('Delete'); Toast('Delete');
}, };
return {
onSave,
onDelete,
editingContact,
};
}, },
}; };
``` ```

View File

@ -30,21 +30,24 @@ app.use(ContactEdit);
``` ```
```js ```js
import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
data() { setup() {
return { const editingContact = ref({});
editingContact: {}, const onSave = (contactInfo) => {
};
},
methods: {
onSave(contactInfo) {
Toast('保存'); Toast('保存');
}, };
onDelete(contactInfo) { const onDelete = (contactInfo) => {
Toast('删除'); Toast('删除');
}, };
return {
onSave,
onDelete,
editingContact,
};
}, },
}; };
``` ```

View File

@ -11,30 +11,38 @@
</demo-block> </demo-block>
</template> </template>
<script> <script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
const i18n = {
'zh-CN': {
defaultLabel: '设为默认联系人',
},
'en-US': {
defaultLabel: 'Set as the default contact',
},
};
export default { export default {
i18n: { setup() {
'zh-CN': { const t = useTranslate(i18n);
defaultLabel: '设为默认联系人', const editingContact = ref({});
},
'en-US': {
defaultLabel: 'Set as the default contact',
},
},
data() { const onSave = () => {
return { Toast(t('save'));
editingContact: {}, };
const onDelete = () => {
Toast(t('delete'));
}; };
},
methods: { return {
onSave() { t,
this.$toast(this.t('save')); onSave,
}, onDelete,
onDelete() { editingContact,
this.$toast(this.t('delete')); };
},
}, },
}; };
</script> </script>