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

功能说明：

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

效果展示：

使用示例：

javascript 复制代码

  {
    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开关组件扩展源码：

javascript 复制代码

<template>
  <div :class="prefixCls">
    <!-- select author：wyh  -->
    <a-select
      v-if="query"
      v-model:value="state"
      :options="selectOptions"
      :disabled="disabled"
      style="width: 100%"
      v-bind="attrs"
      @change="onSelectChange"
    />
    <!-- checkbox author：wyh  -->
    <a-checkbox v-else-if="checkBox" v-model:checked="checked" :disabled="disabled" v-bind="attrs" @change="onCheckBoxChange" />
    <!-- switch author：wyh  -->
    <a-switch v-else v-model:checked="checked" :disabled="disabled" v-bind="attrs" @change="onSwitchChange" />
  </div>
</template>

<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<boolean>(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>

<style lang="less">
  //noinspection LessUnresolvedVariable
  @prefix-cls: ~'@{namespace}-j-switch';

  .@{prefix-cls} {
  }
</style>