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

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