blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 22:49:15 +08:00
Code Issues Projects Releases Wiki Activity

docs(Picker): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-13 19:50:27 +08:00
parent e787fe731e
commit a33f06bb9d
3 changed files with 341 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
src/picker/README.md
View File

@ -32,21 +32,25 @@ app.use(Picker);
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
data() { setup() {
return { const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
const onConfirm = (value, index) => {
Toast(`Value: ${value}, Index: ${index}`);
}; };
}, const onChange = (value, index) => {
methods: {
onConfirm(value, index) {
Toast(`Value: ${value}, Index: ${index}`); Toast(`Value: ${value}, Index: ${index}`);
}, };
onChange(value, index) { const onCancel = () => {
Toast(`Value: ${value}, Index: ${index}`);
},
onCancel() {
Toast('Cancel'); Toast('Cancel');
}, };
return {
columns,
onChange,
onCancel,
onConfirm,
};
}, },
}; };
``` ```
@ -65,19 +69,19 @@ export default {
```js ```js
export default { export default {
data() { setup() {
return { const columns = [
columns: [ {
{ values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'], defaultIndex: 2,
defaultIndex: 2, },
}, {
{ values: ['Morging', 'Afternoon', 'Evening'],
values: ['Morging', 'Afternoon', 'Evening'], defaultIndex: 1,
defaultIndex: 1, },
}, ];
],
}; return { columns };
}, },
}; };
``` ```
@ -90,37 +94,37 @@ export default {
```js ```js
export default { export default {
data() { setup() {
return { const columns = [
columns: [ {
{ text: 'Zhejiang',
text: 'Zhejiang', children: [
children: [ {
{ text: 'Hangzhou',
text: 'Hangzhou', children: [{ text: 'Xihu' }, { text: 'Yuhang' }],
children: [{ text: 'Xihu' }, { text: 'Yuhang' }], },
}, {
{ text: 'Wenzhou',
text: 'Wenzhou', children: [{ text: 'Lucheng' }, { text: 'Ouhai' }],
children: [{ text: 'Lucheng' }, { text: 'Ouhai' }], },
}, ],
], },
}, {
{ text: 'Fujian',
text: 'Fujian', children: [
children: [ {
{ text: 'Fuzhou',
text: 'Fuzhou', children: [{ text: 'Gulou' }, { text: 'Taijiang' }],
children: [{ text: 'Gulou' }, { text: 'Taijiang' }], },
}, {
{ text: 'Xiamen',
text: 'Xiamen', children: [{ text: 'Siming' }, { text: 'Haicang' }],
children: [{ text: 'Siming' }, { text: 'Haicang' }], },
}, ],
], },
}, ];
],
}; return { columns };
}, },
}; };
``` ```
@ -133,14 +137,14 @@ export default {
```js ```js
export default { export default {
data() { setup() {
return { const columns = [
columns: [ { text: 'Delaware', disabled: true },
{ text: 'Delaware', disabled: true }, { text: 'Florida' },
{ text: 'Florida' }, { text: 'Georqia' },
{ text: 'Georqia' }, ];
],
}; return { columns };
}, },
}; };
``` ```
@ -152,21 +156,30 @@ export default {
``` ```
```js ```js
const states = { import { ref } from 'vue';
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
};
export default { export default {
data() { setup() {
return { const picker = ref(null);
columns: [{ values: Object.keys(states) }, { values: states.Group1 }],
const states = {
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
};
const columns = [
{ values: Object.keys(states) },
{ values: states.Group1 },
];
const onChange = (values) => {
picker.value.setColumnValues(1, states[values[0]]);
};
return {
picker,
columns,
onChange,
}; };
},
methods: {
onChange(values) {
this.$refs.picker.setColumnValues(1, states[values[0]]);
},
}, },
}; };
``` ```
@ -180,18 +193,21 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
columns: [], columns: [],
loading: true, loading: true,
}; });
},
created() {
setTimeout(() => { setTimeout(() => {
this.loading = false; state.loading = false;
this.columns = ['Option']; state.columns = ['Option'];
}, 1000); }, 1000);
return { state };
}, },
}; };
``` ```
@ -218,19 +234,26 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
const state = reactive({
value: '', value: '',
showPicker: false, showPicker: false,
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], });
const onConfirm = (value) => {
state.value = value;
state.showPicker = false;
};
return {
state,
columns,
onConfirm,
}; };
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
}, },
}; };
``` ```

215
src/picker/README.zh-CN.md
View File

