vue开发一个搜索主页

前置

  • 点击按钮切换搜索引擎

  • 搜索框跟随切换改变样式

  • vuejs.org/images/icons/favicon-32x32.png" /> 使用 vue 最快了

template

为了方便扩展，使用 v-for 循环渲染出按钮，绑定切换搜索引擎的 method ， 传入不同名称以区别搜索引擎。按钮的样式也动态绑定。

输入框动态绑定样式，在点击按钮切换搜索引擎时，搜索框绑定的样式对应的 data 改变。

<template>
<section id="search-wrapper">
<el-row class="search-wrapper-row">
<el-row>
<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>

script

data

  • baseUrl 搜索引擎地址

  • searchValue input v-model 绑定的搜索内容

  • searchbarStyle 搜索框对应的样式，值类型为 Object, 方便扩展不同搜索框样式

  • source 按钮的样式即名称，数组对象, 方便按钮扩展

methods

changeSource 点击按钮时触发，接收搜索引擎 name， 内部使用 Map，匹配对应的函数，在函数中更改 baseUrl 和 searchbarStyle，由于在 template 动态绑定了 searchbarStyle，这样就能根据所选择的搜索类型改变搜索框的样式了。

代码块较长，我将它折叠

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)
},
},
}

style

在 searchbarStyle 对象中有个 className 字段，input 会动态绑定与之对应的 css class。比如选择百度时对应 .baidu, 选择必应时对应 .bing etc. 由于使用了 scss 预处理器，通过 @each 循环它们就好了。

$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 中还携带了其他参数。

数据可以单独抽离， 使用 export 导出并引入， 这样 .vue 看起来不会太长，易于维护。

可以绑定按下 enter 时发起搜索。

如果你有建议欢迎指教，谢谢 💗

以上是 vue开发一个搜索主页 的全部内容， 来源链接： utcz.com/a/23730.html

回到顶部