noob-components/packages/base/item/select.vue

<template>
    <el-select :size="state.size.size" :class="['form-item', full && 'full']" v-model="myValue"
        :placeholder="placeholder || t('rule.pleaseSelect')" :filterable="filterable" :disabled="disabled"
        :clearable="clearable" @change="$emit('change', myValue)" :teleported="false" :remote="remote"
        :remote-method="remoteMethod">
        <el-option v-if="dict" v-for="(val, key) in state.dict[dict]" :key="key" :value="parse(key)" :label="val" />
        <el-option v-if="stateProp" v-for="item in state[stateProp]" :key="item[valueKey]" :value="item[valueKey]"
            :label="item[labelKey]" />
        <el-option v-if="maxValue" v-for="index in maxValue" :key="index" :value="index" />
        <slot />
    </el-select>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onMounted, ref, watch } from "vue";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

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,
    },
    full: {
        type: Boolean,
        default: false,
    },
    width: {
        type: Number
    },
    dict: {
        type: String
    },
    stateProp: {
        type: String
    },
    maxValue: {
        type: Number
    },
    valueKey: {
        type: String,
        default: 'key'
    },
    labelKey: {
        type: String,
        default: 'value'
    },
    remote: {
        type: Boolean,
        default: false,
    },
    remoteMethod: {
        type: Function,
        default: null,
    }
});
const emit = defineEmits(["update:modelValue", 'change']);
const myValue = ref<any>(null);
const width = ref('150px');
const setWidth = () => {
    if (prop.width) {
        width.value = prop.width + 'px';
    } else {
        width.value = state.size.searchWidth;
    }
}
const parse = (str) => {
    const num = Number(str);
    if (!isNaN(num)) {
        return num;
    } else {
        return str;
    }
}
watch(() => state.size, (n, o) => {
    setWidth();
})
watch(myValue, (n, o) => {
    emit('update:modelValue', n);
})
watch(() => prop.modelValue, (n, o) => {
    myValue.value = n;
})
onMounted(() => {
    prop.modelValue && (myValue.value = prop.modelValue);
    setWidth();
});

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.form-item {
    width: v-bind('width');
}
</style>