接上一篇,完成logo部分我们就要开始整个项目的核心——panel组件。
注意使用相对路径不要照搬。
顺便加上一个“X”span,方便清空输入栏:
这里比较偷懒用了个X字符代替清除按钮,对样式有追求的童鞋可以找个美观的图片,其他不变。
整个panel组件分为3个部分:关键字输入框,相关搜索建议下拉列表和搜索跳转按钮。
由于我们整个项目是设计成父子组件的架构所以在父组件即panel部分开头需要引入子组件:
HTML:
<logo-select @logoNow="changeSource"></logo-select>
import logoSelect from './logo-new.vue';
export default {
components: {
logoSelect //等价于logoSelect: logoSelect
}
注意使用相对路径不要照搬。
目前的效果如下。
接下来做我们的搜索框,这一步比较简单,设置一个input再用v-model做一个双向绑定到data:
<input type="text" v-model="msgInput">
data: function () {
return {
msgInput: '',
...
}
}
顺便加上一个“X”span,方便清空输入栏:
<span class="markDelete" @click="clearInput">x</span>
methods: {
clearInput: function () {
this.msgInput = '',//清空输入框
this.results = ''//清空搜索建议数组
},
...
}
这里比较偷懒用了个X字符代替清除按钮,对样式有追求的童鞋可以找个美观的图片,其他不变。
接下来就是核心功能:如何输入关键字就能自动弹出下拉菜单并且给出搜索建议?
由于我们要做的动态搜索建议,必然要使用其他搜索引擎的接口,那么跨域就成了主要技术难点。
翻阅了相关资料,使用jsonp跨域最为方便,Vue使用jsonp就要考虑vue-resource;
如果是第一次使用就要命令行安装:
npm install vue-resource --save
先在main.js引入vue-resource:
var vueResource = require('vue-resource');
Vue.use(vueResource);
<