@fesjs/fes-design/es/radio-button/radio-button.js

fes-design for PC

import { defineComponent, computed, createVNode } from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import { radioGroupKey, COMPONENT_NAME } from '../radio-group/const';
import useSelect from '../_util/use/useSelect';
import { useTheme } from '../_theme/useTheme';
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../_util/constants';
import { radioButtonProps } from './props';

// 样式字符串
const prefixCls = getPrefixCls('radio-button');
var radioButton = defineComponent({
  name: 'FRadioButton',
  props: radioButtonProps,
  emits: [CHANGE_EVENT, UPDATE_MODEL_EVENT],
  setup(props, _ref) {
    let {
      slots,
      emit
    } = _ref;
    const {
      checked,
      innerDisabled,
      handleClick,
      group
    } = useSelect({
      props,
      emit,
      parent: {
        groupKey: radioGroupKey,
        name: COMPONENT_NAME
      }
    });
    useTheme();

    // 按钮复合样式,根据父组件的传值
    const btnClasses = computed(() => {
      return [prefixCls, `${prefixCls}-${group.props.size}`, `${prefixCls}-${group.props.bordered ? 'border' : 'no-border'}`, innerDisabled.value && 'is-disabled', checked.value && group.props.bordered ? `is-checked-${group.props.type}-${'border'}` : '', group.props.fullLine ? 'is-flex' : ''];
    });

    // content样式
    const contentClasses = computed(() => {
      const arr = [`${prefixCls}-content`, `${prefixCls}-content-${group.props.size}`];
      // 无边框的样式
      if (!group.props.bordered && checked.value) {
        arr.push(`${prefixCls}-content-checked`);
        arr.push(`${prefixCls}-content-checked-${group.props.size}`);
        arr.push(`${prefixCls}-content-checked-${group.props.type}`);
      }
      return arr;
    });
    return () => {
      var _slots$icon, _slots$default, _slots$default2;
      return createVNode("div", {
        "class": btnClasses.value,
        "onClick": handleClick
      }, [createVNode("div", {
        "class": contentClasses.value
      }, [(_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots), (_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : props.label])]);
    };
  }
});

export { radioButton as default };