index.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. Component({
  2. behaviors: ['wx://form-field'],
  3. externalClasses: ['l-class', 'l-disabled-class'],
  4. relations: {
  5. '../checkbox-group/index': {
  6. type: 'parent'
  7. }
  8. },
  9. options: {
  10. multipleSlots: true
  11. },
  12. properties: {
  13. // checkbox 按钮的位置
  14. placement: {
  15. type: String,
  16. value: 'left'
  17. },
  18. // 是否自定义图标内容
  19. custom: {
  20. type: Boolean,
  21. value: false
  22. },
  23. key: {
  24. type: String,
  25. value: ''
  26. },
  27. cell: {
  28. type: Object,
  29. value: {}
  30. },
  31. // checkbox的大小
  32. size: {
  33. type: String,
  34. value: '38rpx'
  35. },
  36. // 不可选状态
  37. disabled: {
  38. type: Boolean,
  39. value: false
  40. },
  41. // 选中后的颜色
  42. selectColor: {
  43. type: String,
  44. value: '#3963BC'
  45. },
  46. disabledColor: {
  47. type: String,
  48. value: '#ccc'
  49. },
  50. color: {
  51. type: String,
  52. value: '#ccc'
  53. },
  54. checked: {
  55. type: Boolean,
  56. value: false
  57. }
  58. },
  59. data: {
  60. parentPlacement: ''
  61. },
  62. ready() {
  63. const parent = this.getRelationNodes('../checkbox-group/index')[0];
  64. let {placement:parentPlacement} = parent.properties;
  65. this.setData({parentPlacement});
  66. },
  67. methods: {
  68. // 点击checkbox
  69. onCheckboxChangeTap() {
  70. if (this.properties.disabled || this.data.parentDisabled) {
  71. return;
  72. }
  73. const parent = this.getRelationNodes('../checkbox-group/index')[0];
  74. if(this.properties.checked) {
  75. if(this.isOverflow('minSelected')) return;
  76. } else {
  77. if(this.isOverflow('maxSelected')) return;
  78. }
  79. const item = {
  80. checked: !this.properties.checked,
  81. key: this.properties.key,
  82. cell: this.properties.cell
  83. };
  84. if (parent) {
  85. parent.onEmitEventHandle(item);
  86. }
  87. },
  88. /**
  89. *
  90. * @param {*} type (max/min)
  91. */
  92. isOverflow(type) {
  93. const parent = this.getRelationNodes('../checkbox-group/index')[0];
  94. const limit = parent.properties[type];
  95. if (!limit) return false;
  96. const selectedLength = parent._selected();
  97. let isOverflow = type === 'minSelected' ? selectedLength <= limit : selectedLength >= limit;
  98. if (isOverflow) {
  99. let backType = type === 'minSelected' ? 'min_selected' : 'max_selected';
  100. parent.onEmitOverflowHandle && parent.onEmitOverflowHandle({key: this.properties.key, limitNumber: limit, type: `overflow_${backType}`});
  101. }
  102. return isOverflow;
  103. }
  104. }
  105. });