? 写一个扩展性较强的搜索主页

Posted 2020-12-10

前置

• 点击按钮切换搜索引擎
• 搜索框跟随切换改变样式
• 使用 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 时发起搜索。

预览地址

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