mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-06-05 01:48:10 +08:00
57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useTranslate } from '@demo/use-translate';
|
|
import { Toast } from '../../toast';
|
|
|
|
const i18n = {
|
|
'zh-CN': {
|
|
add: '新增',
|
|
edit: '编辑',
|
|
name: '张三',
|
|
addContact: '添加联系人',
|
|
editContact: '编辑联系人',
|
|
},
|
|
'en-US': {
|
|
add: 'Add',
|
|
edit: 'Edit',
|
|
name: 'John Snow',
|
|
addContact: 'Add Contact',
|
|
editContact: 'Edit Contact',
|
|
},
|
|
};
|
|
|
|
const t = useTranslate(i18n);
|
|
|
|
const currentContact = computed(() => ({
|
|
name: t('name'),
|
|
tel: '13000000000',
|
|
}));
|
|
|
|
const onAdd = () => Toast(t('add'));
|
|
const onEdit = () => Toast(t('edit'));
|
|
</script>
|
|
|
|
<template>
|
|
<demo-block :title="t('addContact')">
|
|
<van-contact-card type="add" @click="onAdd" />
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('editContact')">
|
|
<van-contact-card
|
|
type="edit"
|
|
:name="currentContact.name"
|
|
:tel="currentContact.tel"
|
|
@click="onEdit"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('uneditable')">
|
|
<van-contact-card
|
|
type="edit"
|
|
:name="currentContact.name"
|
|
:tel="currentContact.tel"
|
|
:editable="false"
|
|
/>
|
|
</demo-block>
|
|
</template>
|