diy-input

公共组件input，开箱即用

<!-- 使用 -->
<DiyInput
    v-model="state.searchInfo.decisionNo"
    placeholder="请输入施工道路、申请部门或施工许可号"
    clearable 
    @clear="confirmSearch"
></DiyInput>

<!-- DiyInput.vue -->
<template>
    <div class="diy-input" @blur="blur">
        <input
            class="diy-input__container"
            :value="props.modelValue"
            :placeholder="props.placeholder"
            @input="input"
            @change="change"
            @clear="clear"
            @focus="focus"
        />
        <el-icon v-if="showClear" class="diy-input__clear" @click="clear"
            ><CircleClose
        /></el-icon>
    </div>
</template>

<script setup>
import { computed, reactive } from "vue";
const emits = defineEmits(["update:modelValue", "input", "change", "clear"]);
const props = defineProps({
    modelValue: {
        //绑定值
        type: String,
        default: "",
    },
    placeholder: {
        type: String,
        default: "请输入",
    },
    clearable: {
        type: Boolean,
        default: false,
    },
});
const state = reactive({
    isFocus: false,
});
let showClear = computed(() => {
    if (props.clearable) {
        return props.modelValue && props.modelValue.length > 0 && state.isFocus;
    } else {
        return false;
    }
});
function input(e) {
    emits("input", e.target.value);
    emits("update:modelValue", e.target.value);
}
function change(e) {
    emits("change", e.target.value);
    emits("update:modelValue", e.target.value);
}
function clear() {
    emits("clear", null);
    emits("update:modelValue", null);
}
function focus() {
    state.isFocus = true;
}
function blur() {
    state.isFocus = false;
}
</script>

<style lang="less" scoped>
.diy-input {
    position: relative;
    width: 100%;
    height: 100%;
    .diy-input__container {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        font-size: 14px;
        background: rgba(49, 92, 155, 0.2);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        padding-right: 24px;
    }
    .diy-input__container::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.6);
    }
    .diy-input__clear {
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translate(0, -50%);
    }
}
</style>

预览