mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 22:49:15 +08:00
docs(Picker): use composition api
This commit is contained in:
chenjiahan
parent
e787fe731e
commit
a33f06bb9d
@ -32,21 +32,25 @@ app.use(Picker);
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
setup() {
|
||||
const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
|
||||
|
||||
const onConfirm = (value, index) => {
|
||||
Toast(`Value: ${value}, Index: ${index}`);
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value, index) {
|
||||
const onChange = (value, index) => {
|
||||
Toast(`Value: ${value}, Index: ${index}`);
|
||||
},
|
||||
onChange(value, index) {
|
||||
Toast(`Value: ${value}, Index: ${index}`);
|
||||
},
|
||||
onCancel() {
|
||||
};
|
||||
const onCancel = () => {
|
||||
Toast('Cancel');
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
columns,
|
||||
onChange,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -65,9 +69,8 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
setup() {
|
||||
const columns = [
|
||||
{
|
||||
values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
|
||||
defaultIndex: 2,
|
||||
@ -76,8 +79,9 @@ export default {
|
||||
values: ['Morging', 'Afternoon', 'Evening'],
|
||||
defaultIndex: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -90,9 +94,8 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
setup() {
|
||||
const columns = [
|
||||
{
|
||||
text: 'Zhejiang',
|
||||
children: [
|
||||
@ -119,8 +122,9 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -133,14 +137,14 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
setup() {
|
||||
const columns = [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' },
|
||||
],
|
||||
};
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -152,21 +156,30 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const picker = ref(null);
|
||||
|
||||
const states = {
|
||||
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
|
||||
};
|
||||
const columns = [
|
||||
{ values: Object.keys(states) },
|
||||
{ values: states.Group1 },
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
columns: [],
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.columns = ['Option'];
|
||||
state.loading = false;
|
||||
state.columns = ['Option'];
|
||||
}, 1000);
|
||||
|
||||
return { state };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -218,19 +234,26 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
|
||||
const state = reactive({
|
||||
value: '',
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -40,21 +40,25 @@ Picker 组件通过 `columns` 属性配置选项数据，`columns` 是一个包
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
|
||||
setup() {
|
||||
const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
|
||||
|
||||
const onConfirm = (value, index) => {
|
||||
Toast(`当前值: ${value}, 当前索引: ${index}`);
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value, index) {
|
||||
Toast(`当前值：${value}, 当前索引：${index}`);
|
||||
},
|
||||
onChange(value, index) {
|
||||
Toast(`当前值：${value}, 当前索引：${index}`);
|
||||
},
|
||||
onCancel() {
|
||||
const onChange = (value, index) => {
|
||||
Toast(`当前值: ${value}, 当前索引: ${index}`);
|
||||
};
|
||||
const onCancel = () => {
|
||||
Toast('取消');
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
columns,
|
||||
onChange,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -77,9 +81,8 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
setup() {
|
||||
const columns = [
|
||||
// 第一列
|
||||
{
|
||||
values: ['周一', '周二', '周三', '周四', '周五'],
|
||||
@ -90,15 +93,16 @@ export default {
|
||||
values: ['上午', '下午', '晚上'],
|
||||
defaultIndex: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 级联选择
|
||||
|
||||
使用 `columns` 的 `children` 字段可以实现选项级联的效果（从 2.4.5 版本开始支持）。
|
||||
使用 `columns` 的 `children` 字段可以实现选项级联的效果。
|
||||
|
||||
```html
|
||||
<van-picker title="标题" :columns="columns" />
|
||||
@ -106,9 +110,8 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
setup() {
|
||||
const columns = [
|
||||
{
|
||||
text: '浙江',
|
||||
children: [
|
||||
@ -135,8 +138,9 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -153,14 +157,14 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
setup() {
|
||||
const columns = [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' },
|
||||
],
|
||||
};
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -174,21 +178,30 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const picker = ref(null);
|
||||
|
||||
const cities = {
|
||||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
|
||||
};
|
||||
const columns = [
|
||||
{ values: Object.keys(cities) },
|
||||
{ values: cities['浙江'] },
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
columns: [],
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.columns = ['选项'];
|
||||
state.loading = false;
|
||||
state.columns = ['选项'];
|
||||
}, 1000);
|
||||
|
||||
return { state };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -241,19 +257,26 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
|
||||
const state = reactive({
|
||||
value: '',
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -67,10 +67,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, reactive, toRefs } from 'vue';
|
||||
import { dateColumns, cascadeColumns } from './data';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import Toast from '../../toast';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
city: '城市',
|
||||
cascade: '级联选择',
|
||||
@ -128,18 +130,19 @@ export default {
|
||||
},
|
||||
toastContent: (value, index) => `Value: ${value}, Index：${index}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
data() {
|
||||
return {
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const picker = ref();
|
||||
const state = reactive({
|
||||
showPicker: false,
|
||||
fieldValue: '',
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
computed: {
|
||||
columns() {
|
||||
const column = this.t('column3');
|
||||
const columns = computed(() => {
|
||||
const column = t('column3');
|
||||
return [
|
||||
{
|
||||
values: Object.keys(column),
|
||||
@ -151,38 +154,50 @@ export default {
|
||||
defaultIndex: 2,
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
methods: {
|
||||
onChange1(value, index) {
|
||||
this.$toast(this.t('toastContent', value, index));
|
||||
},
|
||||
const onChange1 = (value, index) => {
|
||||
Toast(t('toastContent', value, index));
|
||||
};
|
||||
|
||||
onChange2(values) {
|
||||
this.$refs.picker.setColumnValues(1, this.t('column3')[values[0]]);
|
||||
},
|
||||
const onChange2 = (values) => {
|
||||
picker.value.setColumnValues(1, t('column3')[values[0]]);
|
||||
};
|
||||
|
||||
onConfirm(value, index) {
|
||||
this.$toast(this.t('toastContent', value, index));
|
||||
},
|
||||
const onConfirm = (value, index) => {
|
||||
Toast(t('toastContent', value, index));
|
||||
};
|
||||
|
||||
onCancel() {
|
||||
this.$toast(this.t('cancel'));
|
||||
},
|
||||
const onCancel = () => {
|
||||
Toast(t('cancel'));
|
||||
};
|
||||
|
||||
onClickField() {
|
||||
this.showPicker = true;
|
||||
},
|
||||
const onCancel2 = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
onConfirm2(value) {
|
||||
this.showPicker = false;
|
||||
this.fieldValue = value;
|
||||
},
|
||||
const onClickField = () => {
|
||||
state.showPicker = true;
|
||||
};
|
||||
|
||||
onCancel2() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
const onConfirm2 = (value) => {
|
||||
state.showPicker = false;
|
||||
state.fieldValue = value;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
picker,
|
||||
columns,
|
||||
onCancel,
|
||||
onCancel2,
|
||||
onChange1,
|
||||
onChange2,
|
||||
onConfirm,
|
||||
onConfirm2,
|
||||
onClickField,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user