为了方便扩展,使用 v-for
循环渲染出按钮,绑定切换搜索引擎的 method , 传入不一样名称以区别搜索引擎。按钮的样式也动态绑定。javascript
输入框动态绑定样式,在点击按钮切换搜索引擎时,搜索框绑定的样式对应的 data 改变。css
<template> <section id="search-wrapper"> <el-row class="search-wrapper-row"> <el-row style="margin-bottom: 10px"> <el-button size="mini" type="primary" v-for="(item, index) in source" @click="changeSource(item.name)" :key="index" :style=" `background:${item.color};border-color:${item.color}` " >{{ item.name }}</el-button > </el-row> <el-input :placeholder="searchbarStyle.placeholder" :class="searchbarStyle.className" v-model="searchValue" clearable> <el-button @click="submit" slot="append" icon="el-icon-search"></el-button> </el-input> </el-row> </section> </template>
datahtml
v-model
绑定的搜索内容methodsvue
changeSource 点击按钮时触发,接收搜索引擎 name, 内部使用 Map,匹配对应的函数,在函数中更改 baseUrl 和 searchbarStyle,因为在 template 动态绑定了 searchbarStyle,这样就能根据所选择的搜索类型改变搜索框的样式了。java
export default { data() { return { baseUrl: 'https://www.baidu.com/s?ie=UTF-8&wd=', searchValue: '', searchbarStyle: { className: 'baidu', placeholder: '百度一下,你就知道', }, source: [ { name: '百度', color: '#2932E1', }, { name: '必应', color: '#0c8484', }, { name: '搜狗', color: '#FF6F17', }, { name: '谷歌', color: '#4285F4', }, { name: 'NPM', color: '#EA4335', }, ], } }, methods: { changeSource(name) { const actions = new Map([ [ '百度', () => { this.baseUrl = 'https://www.baidu.com/s?ie=UTF-8&wd=' this.searchbarStyle = { className: 'baidu', placeholder: '百度一下,你就知道', } }, ], [ '必应', () => { this.baseUrl = 'https://cn.bing.com/search?FORM=BESBTB&q=' this.searchbarStyle = { className: 'bing', placeholder: '必应搜索', } }, ], [ '搜狗', () => { this.baseUrl = 'https://www.sogou.com/web?query=' this.searchbarStyle = { className: 'sougou', placeholder: '搜狗搜索', } }, ], [ '谷歌', () => { this.baseUrl = 'https://www.google.com/search?q=' this.searchbarStyle = { className: 'google', placeholder: 'Google Search', } }, ], [ 'NPM', () => { this.baseUrl = 'https://www.npmjs.com/search?q=' this.searchbarStyle = { className: 'npm', placeholder: 'Search Packages', } }, ], ]) actions.get(name)() }, submit() { const url = this.baseUrl + this.searchValue window.open(url) }, }, }
在 searchbarStyle 对象中有个 className 字段,input 会动态绑定与之对应的 css class。好比选择百度时对应 .baidu
, 选择必应时对应 .bing
etc. 因为使用了 scss 预处理器,经过 @each
循环它们就行了。git
$sources-color: ( baidu: #2932e1, bing: #0c8484, sougou: #ff6f17, google: #4285f4, npm: #ea4335, ); $source-list: baidu bing sougou google npm; @each $source in $source-list { .#{$source} { .el-input-group__append, input { border-color: map-get($sources-color, $source); &:hover { border-color: map-get($sources-color, $source); } } .el-icon-search { color: map-get($sources-color, $source); &:hover { border-color: map-get($sources-color, $source); } } } }
搜索引擎在搜索时并非简单的 baseUrl + 搜索内容的形式,url 中还携带了其余参数。web
数据能够单独抽离, 使用 export 导出并引入, 这样 .vue
看起来不会太长,易于维护。npm
能够绑定按下 enter 时发起搜索。数组
预览地址app
若是你有建议欢迎指教,谢谢 💗