vxe-table/packages/radio/src/button.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

import { UtilTools } from '../../tools'
import GlobalConfig from '../../conf'

export default {
  name: 'VxeRadioButton',
  props: {
    value: [String, Number, Boolean],
    label: [String, Number, Boolean],
    title: [String, Number],
    content: [String, Number],
    disabled: Boolean,
    size: { type: String, default: () => GlobalConfig.radio.size || GlobalConfig.size }
  },
  inject: {
    $xeradiogroup: {
      default: null
    }
  },
  computed: {
    vSize () {
      return this.size || this.$parent.size || this.$parent.vSize
    },
    isDisabled () {
      const { $xeradiogroup } = this
      return this.disabled || ($xeradiogroup && $xeradiogroup.disabled)
    }
  },
  render (h) {
    const { $slots, $xeradiogroup, isDisabled, title, vSize, value, label, content } = this
    const attrs = {}
    if (title) {
      attrs.title = title
    }
    return h('label', {
      class: ['vxe-radio', 'vxe-radio-button', {
        [`size--${vSize}`]: vSize,
        'is--disabled': isDisabled
      }],
      attrs
    }, [
      h('input', {
        class: 'vxe-radio--input',
        attrs: {
          type: 'radio',
          name: $xeradiogroup ? $xeradiogroup.name : null,
          disabled: isDisabled
        },
        domProps: {
          checked: $xeradiogroup ? $xeradiogroup.value === label : value === label
        },
        on: {
          change: this.changeEvent
        }
      }),
      h('span', {
        class: 'vxe-radio--label'
      }, $slots.default || [UtilTools.getFuncText(content)])
    ])
  },
  methods: {
    changeEvent (evnt) {
      const { $xeradiogroup, isDisabled, label } = this
      if (!isDisabled) {
        const params = { label, $event: evnt }
        if ($xeradiogroup) {
          $xeradiogroup.handleChecked(params)
        } else {
          this.$emit('input', label)
          this.$emit('change', params)
        }
      }
    }
  }
}