初始化项目模板

components/common-picker.vue

@@ -0,0 +1,91 @@
+<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>