YXGJ/components/My_search.vue

<template>
    <view class="search-box">
        <view class="search" :style="{ background: background || '#F2F2F2' }">
            <icon class="icon" type="search" size="3.733vw" />
            <input :focus="inputFocus" v-model="value" class="input" :disabled="disabled" confirm-type="search"
                placeholder-style="font-size:3.733vw;" :placeholder="placeholder" type="text"
                @input="isInput ? onConfirm($event) : ''" @confirm="isInput ? '' : onConfirm($event)">
            <icon v-if="value" class="icon" type="clear" size="3.733vw" @click="onClear" />
        </view>
        <slot />
    </view>
</template>

<script>
export default {
    props: {
        placeholder: {
            type: String,
            default: "搜索关键字"
        },
        focus: {
            type: Boolean,
            default: true
        },
        onSearch: {
            type: Function
        },
        delay: {
            type: [String, Number],
            default: 350
        },
        disabled: {
            type: Boolean,
            default: false
        },
        background: {
            type: String
        },
        isInput: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        focus: function (newVal) {
            setTimeout(() => {
                this.inputFocus = newVal;
            }, this.delay)
        }
    },
    data() {
        return {
            value: "",
            inputFocus: false,
        }
    },
    methods: {
        onConfirm() {
            this.$emit("onSearch", this.value)
        },
        onClear() {
            this.value = '';
            this.$emit("onSearch", this.value)
        }
    },
}
</script>

<style lang="scss">
.search-box {
    display: flex;
    width: 100%;
    box-sizing: border-box;

    .search {
        display: flex;
        align-items: center;
        flex: 1;
        height: 30px;
        border-radius: 50px;
        flex-shrink: 0;
        margin: 0 !important;

        .icon {
            padding: 10px;
        }

        .input {
            flex: 1;
            margin: 0 !important;
        }
    }
}
</style>