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 v-model="value" class="input" :disabled="disabled" confirm-type="search"
                placeholder-style="font-size:3.733vw;" :placeholder="placeholder" type="text" @confirm="onConfirm">
            <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: "搜索关键字"
        },
        onSearch: {
            type: Function
        },
        disabled: {
            type: Boolean,
            default: false
        },
        background: {
            type: String
        }
    },
    data() {
        return {
            value: ""
        }
    },
    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>