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,19 +69,19 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
|
||||
defaultIndex: 2,
|
||||
},
|
||||
{
|
||||
values: ['Morging', 'Afternoon', 'Evening'],
|
||||
defaultIndex: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
setup() {
|
||||
const columns = [
|
||||
{
|
||||
values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
|
||||
defaultIndex: 2,
|
||||
},
|
||||
{
|
||||
values: ['Morging', 'Afternoon', 'Evening'],
|
||||
defaultIndex: 1,
|
||||
},
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -90,37 +94,37 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
text: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
text: 'Hangzhou',
|
||||
children: [{ text: 'Xihu' }, { text: 'Yuhang' }],
|
||||
},
|
||||
{
|
||||
text: 'Wenzhou',
|
||||
children: [{ text: 'Lucheng' }, { text: 'Ouhai' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Fujian',
|
||||
children: [
|
||||
{
|
||||
text: 'Fuzhou',
|
||||
children: [{ text: 'Gulou' }, { text: 'Taijiang' }],
|
||||
},
|
||||
{
|
||||
text: 'Xiamen',
|
||||
children: [{ text: 'Siming' }, { text: 'Haicang' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
setup() {
|
||||
const columns = [
|
||||
{
|
||||
text: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
text: 'Hangzhou',
|
||||
children: [{ text: 'Xihu' }, { text: 'Yuhang' }],
|
||||
},
|
||||
{
|
||||
text: 'Wenzhou',
|
||||
children: [{ text: 'Lucheng' }, { text: 'Ouhai' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Fujian',
|
||||
children: [
|
||||
{
|
||||
text: 'Fuzhou',
|
||||
children: [{ text: 'Gulou' }, { text: 'Taijiang' }],
|
||||
},
|
||||
{
|
||||
text: 'Xiamen',
|
||||
children: [{ text: 'Siming' }, { text: 'Haicang' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -133,14 +137,14 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' },
|
||||
],
|
||||
};
|
||||
setup() {
|
||||
const columns = [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' },
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -152,21 +156,30 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
const states = {
|
||||
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
|
||||
};
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [{ values: Object.keys(states) }, { values: states.Group1 }],
|
||||
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 },
|
||||
];
|
||||
|
||||
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,28 +81,28 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
// 第一列
|
||||
{
|
||||
values: ['周一', '周二', '周三', '周四', '周五'],
|
||||
defaultIndex: 2,
|
||||
},
|
||||
// 第二列
|
||||
{
|
||||
values: ['上午', '下午', '晚上'],
|
||||
defaultIndex: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
setup() {
|
||||
const columns = [
|
||||
// 第一列
|
||||
{
|
||||
values: ['周一', '周二', '周三', '周四', '周五'],
|
||||
defaultIndex: 2,
|
||||
},
|
||||
// 第二列
|
||||
{
|
||||
values: ['上午', '下午', '晚上'],
|
||||
defaultIndex: 1,
|
||||
},
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 级联选择
|
||||
|
||||
使用 `columns` 的 `children` 字段可以实现选项级联的效果（从 2.4.5 版本开始支持）。
|
||||
使用 `columns` 的 `children` 字段可以实现选项级联的效果。
|
||||
|
||||
```html
|
||||
<van-picker title="标题" :columns="columns" />
|
||||
@ -106,37 +110,37 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
text: '浙江',
|
||||
children: [
|
||||
{
|
||||
text: '杭州',
|
||||
children: [{ text: '西湖区' }, { text: '余杭区' }],
|
||||
},
|
||||
{
|
||||
text: '温州',
|
||||
children: [{ text: '鹿城区' }, { text: '瓯海区' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '福建',
|
||||
children: [
|
||||
{
|
||||
text: '福州',
|
||||
children: [{ text: '鼓楼区' }, { text: '台江区' }],
|
||||
},
|
||||
{
|
||||
text: '厦门',
|
||||
children: [{ text: '思明区' }, { text: '海沧区' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
setup() {
|
||||
const columns = [
|
||||
{
|
||||
text: '浙江',
|
||||
children: [
|
||||
{
|
||||
text: '杭州',
|
||||
children: [{ text: '西湖区' }, { text: '余杭区' }],
|
||||
},
|
||||
{
|
||||
text: '温州',
|
||||
children: [{ text: '鹿城区' }, { text: '瓯海区' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '福建',
|
||||
children: [
|
||||
{
|
||||
text: '福州',
|
||||
children: [{ text: '鼓楼区' }, { text: '台江区' }],
|
||||
},
|
||||
{
|
||||
text: '厦门',
|
||||
children: [{ text: '思明区' }, { text: '海沧区' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -153,14 +157,14 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' },
|
||||
],
|
||||
};
|
||||
setup() {
|
||||
const columns = [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' },
|
||||
];
|
||||
|
||||
return { columns };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -174,21 +178,30 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
const cities = {
|
||||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
|
||||
};
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [{ values: Object.keys(cities) }, { values: cities['浙江'] }],
|
||||
setup() {
|
||||
const picker = ref(null);
|
||||
|
||||
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
|
||||
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,79 +67,82 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, reactive, toRefs } from 'vue';
|
||||
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 {
|
||||
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}`,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
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