index.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. import { getDefaultContext } from '../helpers/shared/getDefaultContext'
  4. import { props as checkboxGroupProps } from '../checkbox-group/props'
  5. const defaultContext = {
  6. ...getDefaultContext(checkboxGroupProps, [
  7. 'disabled',
  8. 'readOnly',
  9. 'hasLine',
  10. // only context
  11. 'hasFieldDecorator',
  12. 'withListComponent',
  13. 'iconPosition',
  14. 'iconSize',
  15. 'iconOn',
  16. 'iconOff',
  17. ]),
  18. withListComponent: false,
  19. }
  20. baseComponent({
  21. useExport: true,
  22. relations: {
  23. '../checkbox-group/index': {
  24. type: 'ancestor',
  25. },
  26. },
  27. properties: {
  28. prefixCls: {
  29. type: String,
  30. value: 'wux-checkbox',
  31. },
  32. cellPrefixCls: {
  33. type: String,
  34. value: 'wux-cell',
  35. },
  36. selectablePrefixCls: {
  37. type: String,
  38. value: 'wux-selectable',
  39. },
  40. title: {
  41. type: String,
  42. value: '',
  43. },
  44. label: {
  45. type: String,
  46. value: '',
  47. },
  48. extra: {
  49. type: String,
  50. value: '',
  51. },
  52. value: {
  53. type: String,
  54. value: '',
  55. },
  56. checked: {
  57. type: Boolean,
  58. value: false,
  59. observer(newVal) {
  60. this.setData({
  61. inputChecked: newVal,
  62. })
  63. },
  64. },
  65. disabled: {
  66. type: Boolean,
  67. value: false,
  68. },
  69. readOnly: {
  70. type: Boolean,
  71. value: false,
  72. },
  73. color: {
  74. type: String,
  75. value: 'balanced',
  76. },
  77. wrapStyle: {
  78. type: [String, Object],
  79. value: '',
  80. },
  81. hasLine: {
  82. type: Boolean,
  83. value: true,
  84. },
  85. },
  86. data: {
  87. inputChecked: false,
  88. index: 0,
  89. isLast: false,
  90. context: defaultContext,
  91. },
  92. computed: {
  93. classes: ['prefixCls', function(prefixCls) {
  94. const cell = classNames(prefixCls)
  95. const extra = `${prefixCls}__extra`
  96. const iconPosition = `${prefixCls}__icon-position`
  97. const iconSelectable = `${prefixCls}__icon-selectable`
  98. const selectable = `${prefixCls}__selectable`
  99. const selectableH = `${prefixCls}__selectable-horizontal`
  100. return {
  101. cell,
  102. extra,
  103. iconPosition,
  104. iconSelectable,
  105. selectable,
  106. selectableH,
  107. }
  108. }],
  109. },
  110. methods: {
  111. checkboxChange(e) {
  112. const { disabled, readOnly, context } = this.data
  113. const { checked } = e.detail
  114. if (disabled || context.disabled || readOnly || context.readOnly) return
  115. this.onChange(checked)
  116. },
  117. changeValue(inputChecked = false, index = 0, isLast = false, context = defaultContext) {
  118. this.setData({
  119. inputChecked,
  120. index,
  121. isLast,
  122. context,
  123. })
  124. },
  125. onChange(inputChecked) {
  126. const { value, index } = this.data
  127. const item = {
  128. checked: inputChecked,
  129. value,
  130. index,
  131. }
  132. const parent = this.getRelationsByName('../checkbox-group/index')[0]
  133. parent ? parent.onChange(item) : this.triggerEvent('change', item)
  134. },
  135. setChecked(inputChecked) {
  136. if (this.data.inputChecked !== inputChecked) {
  137. this.setData({
  138. inputChecked,
  139. })
  140. }
  141. this.onChange(inputChecked)
  142. },
  143. check(){
  144. this.setChecked(true)
  145. },
  146. uncheck(){
  147. this.setChecked(false)
  148. },
  149. toggle(){
  150. this.setChecked(!this.data.inputChecked)
  151. },
  152. },
  153. })