noob-components/packages/base/form/dict-select.vue

<template>
    <el-select :size="state.size.size" class="dict-select" v-model="myValue" :placeholder="placeholder"
        :filterable="filterable" :disabled="disabled" :clearable="clearable" @change="$emit('change', myValue)"
        :teleported="false">
        <el-option v-if="dict" v-for="(val, key, i) in state.dict[dict]" :key="key" :value="key" :label="val" />
        <el-option v-if="stateProp" v-for="item in state[stateProp]" :key="item[valueKey]" :value="item[valueKey]"
            :label="item[labelKey]" />
    </el-select>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, watch } from "vue";

const { state } = useStore();
const prop = defineProps({
    modelValue: null,
    placeholder: {
        type: String
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    filterable: {
        type: Boolean,
        default: true,
    },
    width: {
        type: Number,
        default: 150,
    },
    dict: {
        type: String
    },
    stateProp: {
        type: String
    },
    valueKey: {
        type: String,
        default: 'key'
    },
    labelKey: {
        type: String,
        default: 'value'
    },
});
const emit = defineEmits(["update:modelValue"]);
const myValue = ref(null);
const width = ref('150px');
watch(myValue, (n, o) => {
    emit('update:modelValue', n);
})
onMounted(() => {
    myValue.value = prop.modelValue;
    width.value = prop.width + 'px';
});

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.dict-select {
    width: v-bind('width');
    margin-right: v-bind('state.size.searchMargin');

    ::v-deep .el-input__wrapper,
    ::v-deep .el-select-dropdown {
        background-color: v-bind('state.style.itemBg');

        .el-input__inner,
        .el-select-dropdown__item {
            color: v-bind('state.style.color');
            &.selected{
                color: v-bind('state.style.itemSelectColor') !important;
            }
        }

        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
            background-color: v-bind('state.style.bodyBg');
        }
    }
}
</style>