前置
- 點擊按鈕切換搜索引擎
- 搜索框跟隨切換改變樣式
使用 vue 最快了
template
為了方便擴展，使用 v-for 回圈渲染出按鈕，系結切換搜索引擎的 method ， 傳入不同名稱以區別搜索引擎，按鈕的樣式也動態系結，
輸入框動態系結樣式，在點擊按鈕切換搜索引擎時，搜索框系結的樣式對應的 data 改變，
<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>
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 時發起搜索，
預覽地址
如果你有建議歡迎指教，謝謝 ??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/65742.html
標籤：JavaScript
上一篇：Vue3教程，搶先學習
下一篇：electron-vue報錯：Webpack ReferenceError: process is not defined