gypsy-crm-frontend-vu/components/cwg-combox.vue

<template>
    <view class="cwg-combox">

        <template v-if="disabled">
            <view class="disabled-text">{{ innerText }}</view>

        </template>
        <template v-if="!disabled">
            <!-- 可搜索模式 -->
            <uni-combox v-if="filterable" v-model="innerText" :candidates="textList" :clearable="clearable"
                :placeholder="placeholder" :disabled="disabled" @input="handleComboxChange" />

            <!-- 普通下拉模式 -->
            <uni-data-select v-else v-model="innerValue" :localdata="options" :clear="clearable"
                :placeholder="placeholder" :multiple="multiple" :disabled="disabled" @change="handleSelectChange">
                <template #selected v-if="$slots.selected">
                    <slot name="selected"></slot>
                </template>
            </uni-data-select>
        </template>

    </view>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const props = defineProps({
    value: [String, Number, Array],
    options: {
        type: Array,
        default: () => []
    },
    filterable: {
        type: Boolean,
        default: false
    },
    placeholder: String,
    clearable: {
        type: Boolean,
        default: true
    },
    multiple: {
        type: Boolean,
        default: false
    },
    disabled: Boolean
})

const emit = defineEmits(['update:value', 'change'])

/**
 * 内部状态
 */
const innerValue = ref(props.value)
const innerText = ref()

/**
 * 提取 text 列表（给 combox 用）
 */
const textList = computed(() =>
    props.options.map(item => item.text)
)

/**
 * value → text 映射
 */
const updateTextByValue = (val) => {
    if (!val) {
        innerText.value = ''
        return
    }
    const item = props.options.find(i => i.value === val)
    innerText.value = item ? item.text : ''
}

/**
 * 组件挂载时初始化
 */
onMounted(() => {
    if (props.value) {

        innerValue.value = props.value
        updateTextByValue(props.value)
    }
})

/**
 * value 改变时同步内部状态
 */
watch(
    () => props.value,
    (val) => {
        innerValue.value = val
        updateTextByValue(val)
    }
)

/**
 * options 改变时重新计算显示文本（回显）
 */
watch(
    () => props.options,
    () => {
        if (props.value) {
            updateTextByValue(props.value)
        }
    },
    { deep: true }
)

/**
 * 普通 select 改变
 */
const handleSelectChange = (val) => {
    // console.log(val, props.options, 1111)
    innerValue.value = val
    updateTextByValue(val)
    emit('update:value', val)
    emit('change', val)
}

/**
 * combox 改变
 */
const handleComboxChange = (text) => {
    const item = props.options.find(i => i.text === text)
    if (item) {
        innerValue.value = item.value
        emit('update:value', item.value)
        emit('change', item.value)
    }
}
</script>
<style lang="scss" scoped>
@import "@/uni.scss";

.cwg-combox {
    font-size: px2rpx(16);
    //background-color: var(--bs-secondary-bg);

    /* 穿透修改 uni-data-select 内部列表最大高度，使其可以滚动 */
    :deep(.uni-select__selector-scroll) {
        max-height: px2rpx(200);
        /* 限制最高约 200px (约 5~6 个选项的高度) */
        overflow-y: auto;
    }
}

.disabled-text {
    height: px2rpx(35);
    padding: 0 px2rpx(12);
    border-radius: px2rpx(4);
    line-height: 1;
    font-size: px2rpx(16);
    background: transparent;
    display: flex;
    align-items: center;
    //justify-content: center;
    color: #d5d5d5;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #f5f7fa !important;
}
</style>