搜索相关 SearchBar

SearchBar

搜索框。

引入

import { SearchBar } from 'we-vue'
Vue.use(SearchBar)

例子

<template>
  <div>
    <w-search-bar 
      :autofocus="false" 
      v-model="value" 
      :result="filterResult"
      @search="onSearch"
      @cancel="onCancel"
    />
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: '',
      defaultResult: [
        'Apple',
        'Banana',
        'Orange',
        'Durian',
        'Lemon',
        'Peach',
        'Cherry',
        'Berry',
        'Core',
        'Fig',
        'Haw',
        'Melon',
        'Plum',
        'Pear',
        'Peanut',
        'Other'
      ]
    }
  },
  computed: {
    filterResult () {
      return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value))
    }
  },
  methods: {
    onSearch (val) {
      // 自定义搜索处理
    },
    onCancel () {
      // 自定义取消事件处理
    }
  }
}
</script>

API

Slots

Events