【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>
相关推荐
知识分享小能手1 分钟前
Vue3 学习教程,从入门到精通,Vue 3 + Tailwind CSS 全面知识点与案例详解(31)
前端·javascript·css·vue.js·学习·typescript·vue3
江影影影12 分钟前
Spring Boot 2.6.0+ 循环依赖问题及解决方案
java·spring boot·后端
快乐就是哈哈哈15 分钟前
《JSR303 数据校验全攻略:从入门到实战,玩转优雅的参数验证》
后端
石小石Orz17 分钟前
React生态蓝图梳理:前端、全栈与跨平台全景指南
前端
快乐就是哈哈哈25 分钟前
Linux 部署与管理 Spring Boot 项目保姆级全流程
后端
codeGoogle1 小时前
昇腾揭开的伤疤,刺痛了谁?
后端
袁煦丞1 小时前
8.12实验室 指尖魔法变出艺术感 Excalidraw:cpolar内网穿透实验室第495个成功挑战
前端·程序员·远程工作
null不是我干的1 小时前
黑马SpringBoot+Elasticsearch作业2实战:商品搜索与竞价排名功能实现
spring boot·后端·elasticsearch
烛阴1 小时前
Dot
前端·webgl
Gene_20221 小时前
使用行为树控制机器人(三) ——通用端口
前端·机器人