caimei-applets-hehe/components/cm-module/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"
                    v-model="inputValue"
                    :focus="true"
                />
                <text v-if="clearable && inputValue" class="clearable iconfont icon-quxiao" @click="clearValue"></text>
            </view>
            <view class="search-btn" @click="handleSearch(inputValue)">搜索</view>
        </view>

        <template v-if="keywordVisible">
            <view class="hot-keyword">
                <view class="title"> <text>搜索历史</text> <text class="clear iconfont icon-shanchu"></text> </view>
                <view class="keyword-list"> <view class="keyword" @click="handleSearch('测试')">测试</view> </view>
            </view>
            <view class="mask"></view>
        </template>
    </view>
</template>

<script>
export default {
    name: 'CmSearch',
    props: {
        // 占位字符
        placeholder: {
            type: String,
            default: '请输入搜索关键字'
        },
        clearable: {
            type: Boolean,
            default: true
        },

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

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

        keywordVisible: {
            type: Boolean,
            default: true
        }
    },
    watch:{
        inputValue(nVal){
            this.$emit('input', nVal)
        }
    },
    data(){
        return {
            inputValue: ''
        }
    },
    methods: {
        clearValue() {
            this.inputValue = ''
            this.$emit('input', '')
        },
        handleClick() {
            if (!this.disabled) return
            this.$emit('goSearch')
        },
        handleSearch() {
            if (this.disabled) return
        }
    }
}
</script>

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

    .hot-keyword {
        position: relative;
        z-index: 999;
        width: 100%;
        background: #fff;
        border-top: 1px solid #f7f7f7;

        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;
        top: 0;
        left: 0;
        z-index: 998;
    }

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

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

        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>