<!-- 输入框类型 --> <template> <el-select :size="size" :style="inputStyle" v-if="inputType === 'SELECT'" v-model="hookValue" :placeholder="placeholder" > <el-option v-for="(item,index) in keyList" :key="index" :value="item['value']" :label="item.label" /> </el-select> <el-input v-else-if="inputType === 'NUM'" type="number" :size="size" :style="inputStyle" v-model="hookValue" :placeholder="placeholder" /> <el-date-picker v-else-if="inputType === 'DATE'" v-model="hookValue" type="date" value-format="yyyy-MM-dd" :size="size" :style="inputStyle" :placeholder="placeholder" /> <el-input v-else :size="size" v-model="hookValue" :style="inputStyle" :placeholder="placeholder" /> </template> <script> export default { props: { placeholder: { default: "请选择" }, size: { default: "large" }, inputType: { default: "TEXT" }, value: { default: "", required: true }, inputStyle: { default: "" }, keyList: { type: Array } }, data() { return { hookValue: "" }; }, watch: { value: { immediate: true, deep: true, handler(val) { this.hookValue = val; } }, hookValue: { handler(val) { this.$emit("input", val); this.$emit("change", val); } } }, created() {}, mounted() {}, methods: {}, computed: {} }; </script> <style scoped lang="less"> </style>