docs(AddressList): use composition api

This commit is contained in:
chenjiahan 2020-12-13 12:34:50 +08:00
parent 7cf8637f7f
commit 1e79f28ae5
4 changed files with 159 additions and 140 deletions

View File

@ -74,6 +74,7 @@ export default {
};
return {
t,
onSave,
onDelete,
areaList,

View File

@ -27,44 +27,50 @@ app.use(AddressList);
```
```js
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
data() {
return {
chosenAddressId: '1',
list: [
{
id: '1',
name: 'John Snow',
tel: '13000000000',
address: 'Somewhere',
isDefault: true,
},
{
id: '2',
name: 'Ned Stark',
tel: '1310000000',
address: 'Somewhere',
},
],
disabledList: [
{
id: '3',
name: 'Tywin',
tel: '1320000000',
address: 'Somewhere',
},
],
};
},
methods: {
onAdd() {
setup() {
const chosenAddressId = ref('1');
const list = [
{
id: '1',
name: 'John Snow',
tel: '13000000000',
address: 'Somewhere',
isDefault: true,
},
{
id: '2',
name: 'Ned Stark',
tel: '1310000000',
address: 'Somewhere',
},
];
const disabledList = [
{
id: '3',
name: 'Tywin',
tel: '1320000000',
address: 'Somewhere',
},
];
const onAdd = () => {
Toast('Add');
},
onEdit(item, index) {
};
const onEdit = (item, index) => {
Toast('Edit:' + index);
},
};
return {
list,
onAdd,
onEdit,
disabledList,
chosenAddressId,
};
},
};
```

View File

@ -31,44 +31,50 @@ app.use(AddressList);
```
```js
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
data() {
return {
chosenAddressId: '1',
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true,
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号',
},
],
disabledList: [
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号',
},
],
};
},
methods: {
onAdd() {
setup() {
const chosenAddressId = ref('1');
const list = [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true,
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号',
},
];
const disabledList = [
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号',
},
];
const onAdd = () => {
Toast('新增地址');
},
onEdit(item, index) {
};
const onEdit = (item, index) => {
Toast('编辑地址:' + index);
},
};
return {
list,
onAdd,
onEdit,
disabledList,
chosenAddressId,
};
},
};
```

View File

@ -12,83 +12,89 @@
</demo-block>
</template>
<script>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
const i18n = {
'zh-CN': {
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true,
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号',
},
],
disabledList: [
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号',
},
],
add: '新增地址',
edit: '编辑地址',
disabledText: '以下地址超出配送范围',
defaultTagText: '默认',
},
'en-US': {
list: [
{
id: '1',
name: 'John Snow',
tel: '13000000000',
address: 'Somewhere',
isDefault: true,
},
{
id: '2',
name: 'Ned Stark',
tel: '1310000000',
address: 'Somewhere',
},
],
disabledList: [
{
id: '3',
name: 'Tywin',
tel: '1320000000',
address: 'Somewhere',
},
],
add: 'Add',
edit: 'Edit',
disabledText: 'The following address is out of range',
defaultTagText: 'Default',
},
};
export default {
i18n: {
'zh-CN': {
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true,
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号',
},
],
disabledList: [
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号',
},
],
add: '新增地址',
edit: '编辑地址',
disabledText: '以下地址超出配送范围',
defaultTagText: '默认',
},
'en-US': {
list: [
{
id: '1',
name: 'John Snow',
tel: '13000000000',
address: 'Somewhere',
isDefault: true,
},
{
id: '2',
name: 'Ned Stark',
tel: '1310000000',
address: 'Somewhere',
},
],
disabledList: [
{
id: '3',
name: 'Tywin',
tel: '1320000000',
address: 'Somewhere',
},
],
add: 'Add',
edit: 'Edit',
disabledText: 'The following address is out of range',
defaultTagText: 'Default',
},
},
data() {
return {
chosenAddressId: '1',
setup() {
const t = useTranslate(i18n);
const chosenAddressId = ref('1');
const onAdd = () => {
Toast(t('add'));
};
const onEdit = (item: unknown, index: number) => {
Toast(`${t('edit')}:${index}`);
};
},
methods: {
onAdd() {
this.$toast(this.t('add'));
},
onEdit(item, index) {
this.$toast(`${this.t('edit')}:${index}`);
},
return {
t,
onAdd,
onEdit,
chosenAddressId,
};
},
};
</script>