caimei-applets-caimei/pages/search/components/search-header.vue

<template>
    <view class="search-header">
        <view class="search-container">
            <view class="search-tab" @click="showBubblePopup = true">
                <text v-text="menuName"></text>
                <text class="iconfont icon-xiangxiajiantou"></text>
            </view>
            <view class="search-control">
                <text class="iconfont icon-sousuo"></text>
                <input
                    class="control"
                    type="text"
                    :value="value"
                    placeholder="请输入搜索关键字"
                    @confirm="$emit('search', value)"
                    @input="event => $emit('input', event.detail.value)"
                    @blur="$emit('blur')"
                />
                <text class="iconfont icon-shanchu1" v-show="showClearBtn" @click="$emit('clear')"></text>
            </view>
            <view class="search-submit" @click="$emit('search', value)">搜索</view>
        </view>

        <!-- 下拉菜单 -->
        <tui-bubble-popup
            :show="showBubblePopup"
            :mask="true"
            position="fixed"
            direction="top"
            width="140rpx"
            left="10rpx"
            top="80rpx"
            triangleRight="60rpx"
            triangleTop="-22rpx"
            maskBgColor="rgba(0,0,0,0)"
            @close="showBubblePopup = false"
        >
            <view class="bubble-popup-container">
                <view
                    class="menu-item"
                    v-for="(item, index) in menuList"
                    :key="index"
                    @click="onMenuItemClick(index)"
                    v-text="item.name"
                ></view>
            </view>
        </tui-bubble-popup>
    </view>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        menuList: {
            type: Array,
            default: () => []
        },
        currentMenu: {
            type: Number,
            default: 0
        }
    },
    model: {
        event: 'input',
        prop: 'value'
    },
    data() {
        return {
            showBubblePopup: false
        }
    },
    computed: {
        // 当前选中菜单
        menuName() {
            return this.menuList[this.currentMenu].name
        },
        // 显示输入框clear按钮
        showClearBtn() {
            return this.value.length > 0
        }
    },
    methods: {
        // menu-item 点击事件
        onMenuItemClick(index) {
            this.showBubblePopup = false
            this.$emit('menuClick', index)
        },

        cursor() {}
    }
}
</script>

<style lang="scss" scoped>
.search-header {
    position: relative;
    z-index: 9;
}

.search-container {
    width: 100%;
    box-sizing: border-box;
    padding: 10rpx 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 86rpx;
    background: #fff;

    .search-tab {
        font-size: 30rpx;
        color: #666;
        flex-shrink: 0;

        .icon-xiangxiajiantou {
            font-size: 34rpx;
            color: #666;
            margin-left: 10rpx;
        }
    }
    .search-control {
        width: 473rpx;
        height: 100%;
        background: #f7f7f7;
        border-radius: 33rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon-sousuo {
            display: block;
            width: 36rpx;
            margin-left: 32rpx;
            margin-right: 16rpx;
            flex-shrink: 0;
            color: #999999;
        }

        .icon-shanchu1 {
            width: 36rpx;
            margin: 0 12rpx;
            flex-shrink: 0;
            color: #999999;
        }

        .control {
            flex: 1;
            height: 100%;
            font-size: 28rpx;
            color: #333333;
        }
    }
    .search-submit {
        font-size: 30rpx;
        color: #e15616;
        flex-shrink: 0;
    }
}

.bubble-popup-container {
    padding: 10rpx 0;
    .menu-item {
        text-align: center;
        line-height: 60rpx;
        font-size: 28rpx;
    }
}
</style>