hongze_yb_xcx/components/searchBox/searchBox.vue

<template>
    <view :class="['flex search-box',isFocus||searchVal?'search-focus':'']">
        <image 
            class="search-icon" 
            :src="isFocus||searchVal?'../../static/search-icon-s.png':'../../static/search-icon.png'" 
            mode="aspectFill"
        />
        <input 
            type="text" 
            :maxlength="-1"
            v-model="searchVal" 
            :placeholder="placeholder" 
            :focus="isFocus" 
            @focus="handelFocus"
            @blur="handelBlur"
            @confirm="handleSearch"
            @input="handleInput"
            confirm-type="search"
            :disabled="disabled"
        />
        <image 
            class="search-clear" 
            src="../../static/search-del.png" 
            mode="aspectFill"
            v-if="searchVal"
            @click="handleClearSearch"
        />
        <view class="right-btn" v-if="hasRightBtn&&searchVal" @click="handleSearch">搜索</view>
    </view>
</template>

<script>
export default {
    props: {
        hasRightBtn:{
            type:Boolean,
            default:true
        },
        placeholder:{
            type:String,
            default:'请输入搜索关键词'
        },
        focus:{
            type:Boolean,
            default:false
        },
        disabled:{
            type:Boolean,
            default:false
        }
    },
    data () {
        return {
            searchVal:'',
            isFocus:this.focus
        }
    },
    methods: {
        handleClearSearch(){
            this.searchVal=''
            this.$emit('change',this.searchVal)
            this.$emit('search')
        },

        handleInput(){
            this.$emit('change',this.searchVal)
        },

        handelFocus(){
            this.isFocus=true
        },

        handelBlur(){
            this.isFocus=false
        },

        handleSearch(){
            this.$emit('search')
        }
    }
}
</script>

<style lang="scss" scoped>
.search-box{
    border: 1px solid #E5E5E5;
    align-items: center;
    background-color: #F6F6F6;
    border-radius: 43rpx;
    padding: 0 30rpx;
    height: 70rpx;
    .search-icon{
        width: 48rpx;
        height: 48rpx;
        flex-shrink: 0;
        margin-right: 5rpx;
    }
    input{
        flex: 1;
    }
    .search-clear{
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
        margin-left: 5rpx;
        margin-right: 20rpx;
    }
    .right-btn{
        font-size: 28rpx;
        color: #E3B377;
        flex-shrink: 0;
        border-left: 1px solid #999999;
        padding-left: 20rpx;
    }
}
.search-focus{
    border-color: #E3B377;
    background-color: #fff;
}
</style>