index.js 4.0 KB

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