92 lines
1.7 KiB
Vue
92 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref, watch, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t, locale } = useI18n();
|
|
const emit = defineEmits(['confirm', 'close']);
|
|
const props = defineProps({
|
|
title: {
|
|
// 選擇器標題
|
|
type: String,
|
|
default: () => {
|
|
return '';
|
|
},
|
|
},
|
|
show: {
|
|
// 展示狀態
|
|
type: Boolean,
|
|
default: () => {
|
|
return false;
|
|
},
|
|
},
|
|
columns: {
|
|
// 數組列表
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
keyName: {
|
|
type: String,
|
|
default: () => {
|
|
return 'name';
|
|
},
|
|
},
|
|
});
|
|
|
|
const showPicker = ref(false); // 是否显示弹窗
|
|
const columnList = ref([]); // 列表数据
|
|
const onConfirm = (e) => {
|
|
emit('confirm', e.value);
|
|
};
|
|
|
|
const onCancel = () => {
|
|
emit('close');
|
|
};
|
|
watch(
|
|
() => props.show,
|
|
(newVal) => {
|
|
showPicker.value = newVal;
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
);
|
|
watch(
|
|
() => props.columns,
|
|
(newVal) => {
|
|
// console.log(newVal);
|
|
columnList.value.push(
|
|
newVal.map((item) => {
|
|
return {
|
|
...item,
|
|
};
|
|
})
|
|
);
|
|
// console.log(columnList.value);
|
|
},
|
|
{
|
|
// immediate: true,
|
|
deep: true,
|
|
}
|
|
);
|
|
</script>
|
|
<template>
|
|
<!-- <up-popup :show="showPicker" :round="10" mode="bottom" :closeOnClickOverlay="true" @close="onCancel"> -->
|
|
<up-picker
|
|
:show="showPicker"
|
|
:title="props.title"
|
|
:confirmText="t('confirm')"
|
|
:cancelText="t('cancel')"
|
|
confirmColor="#274C40"
|
|
:columns="columnList"
|
|
:keyName="keyName"
|
|
:closeOnClickOverlay="true"
|
|
@confirm="onConfirm"
|
|
@cancel="onCancel"
|
|
@close="onCancel"
|
|
></up-picker>
|
|
<!-- </up-popup> -->
|
|
</template>
|
|
<style lang="scss" scoped></style>
|