alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch '2.x' into dev

Browse Source
This commit is contained in:
chenjiahan
2020-12-21 11:02:14 +08:00
parent 3027d7cd01 659ea9cf07
commit 8bbd944ece
28 changed files with 1373 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cascader/demo/area-en-US.js
+122
View File
@@ -0,0 +1,122 @@
export default [
{
text: 'Zhejiang',
value: '330000',
children: [
{
text: 'Hangzhou',
value: '330100',
children: [
{
text: 'Shangcheng',
value: '330102',
},
{
text: 'Xiacheng',
value: '330103',
},
{
text: 'Jianggan',
value: '330104',
},
],
},
{
text: 'Ningbo',
value: '330200',
children: [
{
text: 'Haishu',
value: '330203',
},
{
text: 'Jiangbei',
value: '330205',
},
{
text: 'Beilun',
value: '330206',
},
],
},
{
text: 'Wenzhou',
value: '330300',
children: [
{
text: 'Lucheng',
value: '330302',
},
{
text: 'Longwan',
value: '330303',
},
{
text: 'Ouhai',
value: '330304',
},
],
},
],
},
{
text: 'Jiangsu',
value: '320000',
children: [
{
text: 'Nanjing',
value: '320100',
children: [
{
text: 'Xuanwu',
value: '320102',
},
{
text: 'Qinghuai',
value: '320104',
},
{
text: 'Jianye',
value: '320105',
},
],
},
{
text: 'Wuxi',
value: '320200',
children: [
{
text: 'Xishan',
value: '320205',
},
{
text: 'Huishan',
value: '320206',
},
{
text: 'Binhu',
value: '320211',
},
],
},
{
text: 'Xuzhou',
value: '320300',
children: [
{
text: 'Gulou',
value: '320302',
},
{
text: 'Yunlong',
value: '320303',
},
{
text: 'Jiawang',
value: '320305',
},
],
},
],
},
];
src/cascader/demo/area-zh-CN.js
+122
View File
@@ -0,0 +1,122 @@
export default [
{
text: '浙江省',
value: '330000',
children: [
{
text: '杭州市',
value: '330100',
children: [
{
text: '上城区',
value: '330102',
},
{
text: '下城区',
value: '330103',
},
{
text: '江干区',
value: '330104',
},
],
},
{
text: '宁波市',
value: '330200',
children: [
{
text: '海曙区',
value: '330203',
},
{
text: '江北区',
value: '330205',
},
{
text: '北仑区',
value: '330206',
},
],
},
{
text: '温州市',
value: '330300',
children: [
{
text: '鹿城区',
value: '330302',
},
{
text: '龙湾区',
value: '330303',
},
{
text: '瓯海区',
value: '330304',
},
],
},
],
},
{
text: '江苏省',
value: '320000',
children: [
{
text: '南京市',
value: '320100',
children: [
{
text: '玄武区',
value: '320102',
},
{
text: '秦淮区',
value: '320104',
},
{
text: '建邺区',
value: '320105',
},
],
},
{
text: '无锡市',
value: '320200',
children: [
{
text: '锡山区',
value: '320205',
},
{
text: '惠山区',
value: '320206',
},
{
text: '滨湖区',
value: '320211',
},
],
},
{
text: '徐州市',
value: '320300',
children: [
{
text: '鼓楼区',
value: '320302',
},
{
text: '云龙区',
value: '320303',
},
{
text: '贾汪区',
value: '320305',
},
],
},
],
},
];
src/cascader/demo/index.vue
+158
View File
@@ -0,0 +1,158 @@
<template>
<demo-block card :title="t('basicUsage')">
<van-field
v-model="base.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="base.show = true"
/>
<van-popup v-model:show="base.show" round position="bottom">
<van-cascader
v-model="base.value"
:title="t('selectArea')"
:options="t('options')"
@close="base.show = false"
@finish="onFinish('base', $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customColor')">
<van-field
v-model="customColor.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customColor.show = true"
/>
<van-popup v-model:show="customColor.show" round position="bottom">
<van-cascader
v-model="customColor.value"
:title="t('selectArea')"
:options="t('options')"
active-color="#1989fa"
@close="customColor.show = false"
@finish="onFinish('customColor', $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('asyncOptions')">
<van-field
v-model="async.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="async.show = true"
/>
<van-popup v-model:show="async.show" round position="bottom">
<van-cascader
v-model="async.value"
:title="t('selectArea')"
:options="async.options"
@close="async.show = false"
@change="loadDynamicOptions"
@finish="onFinish('async', $event)"
/>
</van-popup>
</demo-block>
</template>
<script>
import zhCNOptions from './area-zh-CN';
import enUSOptions from './area-en-US';
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
area: '地区',
options: zhCNOptions,
selectArea: '请选择地区',
customColor: '自定义颜色',
asyncOptions: '异步加载选项',
asyncOptions1: [
{
text: '浙江省',
value: '330000',
children: [],
},
],
asyncOptions2: [
{ text: '杭州市', value: '330100' },
{ text: '宁波市', value: '330200' },
],
},
'en-US': {
area: 'Area',
options: enUSOptions,
selectArea: 'Select Area',
customColor: 'Custom Color',
asyncOptions: 'Async Options',
asyncOptions1: [
{
text: 'Zhejiang',
value: '330000',
children: [],
},
],
asyncOptions2: [
{ text: 'Hangzhou', value: '330100' },
{ text: 'Ningbo', value: '330200' },
],
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
base: {
show: false,
value: '',
result: '',
},
customColor: {
show: false,
value: null,
result: '',
},
async: {
show: false,
value: null,
result: '',
options: t('asyncOptions1'),
},
});
const loadDynamicOptions = ({ value }) => {
if (value === '330000') {
setTimeout(() => {
state.async.options[0].children = t('asyncOptions2');
}, 500);
}
};
const onFinish = (type, { value, selectedOptions }) => {
const result = selectedOptions.map((option) => option.text).join('/');
state[type] = {
...state[type],
show: false,
value,
result,
};
};
return {
...toRefs(state),
t,
onFinish,
loadDynamicOptions,
};
},
};
</script>