@ -40,21 +40,25 @@ Picker 组件通过 `columns` 属性配置选项数据，`columns` 是一个包
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
data() { setup() {
return { const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
const onConfirm = (value, index) => {
Toast(`当前值: ${value}, 当前索引: ${index}`);
}; };
}, const onChange = (value, index) => {
methods: { Toast(`当前值: ${value}, 当前索引: ${index}`);
onConfirm(value, index) { };
Toast(`当前值：${value}, 当前索引：${index}`); const onCancel = () => {
},
onChange(value, index) {
Toast(`当前值：${value}, 当前索引：${index}`);
},
onCancel() {
Toast('取消'); Toast('取消');
}, };
return {
columns,
onChange,
onCancel,
onConfirm,
};
}, },
}; };
``` ```
@ -77,28 +81,28 @@ export default {
```js ```js
export default { export default {
data() { setup() {
return { const columns = [
columns: [ // 第一列
// 第一列 {
{ values: ['周一', '周二', '周三', '周四', '周五'],
values: ['周一', '周二', '周三', '周四', '周五'], defaultIndex: 2,
defaultIndex: 2, },
}, // 第二列
// 第二列 {
{ values: ['上午', '下午', '晚上'],
values: ['上午', '下午', '晚上'], defaultIndex: 1,
defaultIndex: 1, },
}, ];
],
}; return { columns };
}, },
}; };
``` ```
### 级联选择 ### 级联选择
使用 `columns` 的 `children` 字段可以实现选项级联的效果（从 2.4.5 版本开始支持）。 使用 `columns` 的 `children` 字段可以实现选项级联的效果。
```html ```html
<van-picker title="标题" :columns="columns" /> <van-picker title="标题" :columns="columns" />
@ -106,37 +110,37 @@ export default {
```js ```js
export default { export default {
data() { setup() {
return { const columns = [
columns: [ {
{ text: '浙江',
text: '浙江', children: [
children: [ {
{ text: '杭州',
text: '杭州', children: [{ text: '西湖区' }, { text: '余杭区' }],
children: [{ text: '西湖区' }, { text: '余杭区' }], },
}, {
{ text: '温州',
text: '温州', children: [{ text: '鹿城区' }, { text: '瓯海区' }],
children: [{ text: '鹿城区' }, { text: '瓯海区' }], },
}, ],
], },
}, {
{ text: '福建',
text: '福建', children: [
children: [ {
{ text: '福州',
text: '福州', children: [{ text: '鼓楼区' }, { text: '台江区' }],
children: [{ text: '鼓楼区' }, { text: '台江区' }], },
}, {
{ text: '厦门',
text: '厦门', children: [{ text: '思明区' }, { text: '海沧区' }],
children: [{ text: '思明区' }, { text: '海沧区' }], },
}, ],
], },
}, ];
],
}; return { columns };
}, },
}; };
``` ```
@ -153,14 +157,14 @@ export default {
```js ```js
export default { export default {
data() { setup() {
return { const columns = [
columns: [ { text: '杭州', disabled: true },
{ text: '杭州', disabled: true }, { text: '宁波' },
{ text: '宁波' }, { text: '温州' },
{ text: '温州' }, ];
],
}; return { columns };
}, },
}; };
``` ```
@ -174,21 +178,30 @@ export default {
``` ```
```js ```js
const cities = { import { ref } from 'vue';
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
};
export default { export default {
data() { setup() {
return { const picker = ref(null);
columns: [{ values: Object.keys(cities) }, { values: cities['浙江'] }],
const cities = {
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
};
const columns = [
{ values: Object.keys(cities) },
{ values: cities['浙江'] },
];
const onChange = (values) => {
picker.value.setColumnValues(1, cities[values[0]]);
};
return {
picker,
columns,
onChange,
}; };
},
methods: {
onChange(values) {
this.$refs.picker.setColumnValues(1, cities[values[0]]);
},
}, },
}; };
``` ```
@ -202,18 +215,21 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
columns: [], columns: [],
loading: true, loading: true,
}; });
},
created() {
setTimeout(() => { setTimeout(() => {
this.loading = false; state.loading = false;
this.columns = ['选项']; state.columns = ['选项'];
}, 1000); }, 1000);
return { state };
}, },
}; };
``` ```
@ -241,19 +257,26 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
const state = reactive({
value: '', value: '',
showPicker: false, showPicker: false,
columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'], });
const onConfirm = (value) => {
state.value = value;
state.showPicker = false;
};
return {
state,
columns,
onConfirm,
}; };
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
}, },
}; };
``` ```

199
src/picker/demo/index.vue
View File

