SearchBar

搜索框。

引入

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

例子

  1. <template>
  2. <div>
  3. <wv-search-bar
  4. :autofocus="false"
  5. v-model="value"
  6. :result="filterResult"
  7. @search="onSearch"
  8. @cancel="onCancel"
  9. />
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. data () {
  15. return {
  16. value: '',
  17. defaultResult: [
  18. 'Apple',
  19. 'Banana',
  20. 'Orange',
  21. 'Durian',
  22. 'Lemon',
  23. 'Peach',
  24. 'Cherry',
  25. 'Berry',
  26. 'Core',
  27. 'Fig',
  28. 'Haw',
  29. 'Melon',
  30. 'Plum',
  31. 'Pear',
  32. 'Peanut',
  33. 'Other'
  34. ]
  35. }
  36. },
  37. computed: {
  38. filterResult () {
  39. return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value))
  40. }
  41. },
  42. methods: {
  43. onSearch (val) {
  44. // 自定义搜索处理
  45. },
  46. onCancel () {
  47. // 自定义取消事件处理
  48. }
  49. }
  50. }
  51. </script>

API

参数类型说明可选值默认值
autofocusBoolean自动激活输入框false
showBoolean始终显示结果列表false
placeholderString占位提示文字'搜索'
cancel-textString取消按钮文字'取消'
resultArray结果
result-text-keyString结果列表显示字段对应的 key(结果为对象数组时用)

Slots

name描述
-结果列表位

Events

事件名说明参数
click-result点击搜索结果项事件所点击的搜索结果项
search点击搜索按钮时触发当前搜索框值
cancel点击取消时触发