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

转载

mob604756f4c9c3 2021-05-22 10:27:11

文章标签 搜索主页 文章分类 前端开发

前置

点击按钮切换搜索引擎
搜索框跟随切换改变样式
使用 vue 最快了

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

template

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

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

{{ item.name }}

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