radio.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import { UtilTools } from '../../tools'
  2. import GlobalConfig from '../../v-x-e-table/src/conf'
  3. import vSize from '../../mixins/size'
  4. export default {
  5. name: 'VxeRadio',
  6. mixins: [vSize],
  7. props: {
  8. value: [String, Number, Boolean],
  9. label: [String, Number, Boolean],
  10. title: [String, Number],
  11. content: [String, Number],
  12. disabled: Boolean,
  13. name: String,
  14. size: { type: String, default: () => GlobalConfig.radio.size || GlobalConfig.size }
  15. },
  16. inject: {
  17. $xeradiogroup: {
  18. default: null
  19. }
  20. },
  21. computed: {
  22. isDisabled () {
  23. const { $xeradiogroup } = this
  24. return this.disabled || ($xeradiogroup && $xeradiogroup.disabled)
  25. }
  26. },
  27. render (h) {
  28. const { $scopedSlots, $xeradiogroup, isDisabled, title, vSize, value, label, name, content } = this
  29. const attrs = {}
  30. if (title) {
  31. attrs.title = title
  32. }
  33. return h('label', {
  34. class: ['vxe-radio', {
  35. [`size--${vSize}`]: vSize,
  36. 'is--disabled': isDisabled
  37. }],
  38. attrs
  39. }, [
  40. h('input', {
  41. class: 'vxe-radio--input',
  42. attrs: {
  43. type: 'radio',
  44. name: $xeradiogroup ? $xeradiogroup.name : name,
  45. disabled: isDisabled
  46. },
  47. domProps: {
  48. checked: $xeradiogroup ? $xeradiogroup.value === label : value === label
  49. },
  50. on: {
  51. change: evnt => {
  52. if (!isDisabled) {
  53. const params = { label, $event: evnt }
  54. if ($xeradiogroup) {
  55. $xeradiogroup.handleChecked(params)
  56. } else {
  57. this.$emit('input', label)
  58. this.$emit('change', params)
  59. }
  60. }
  61. }
  62. }
  63. }),
  64. h('span', {
  65. class: 'vxe-radio--icon'
  66. }),
  67. h('span', {
  68. class: 'vxe-radio--label'
  69. }, $scopedSlots.default ? $scopedSlots.default.call(this, {}) : [UtilTools.getFuncText(content)])
  70. ])
  71. },
  72. methods: {
  73. changeEvent (evnt) {
  74. const { $xeradiogroup, isDisabled, label } = this
  75. if (!isDisabled) {
  76. const params = { label, $event: evnt }
  77. if ($xeradiogroup) {
  78. $xeradiogroup.handleChecked(params)
  79. } else {
  80. this.$emit('input', label)
  81. this.$emit('change', params)
  82. }
  83. }
  84. }
  85. }
  86. }