water_affairs/components/My_search.vue

<template>
    <view class="My_search">
        <slot></slot>
        <u-search v-model="value" :showAction="false" @search="onSearch" @custom="onSearch" @clear="onSearch"
            :placeholder="placeholder" />
        <view v-if="isFilter" @click="onFilter" class="filtrate" hover-class="navigator-hover">
            <text class="iconfont icon-shaixuan" />筛选
        </view>
    </view>
</template>

<script>
export default {
    name: 'My_search',
    props: {
        placeholder: {
            type: String,
            default: "请输入关键字"
        },
        isFilter: {
            type: Boolean,
            default: true
        },
        startSearch: Function,
        openFilter: Function,
    },
    data() {
        return {
            value: ""
        };
    },
    methods: {
        onSearch(value) {
            this.$emit("startSearch", value)
        },
        onFilter() {
            this.$emit("openFilter")
        }
    },
}
</script>

<style lang="scss" scoped>
.My_search {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 45px;
    padding: 8px 10px;
    background: #052E5D;
    box-sizing: border-box;

    .filtrate {
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-left: 5px;
        font-size: 14px;
        color: #FFFFFF;
        border-radius: 4px;

        .iconfont {
            margin-right: 3px;
            font-size: 14px;
        }
    }

    /deep/ .u-search .u-search__content {
        height: 29px !important;
    }

    /deep/ .u-icon__icon {
        font-size: 22px !important;
        line-height: 22px !important;
    }
}
</style>