init

src/component/switch/index.less

@@ -0,0 +1,117 @@
+@switch-lg: 24px;
+@switch-md: 22px;
+@switch-sm: 20px;
+@switch-xs: 18px;
+
+@switch-lg-min-width: 42px;
+@switch-md-min-width: 37px;
+@switch-sm-min-width: 32px;
+@switch-xs-min-width: 27px;
+
+.set-size(@size, @min-width) {
+  & {
+    .layui-form-switch {
+      height: @size;
+      min-width: @min-width;
+      span{
+        width: calc(@size - 4px);
+        height: calc(@size - 4px);
+        transition:all 0.1s linear;
+      }
+      em{
+        margin-left: calc(@size - 3px);
+      }
+    }
+    .layui-form-onswitch{
+      span{
+        left: calc(100% - calc(@size - 1px));
+      }
+      em{
+        margin-right: calc(@size - 3px);
+        margin-left: 0px;
+      }
+    }
+  }
+}
+
+.layui-switch-container{
+  &[size="lg"] {
+    .set-size(@switch-lg,@switch-lg-min-width);
+  }
+  &[size="md"] {
+    .set-size(@switch-md,@switch-md-min-width);
+  }
+  &[size="sm"] {
+    .set-size(@switch-sm,@switch-sm-min-width);
+  }
+  &[size="xs"] {
+    .set-size(@switch-xs,@switch-xs-min-width);
+  }
+}
+
+.layui-switch-container .layui-switch-input {
+  display: none;
+}
+
+.layui-form-switch {
+  position: relative;
+  height: 22px;
+  line-height: 22px;
+  min-width: 35px;
+  padding: 0 4px;
+  border-radius: 20px;
+  cursor: pointer;
+  background-color: var(--global-neutral-color-6);
+  -webkit-transition:all 0.1s linear;
+  transition:all 0.1s linear;
+}
+
+.layui-form-switch span {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 3px;
+  top: 2px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 20px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px #00230b33;
+  -webkit-transition:all 0.1s linear;
+  transition:all 0.1s linear;
+}
+
+.layui-form-switch em {
+  position: relative;
+  padding: 0 2px;
+  text-align: center !important;
+  color: #999 !important;
+  font-style: normal !important;
+  font-size: 12px;
+  width: 25px;
+  top: 0;
+}
+
+.layui-form-onswitch {
+  border-color: var(--global-checked-color);
+  background-color: var(--global-checked-color);
+}
+
+.layui-form-onswitch span {
+  background-color: #fff;
+}
+
+.layui-form-onswitch em {
+  color: #fff !important;
+}
+
+.layui-switch-disabled {
+  opacity: 0.6;
+}
+
+.layui-switch-disabled,
+.layui-switch-disabled *{
+  cursor: not-allowed !important;
+}

src/component/switch/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/switch/index.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+export default {
+  name: "LaySwitch",
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import "./index.less";
+import { SwitchSize } from "./interface";
+
+export interface SwitchProps {
+  name?: string;
+  disabled?: boolean;
+  modelValue?: string | number | boolean;
+  onswitchText?: string;
+  unswitchText?: string;
+  onswitchColor?: string;
+  unswitchColor?: string;
+  onswitchValue?: string | number | boolean;
+  unswitchValue?: string | number | boolean;
+  size?: SwitchSize;
+  loadingIcon?: string;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  disabled: false,
+  onswitchValue: true,
+  unswitchValue: false,
+  loadingIcon: "layui-icon-loading-one",
+  size: "md",
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const isActive = computed({
+  get() {
+    return props.modelValue === props.onswitchValue;
+  },
+  set(val) {
+    if (val) {
+      emit("change", props.onswitchValue);
+      emit("update:modelValue", props.onswitchValue);
+    } else {
+      emit("change", props.unswitchValue);
+      emit("update:modelValue", props.unswitchValue);
+    }
+  },
+});
+
+const handleClick = () => {
+  if (!props.disabled) {
+    isActive.value = !isActive.value;
+  }
+};
+
+const styles = computed(() => {
+  return {
+    "background-color": isActive.value
+      ? props.onswitchColor
+      : props.unswitchColor,
+  };
+});
+</script>
+
+<template>
+  <span @click.stop="handleClick" class="layui-switch-container" :size="size">
+    <input class="layui-switch-input" :name="name" :value="modelValue" />
+    <div
+      class="layui-unselect layui-form-switch"
+      :style="styles"
+      :class="{
+        'layui-form-onswitch': isActive,
+        'layui-switch-disabled': disabled,
+      }"
+    >
+      <em v-if="onswitchText || unswitchText">{{
+        isActive == true ? onswitchText : unswitchText
+      }}</em>
+      <span>
+        <div>
+          <template v-if="loading">
+            <i
+              class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"
+              :class="loadingIcon"
+            ></i>
+          </template>
+          <template v-else>
+            <slot v-if="isActive" name="onswitch-icon"></slot>
+            <slot v-else name="unswitch-icon"></slot>
+          </template>
+        </div>
+      </span>
+    </div>
+  </span>
+</template>

src/component/switch/interface.ts

@@ -0,0 +1 @@
+export type SwitchSize = "lg" | "md" | "sm" | "xs";