index.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import hover from '../behaviors/hover';
  2. Component({
  3. options: {
  4. multipleSlots: true // 在组件定义时的选项中启用多slot支持
  5. },
  6. behaviors: [hover],
  7. relations: {
  8. '../grid-item/index': {
  9. type: 'child',
  10. linked() {
  11. this.initGrids();
  12. },
  13. unlinked() {
  14. this.initGrids();
  15. }
  16. },
  17. },
  18. externalClasses: ['l-class', 'l-class-grid', 'l-grid-class'],
  19. properties: {
  20. rowNum: {
  21. type: String,
  22. value: 3,
  23. },
  24. showBorder: Boolean,
  25. showColBorder: Boolean,
  26. showRowBorder: Boolean,
  27. },
  28. data: {
  29. gridItems: [],
  30. childNum: 0,
  31. currentIndex: -1,
  32. currentCell: -1,
  33. },
  34. ready() {
  35. this.initGrids();
  36. },
  37. lifetimes: {
  38. show() {
  39. },
  40. },
  41. methods: {
  42. initGrids() {
  43. let items = this.getRelationNodes('../grid-item/index');
  44. if (this.data.childNum === items.length) return;
  45. const gridItems = items.map((item, index) => {
  46. item.setData({
  47. index,
  48. });
  49. return {
  50. index:index,
  51. key: item.data.key,
  52. cell: item.data.cell
  53. };
  54. });
  55. this.setData({
  56. gridItems: gridItems,
  57. childNum: items.length
  58. });
  59. },
  60. tapGridItem(e) {
  61. const { gridIndex } = e.target.dataset;
  62. this.setData({
  63. currentIndex: gridIndex,
  64. currentCell: this.data.gridItems[gridIndex].cell
  65. });
  66. },
  67. tapGrid() {
  68. this.triggerEvent('lintap', {
  69. index: this.data.currentIndex,
  70. cell: this.data.currentCell
  71. }, { bubbles: true, composed: true });
  72. this.setData({
  73. currentIndex: -1,
  74. currentCell: -1
  75. });
  76. }
  77. }
  78. });