AutoComplete.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <span>
  3. <slot>
  4. <input>
  5. </slot>
  6. </span>
  7. </template>
  8. <script>
  9. import commonMixin from '../base/mixins/common.js'
  10. import bindEvents from '../base/bindEvent.js'
  11. export default {
  12. name: 'bm-autocomplete',
  13. mixins: [commonMixin()],
  14. props: {
  15. types: {
  16. type: String
  17. },
  18. location: {
  19. type: String
  20. },
  21. sugStyle: {
  22. type: Object,
  23. default () {
  24. return {}
  25. }
  26. }
  27. },
  28. watch: {
  29. types () {
  30. this.reload()
  31. },
  32. location () {
  33. this.reload()
  34. }
  35. },
  36. methods: {
  37. load () {
  38. const {BMap, map, $el, types, location, sugStyle} = this
  39. const input = $el.querySelector('input')
  40. if (!input) {
  41. return
  42. }
  43. this.originInstance = new BMap.Autocomplete({
  44. input,
  45. types,
  46. location: location || map,
  47. onSearchComplete: e => {
  48. const $sugs = document.querySelectorAll('.tangram-suggestion-main')
  49. for (const $sug of $sugs) {
  50. for (const name in sugStyle) {
  51. $sug.style[name] = sugStyle[name].toString()
  52. }
  53. }
  54. this.$emit('searchcomplete', e)
  55. }
  56. })
  57. // Support v-model
  58. this.originInstance.addEventListener('onconfirm', e => {
  59. const val = e.item.value
  60. this.$emit('input', val.province + val.city + val.district + val.street + val.business)
  61. })
  62. bindEvents.call(this, this.originInstance)
  63. }
  64. }
  65. }
  66. </script>