water_affairs/components/My_search.vue

<template>
    <view class="My_search" :style="{ background: bgColor }">
        <slot name="left" />
        <u-search v-if="ispad" v-model="value" :focus="focus" :showAction="false" height="60" @search="onSearch"
            @custom="onSearch" @clear="onSearch" :placeholder="placeholder" />
        <u-search v-else v-model="value" :focus="focus" :showAction="false" @search="onSearch" @custom="onSearch"
            @clear="onSearch" :placeholder="placeholder" />
        <view v-if="isFilter" @click="startFilter" class="filtrate" hover-class="navigator-hover">
            <text class="iconfont icon-shaixuan" />筛选
        </view>
        <My_filter ref="filter" :filter1="filter" :dateRange="dateRange" @onConfirm="onConfirm" />
    </view>
</template>

<script>
import My_filter from "./My_filter.vue";
export default {
    name: 'My_search',
    components: { My_filter },
    props: {
        placeholder: {
            type: String,
            default: "请输入关键字"
        },
        isFilter: {
            type: Boolean,
            default: true
        },
        startSearch: Function,
        onFilter: Function,
        customFiltering: {
            type: Boolean,
            default: false
        },
        filter: {
            type: Array,
            default: () => []
        },
        dateRange: Boolean,
        heightReduction: {
            type: Number,
            default: 0
        },
        bgColor: {
            type: String,
            default: '#052E5D'
        },
        focus: Boolean
    },
    data() {
        return {
            value: "",
            ispad: false
        };
    },
    created() {
        // #ifdef MP-WEIXIN
        let that = this;
        uni.getSystemInfo({
            success: ({ deviceType }) => that.ispad = deviceType == "pad"
        })
        // #endif      
    },
    methods: {
        onSearch(value) {
            this.$emit("startSearch", value)
        },
        startFilter() {
            if (this.customFiltering) return this.$emit("onFilter");
            this.$refs.filter.open(this.heightReduction);
        },
        onConfirm(res) {
            this.$emit("onFilter", res)
        },
        onFinish() {
            this.$refs.filter.close();
        },
        viewDateCycle(num, confirm = true) {
            this.$refs.filter.fast(num).then(res => {
                if (confirm) this.$refs.filter.confirm()
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.My_search {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 45px;
    padding: 8px 10px;
    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__content {
        height: 30px !important;
    }

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