caimei-applets-store/components/views/cm-search/cm-search.vue

<template>
    <view class="cm-search">
        <view class="search-control" @click.stop="handleClick">
            <view class="search-input">
                <text class="search-icon iconfont icon-sousuo"></text>
                <input
                    type="text"
                    confirm-type="search"
                    :placeholder="placeholder"
                    :value="value"
                    @input="e => $emit('input', e.target.value)"
                    @focus="$emit('focus')"
                    @confirm="handleSearch"
                />
                <text v-if="clearable && value" class="clearable iconfont icon-quxiao" @click="clearValue"></text>
            </view>
            <view class="search-btn" @click="handleSearch(value)">搜索</view>
        </view>

        <template v-if="keywordVisible && keywordList.length > 0">
            <view class="hot-keyword">
                <view class="title">
                    <text>搜索历史</text>
                    <text class="clear iconfont icon-shanchu" @click="$emit('remove')"></text>
                </view>
                <view class="keyword-list">
                    <view
                        class="keyword"
                        v-for="(keyword, index) in keywordList"
                        v-text="keyword"
                        :key="index"
                        @click="handleSearch(keyword)"
                    ></view>
                </view>
            </view>
            <view class="mask"></view>
        </template>
    </view>
</template>

<script>
export default {
    name: 'cm-search',
    model: {
        prop: 'value',
        event: 'input'
    },
    props: {
        value: {
            typs: String,
            default: ''
        },
        // 占位字符
        placeholder: {
            type: String,
            default: '请输入搜索关键字'
        },
        clearable: {
            type: Boolean,
            default: true
        },

        disabled: {
            type: Boolean,
            default: false
        },

        keywordList: {
            type: Array,
            default: () => []
        },

        keywordVisible: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        // 清空
        clearValue() {
            this.$emit('input', '')
            this.$emit('clear')
        },
        // 搜索
        handleClick() {
            if (!this.disabled) return
            this.$emit('goSearch')
        },
        // 关键词搜索
        handleSearch(keyword) {
            if (this.disabled) return
            this.$emit('input', keyword)
            this.$emit('search')
        }
    }
}
</script>

<style lang="scss" scoped>
.cm-search {
    position: relative;

    .hot-keyword {
        position: relative;
        z-index: 999;
        width: 100%;
        background: #fff;

        box-sizing: border-box;
        padding: 0 24rpx 32rpx;

        .title {
            position: relative;
            font-size: 26rpx;
            padding: 24rpx 0;
            color: #333;
            font-weight: bold;

            .clear {
                position: absolute;
                font-weight: normal;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        .keyword {
            display: inline-block;
            margin-right: 18rpx;
            font-size: 24rpx;
            line-height: 40rpx;
            padding: 0 16rpx;
            border-radius: 20rpx;
            background: #eee;
            color: #333;
        }
    }

    .mask {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 998;
        background: #f7f7f7;
    }

    .search-control {
        position: relative;
        z-index: 999;

        border-bottom: 1rpx solid #f7f7f7;

        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90rpx;
        background: #fff;

        box-sizing: border-box;

        padding: 0 24rpx;

        .search-input {
            flex: 1;
            height: 60rpx;
            line-height: 60rpx;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 74rpx;
            font-size: 26rpx;
            border-radius: 30rpx;
            background: #f7f7f7;

            input {
                width: 100%;
            }

            .search-icon,
            .clearable {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 9;
            }

            .search-icon {
                left: 24rpx;
            }

            .clearable {
                right: 24rpx;
                color: #ccc;
            }
        }

        .search-btn {
            text-align: center;
            width: 60rpx;
            height: 60rpx;
            line-height: 60rpx;
            margin-left: 16rpx;
            font-size: 26rpx;
        }
    }
}
</style>