实现的搜索组件效果如下:
可以看到。搜索组件是由两个主要部分组成的。一个是input输入框。一个是text的按钮。搜索按钮的作用是在点击搜索的时候把输入框里面的内容提取出来。传递给父组件。让父组件去实现搜索功能的逻辑。
search.we代码如下:
<template>
<div class="maindiv">
<div class="searchdiv">
<img src="http://183.250.161.187:1418/zadb/images/mobile/query.png" style="width:50;height:50;"/>
<input class="input" id="searchinput" type="text" placeholder="搜索" οninput="input"/>
</div>
<text class="searchtextbtn" οnclick="searchEvent">搜索</text>
</div>
</template>
<script>
module.exports = {
data: {
search: 'search'
},
methods: {
input: function () {
},
searchEvent: function () { //搜索事件
var self = this;
self.$dispatch('search', { //把搜素框里面的数据传递给父组件
value: self.$el('searchinput').attr.value
});
}
}
}
</script>
<style>
.maindiv {
flex-direction: row;
align-items: center;
}
.searchdiv {
flex-direction: row;
border-radius: 10px;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
align-items: center;
background-color: #ffffff;
border-width: 1px;
border-color: #888;
padding: 10px;
}
.input {
width: 520px;
font-size: 30px;
height: 50px;
outline-color: #FFFFFF;
}
.searchtextbtn {
font-size: 40px;
}
</style>
可以看到searchEvent方法里面用dispath方法把点击事件分发出去,并且传递了一个value值,也就是输入框里面的内容。然后让父组件去实现获取search方法,并取得value的值,调用代码如下:
<template>
<search></search>
</template>
<script>
require('./../components/search.we');
module.exports = {
data: {},
created: function () {
this.$on('search', function (e) {
console.log('search = '+e.detail.value);
});
},
methods: {}
}
</script>
然后就可以在控制台看到在搜索框输入的东西了