【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:valuevalue: propTypes.oneOfType([propTypes.string, propTypes.number]),// 取值 optionsoptions: propTypes.array.def(() => ['Y', 'N']),// 文本 optionslabelOptions: propTypes.array.def(() => ['是', '否']),// 是否使用下拉query: propTypes.bool.def(false),// 是否使用单个多选框 author：wyhcheckBox: 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：wyhfunction 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>