vue App搜索组件封装

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/QQ_Empire/article/details/100920589

 1、组件封装

<template>
    <div class="search_wrop">
        <div class="left">
            <img src="../assets/mine/search.png" alt="">
        </div>
        <div class="middle">
            <input type="text" :placeholder="placeholder" v-model="value" @input="input">
        </div>
        <div class="right" v-if="keyworld">
            <img src="../assets/mine/delete.png" alt="" @click="delFun">
        </div>
    </div>
</template>
<script>
export default {
    props:['placeholder','keyworld'],
    data(){
        return{ 
           value:''
        }
    },
    methods:{
        input(){
            this.$emit('input',this.value)
        },
        delFun(){
           this.value = ''
           this.$emit('input',this.value)
        },
    },
    watch:{
        keyworld(value){
           this.value = value;
        }
    }
}
</script>
<style lang="less" scoped>
.search_wrop{
     border-bottom: 1*@toVw solid #F2F2F2;
     width: 100%;
     height: 32*@toVw;
     background: #fff;
     padding-left:5*@toVw;
     display: flex;
     justify-content: space-between;
     .left{
         width: 30*@toVw;
         height: 30*@toVw;
         display: flex;
         align-items: center;
     };
     .middle{
         width: 100%;
         height: 30*@toVw;
         display: flex;
         align-items: center;
         input{
             width: 100%;
             height: 30*@toVw;
             outline: none;
             border:0;
             font-size: 14*@toVw;
         }
     }
     .right{
         width: 30*@toVw;
         height: 30*@toVw;
         display: flex;
         align-items: center;
     };
     img{
         width: 16*@toVw;
         height: 16*@toVw;
     }
 }
</style>

2、组件使用

<template>
    <div>
       
       <search placeholder='XXXXX'   @input="blurFun"  :keyworld="keyworldVal" ></search>

    </div>
</template>
<script>
import search from '../../../components/LjSearch'

export default {
    name:"",

    components:{search},
    data(){
       return{
            keyworldVal:'sssss'
       }
    },
    methods:{
      //获取搜素值
       blurFun(value){
           console.log('blur',value)

           this.keyworldVal = value;
       }
    },
   
}
</script>

<style lang="less" scoped>


</style>

---

3、效果图

---