【JEECG 组件扩展】JSwitch开关组件扩展单个多选框样式 - 详解

功能说明：

基于JeecgBoot开源框架，JSwitch开关组件扩展，支持单个多选样式。

效果展示：

使用示例：

  {
    field: 'JSwitch',
    component: 'JSwitch',
    label: 'JSwitch',
  },
  {
    field: 'JSwitchCheckBox',
    component: 'JSwitch',
    label: 'JSwitchCheckBox',
    componentProps: { checkBox: true },
  },
  {
    field: 'JSwitchSelect',
    component: 'JSwitch',
    label: 'JSwitchSelect',
    componentProps: { query: true },
  },

JSwitch开关组件扩展源码：

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
  const { prefixCls } = useDesign('j-switch');
  const props = defineProps({
    // v-model:value
    value: propTypes.oneOfType([propTypes.string, propTypes.number]),
    // 取值 options
    options: propTypes.array.def(() => ['Y', 'N']),
    // 文本 options
    labelOptions: propTypes.array.def(() => ['是', '否']),
    // 是否使用下拉
    query: propTypes.bool.def(false),
    // 是否使用单个多选框 author：wyh
    checkBox: propTypes.bool.def(false),
    // 是否禁用
    disabled: propTypes.bool.def(false),
  });
  const attrs = useAttrs();
  const emit = defineEmits(['change', 'update:value']);
  const checked = ref(false);
  const [state] = useRuleFormItem(props, 'value', 'change');
  watch(
    () => props.value,
    (val) => {
      if (!props.query) {
        if (!val && !props.options.includes(val)) {
          checked.value = false;
          emitValue(props.options[1]);
        } else {
          checked.value = props.options[0] == val;
        }
      }
    },
    { immediate: true }
  );
  const selectOptions = computed(() => {
    let options: any[] = [];
    options.push({ value: props.options[0], label: props.labelOptions[0] });
    options.push({ value: props.options[1], label: props.labelOptions[1] });
    return options;
  });
  // Switch事件
  function onSwitchChange(checked) {
    let flag = checked === false ? props.options[1] : props.options[0];
    emitValue(flag);
  }
  // CheckBox事件 author：wyh
  function onCheckBoxChange(e) {
    let flag = e.target.checked == false ? props.options[1] : props.options[0];
    emitValue(flag);
  }
  // Select选择器事件
  function onSelectChange(value) {
    emitValue(value);
  }
  function emitValue(value) {
    emit('change', value);
    emit('update:value', value);
  }
</script>