index.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. import { useRect } from '../helpers/hooks/useDOM'
  4. baseComponent({
  5. relations: {
  6. '../index/index': {
  7. type: 'parent',
  8. },
  9. },
  10. properties: {
  11. prefixCls: {
  12. type: String,
  13. value: 'wux-index-item',
  14. },
  15. name: {
  16. type: String,
  17. value: '',
  18. },
  19. },
  20. data: {
  21. index: 0,
  22. top: 0,
  23. height: 0,
  24. brief: '',
  25. },
  26. observers: {
  27. ['name, index, top, height'](name, index) {
  28. const brief = name ? name.charAt(0) : index
  29. if (brief !== this.data.brief) {
  30. this.setData({
  31. brief,
  32. })
  33. }
  34. const indexContext = this.getIndexContext()
  35. if (indexContext) {
  36. const { updateChildren } = indexContext.getInternalHooks('INDEX_HOOK_MARK')
  37. updateChildren()
  38. }
  39. },
  40. },
  41. computed: {
  42. classes: ['prefixCls', function(prefixCls) {
  43. const wrap = classNames(prefixCls)
  44. const hd = `${prefixCls}__hd`
  45. const bd = `${prefixCls}__bd`
  46. return {
  47. wrap,
  48. hd,
  49. bd,
  50. }
  51. }],
  52. },
  53. methods: {
  54. getIndexContext() {
  55. return this.getRelationsByName('../index/index')[0]
  56. },
  57. updated(index) {
  58. useRect(`.${this.data.prefixCls}`, this)
  59. .then((rect) => {
  60. if (!rect) return
  61. this.setData({
  62. top: rect.top,
  63. height: rect.height,
  64. index,
  65. })
  66. })
  67. },
  68. },
  69. })