select-menu.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import baseComponent from '../helpers/baseComponent'
  2. import { POPUP_SELECTOR, getDefaultProps } from './utils'
  3. baseComponent({
  4. useExport: true,
  5. properties: {
  6. height: {
  7. type: Number,
  8. value: 270,
  9. },
  10. ...getDefaultProps(),
  11. },
  12. data: {
  13. scrollTop: 0,
  14. },
  15. methods: {
  16. onValueChange(e) {
  17. const { max, multiple } = this.data
  18. const { selectedValue: value } = e.detail
  19. if (multiple && max >= 1 && max < value.length) { return }
  20. this.triggerEvent('selectChange', this.getValue(value))
  21. },
  22. getValue(value = this.data.value, cols = this.data.options) {
  23. this.picker = this.picker || this.querySelector(POPUP_SELECTOR)
  24. return this.picker && this.picker.getValue(value, cols)
  25. },
  26. expose() {
  27. const scrollToItem = (index) => {
  28. const scrollIntoView = (index, height) => {
  29. const { options } = this.data
  30. const nums = options.length
  31. // scroll into view
  32. let activeIndex = Array.isArray(index) ? index[index.length - 1] : index
  33. if (activeIndex === -1 || activeIndex === undefined) {
  34. activeIndex = 0
  35. }
  36. // set scrollTop
  37. const scrollTop = nums >= 1 ? parseFloat(height / nums * activeIndex) : 0
  38. if (this.data.scrollTop !== scrollTop) {
  39. this.setData({ scrollTop })
  40. }
  41. }
  42. const getBoundingClientRect = (cb) => {
  43. const ref = this.querySelector(POPUP_SELECTOR)
  44. return ref && ref.getBoundingClientRect && ref.getBoundingClientRect(cb)
  45. }
  46. getBoundingClientRect((height) => {
  47. scrollIntoView(index, height)
  48. })
  49. }
  50. return {
  51. scrollToItem,
  52. getValue: this.getValue.bind(this),
  53. }
  54. },
  55. },
  56. })