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

<template>
    <el-input :size="state.size.size" :class="['form-item', prop.class, full && 'full']" v-model="myValue" :type="type"
        :placeholder="placeholder || t('rule.pleaseEnter')" :disabled="disabled" :clearable="clearable">
        <template v-if="label" #prepend>{{ label }}</template>
    </el-input>
</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,
    label: {
        type: String,
        default: null
    },
    placeholder: {
        type: String,
        default: null
    },
    class: {
        type: String,
        default: null
    },
    type: {
        type: String,
        default: null
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    full: {
        type: Boolean,
        default: false,
    },
    width: {
        type: Number
    }
});
const emit = defineEmits(["update:modelValue"]);
const myValue = ref(null);
const width = ref('150px');
const setWidth = () => {
    if (prop.width) {
        width.value = prop.width + 'px';
    } else {
        width.value = state.size.searchWidth;
    }
}
watch(myValue, (n, o) => {
    emit('update:modelValue', n);
})
watch(() => prop.modelValue, (n, o) => {
    myValue.value = n;
})
watch(() => state.size, (n, o) => {
    setWidth();
})
onMounted(() => {
    prop.modelValue && (myValue.value = prop.modelValue);
    setWidth();
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.form-item {
    width: v-bind('width');
}

::v-deep .el-input-group__prepend {
    min-width: 20px;
    padding: 0px 4px !important;
}
</style>