@ -67,79 +67,82 @@
</template> </template>
<script> <script>
import { ref, computed, reactive, toRefs } from 'vue';
import { dateColumns, cascadeColumns } from './data'; import { dateColumns, cascadeColumns } from './data';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
const i18n = {
'zh-CN': {
city: '城市',
cascade: '级联选择',
withPopup: '搭配弹出层使用',
chooseCity: '选择城市',
showToolbar: '展示顶部栏',
dateColumns: dateColumns['zh-CN'],
defaultIndex: '默认选中项',
disableOption: '禁用选项',
cascadeColumns: cascadeColumns['zh-CN'],
multipleColumns: '多列选择',
setColumnValues: '动态设置选项',
textColumns: [
'杭州',
'宁波',
'温州',
'绍兴',
'湖州',
'嘉兴',
'金华',
'衢州',
],
disabledColumns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' },
],
column3: {
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
},
toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`,
},
'en-US': {
city: 'City',
cascade: 'Cascade',
withPopup: 'With Popup',
chooseCity: 'Choose City',
showToolbar: 'Show Toolbar',
dateColumns: dateColumns['en-US'],
defaultIndex: 'Default Index',
disableOption: 'Disable Option',
cascadeColumns: cascadeColumns['en-US'],
multipleColumns: 'Multiple Columns',
setColumnValues: 'Set Column Values',
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
disabledColumns: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' },
],
column3: {
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
},
toastContent: (value, index) => `Value: ${value}, Index：${index}`,
},
};
export default { export default {
i18n: { setup() {
'zh-CN': { const t = useTranslate(i18n);
city: '城市', const picker = ref();
cascade: '级联选择', const state = reactive({
withPopup: '搭配弹出层使用',
chooseCity: '选择城市',
showToolbar: '展示顶部栏',
dateColumns: dateColumns['zh-CN'],
defaultIndex: '默认选中项',
disableOption: '禁用选项',
cascadeColumns: cascadeColumns['zh-CN'],
multipleColumns: '多列选择',
setColumnValues: '动态设置选项',
textColumns: [
'杭州',
'宁波',
'温州',
'绍兴',
'湖州',
'嘉兴',
'金华',
'衢州',
],
disabledColumns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' },
],
column3: {
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
},
toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`,
},
'en-US': {
city: 'City',
cascade: 'Cascade',
withPopup: 'With Popup',
chooseCity: 'Choose City',
showToolbar: 'Show Toolbar',
dateColumns: dateColumns['en-US'],
defaultIndex: 'Default Index',
disableOption: 'Disable Option',
cascadeColumns: cascadeColumns['en-US'],
multipleColumns: 'Multiple Columns',
setColumnValues: 'Set Column Values',
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
disabledColumns: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' },
],
column3: {
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
},
toastContent: (value, index) => `Value: ${value}, Index：${index}`,
},
},
data() {
return {
showPicker: false, showPicker: false,
fieldValue: '', fieldValue: '',
}; });
},
computed: { const columns = computed(() => {
columns() { const column = t('column3');
const column = this.t('column3');
return [ return [
{ {
values: Object.keys(column), values: Object.keys(column),
@ -151,38 +154,50 @@ export default {
defaultIndex: 2, defaultIndex: 2,
}, },
]; ];
}, });
},
methods: { const onChange1 = (value, index) => {
onChange1(value, index) { Toast(t('toastContent', value, index));
this.$toast(this.t('toastContent', value, index)); };
},
onChange2(values) { const onChange2 = (values) => {
this.$refs.picker.setColumnValues(1, this.t('column3')[values[0]]); picker.value.setColumnValues(1, t('column3')[values[0]]);
}, };
onConfirm(value, index) { const onConfirm = (value, index) => {
this.$toast(this.t('toastContent', value, index)); Toast(t('toastContent', value, index));
}, };
onCancel() { const onCancel = () => {
this.$toast(this.t('cancel')); Toast(t('cancel'));
}, };
onClickField() { const onCancel2 = () => {
this.showPicker = true; state.showPicker = false;
}, };
onConfirm2(value) { const onClickField = () => {
this.showPicker = false; state.showPicker = true;
this.fieldValue = value; };
},
onCancel2() { const onConfirm2 = (value) => {
this.showPicker = false; state.showPicker = false;
}, state.fieldValue = value;
};
return {
...toRefs(state),
t,
picker,
columns,
onCancel,
onCancel2,
onChange1,
onChange2,
onConfirm,
onConfirm2,
onClickField,
};
}, },
}; };
</script> </script>