版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
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>