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

<template>
    <view class="simple-search">
        <view class="search-control">
            <text class="iconfont icon-sousuo"></text>
            <input
                class="control"
                type="text"
                v-model="inputValue"
                :placeholder="placeholder"
                placeholder-class="placeholder"
                @change="$emit('input', $event.target.value)"
                @input="$emit('input', $event.target.value)"
                @confirm="onConfirm"
                :confirm-hold="true"
                confirm-type="search"
            />
            <text class="iconfont icon-quxiao" @click="onCancel" v-if="inputValue"></text>
        </view>
        <view class="cancel" v-if="isSearch" @click="onCancel">取消</view>
    </view>
</template>

<script>
export default {
    name: 'cm-simple-search',
    props: {
        value: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '搜索商品'
        }
    },
    data() {
        return {
            isSearch: false,
            inputValue: ''
        }
    },
    created() {
        this.inputValue = this.value
    },
    methods: {
        onConfirm() {
            if (!this.inputValue) return
            this.$emit('search')
            this.isSearch = true
        },
        onCancel() {
            this.$emit('cancel')
            this.isSearch = false
            this.inputValue = ''
        }
    }
}
</script>

<style lang="scss" scoped>
.simple-search {
    @extend .cm-flex-center;
    height: 100rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    background-color: #fff;
    .search-control {
        @extend .cm-flex-between;
        flex: 1;
        height: 66rpx;
        line-height: 66rpx;
        box-sizing: border-box;
        background: #f7f7f7;
        border-radius: 33px;

        .control {
            flex: 1;
            color: #333;
            font-size: 28rpx;
        }

        .iconfont {
            @extend .cm-flex-center;
            width: 66rpx;
            color: #999;
        }
    }

    .cancel {
        width: 80rpx;
        line-height: 66rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333;
    }
}
</style>