|
@@ -1,16 +1,37 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <picker :range="options" range-key="name" @change="selectChange" :disabled="false">
|
|
|
|
|
- <slot></slot>
|
|
|
|
|
- </picker>
|
|
|
|
|
|
|
+ <template v-if="mode === 'picker'">
|
|
|
|
|
+ <picker :range="options" range-key="name" @change="selectChange" :disabled="false">
|
|
|
|
|
+ <slot></slot>
|
|
|
|
|
+ </picker>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-else-if="mode === 'custom'">
|
|
|
|
|
+ <view @click="showModel = true" class="flex1">
|
|
|
|
|
+ <slot></slot>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <up-popup v-model:show="showModel" mode="center" round="30rpx" closeable @close="showModel = false">
|
|
|
|
|
+ <view class="w-700">
|
|
|
|
|
+ <view class="pd-24">
|
|
|
|
|
+ <view class="f-s-32 c-#333 f-w-500">{{ title }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <scroll-view scroll-y style="max-height: 70vh">
|
|
|
|
|
+ <view class="pd3-10-24-24">
|
|
|
|
|
+ <ut-row gap="16rpx">
|
|
|
|
|
+ <template v-for="(item, index) in options" :key="index">
|
|
|
|
|
+ <ut-col :span="item.span">
|
|
|
|
|
+ <view class="">{{ item?.name }}</view>
|
|
|
|
|
+ </ut-col>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </ut-row>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </up-popup>
|
|
|
|
|
+ </template>
|
|
|
</template>
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref, watch, computed } from 'vue';
|
|
import { ref, watch, computed } from 'vue';
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
|
- show: {
|
|
|
|
|
- type: Boolean,
|
|
|
|
|
- default: false,
|
|
|
|
|
- },
|
|
|
|
|
modelValue: {
|
|
modelValue: {
|
|
|
type: Array,
|
|
type: Array,
|
|
|
default: () => [],
|
|
default: () => [],
|
|
@@ -28,16 +49,29 @@ const props = defineProps({
|
|
|
type: Array,
|
|
type: Array,
|
|
|
default: () => [],
|
|
default: () => [],
|
|
|
},
|
|
},
|
|
|
|
|
+ mode: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: 'picker', // 原生 picker 模式 或自定义弹窗模式 custom
|
|
|
|
|
+ },
|
|
|
|
|
+ // 是否多选
|
|
|
|
|
+ multiple: {
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: false, // 只有自定义弹窗模式下生效
|
|
|
|
|
+ },
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
const options = computed(() => {
|
|
const options = computed(() => {
|
|
|
|
|
+ console.log(props.tabs);
|
|
|
|
|
+
|
|
|
return props.tabs.map((item: any) => {
|
|
return props.tabs.map((item: any) => {
|
|
|
return {
|
|
return {
|
|
|
name: item.label,
|
|
name: item.label,
|
|
|
value: item.value,
|
|
value: item.value,
|
|
|
|
|
+ span: item.elTagClass || 10,
|
|
|
};
|
|
};
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
-const showModel = ref(props.show);
|
|
|
|
|
|
|
+const showModel = ref(false);
|
|
|
const emit = defineEmits(['close', 'confirm', 'open', 'update:show', 'update:modelValue', 'change']);
|
|
const emit = defineEmits(['close', 'confirm', 'open', 'update:show', 'update:modelValue', 'change']);
|
|
|
const checkeds = ref({});
|
|
const checkeds = ref({});
|
|
|
const close = () => {
|
|
const close = () => {
|
|
@@ -61,5 +95,9 @@ watch(
|
|
|
(newVal) => {},
|
|
(newVal) => {},
|
|
|
{ immediate: true }
|
|
{ immediate: true }
|
|
|
);
|
|
);
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ // 初始化已选择项
|
|
|
|
|
+ console.log(props.tabs);
|
|
|
|
|
+});
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss" scoped></style>
|
|
<style lang="scss" scoped></style>
|