init

src/component/radio/index.less

@@ -0,0 +1,69 @@
+@radio-lg: 24px;
+@radio-md: 22px;
+@radio-sm: 20px;
+@radio-xs: 18px;
+
+.set-size(@size) {
+  & {
+    .layui-form-radio > i {
+      font-size: @size;
+    }
+  }
+}
+
+.layui-radio{
+  &[size="lg"] {
+    .set-size(@radio-lg);
+  }
+  &[size="md"] {
+    .set-size(@radio-md);
+  }
+  &[size="sm"] {
+    .set-size(@radio-sm);
+  }
+  &[size="xs"] {
+    .set-size(@radio-xs);
+  }
+}
+
+.layui-radio input[type="radio"]{
+  display: none;
+}
+
+.layui-form-radio,
+.layui-form-radio * {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.layui-form-radio {
+  line-height: 28px;
+  margin: 6px 10px 0 0;
+  padding-right: 10px;
+  cursor: pointer;
+  font-size: 0;
+}
+
+.layui-form-radio * {
+  font-size: 14px;
+}
+
+.layui-form-radio > i {
+  margin-right: 8px;
+  font-size: 22px;
+  color: var(--global-neutral-color-8);
+}
+
+.layui-form-radio:hover *,
+.layui-form-radioed,
+.layui-form-radioed > i {
+  color: var(--global-checked-color);
+}
+
+.layui-radio-disabled > i {
+  color: var(--global-neutral-color-3) !important;
+}
+
+.layui-radio-disabled * {
+  color: var(--global-neutral-color-8) !important;
+}

src/component/radio/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/radio/index.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+import { computed, inject } from "vue";
+import { RadioSize } from "./interface";
+export default {
+  name: "LayRadio",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+
+export interface RadioProps {
+  name?: string;
+  size?: RadioSize;
+  disabled?: boolean;
+  modelValue?: string | boolean | number;
+  value?: string | boolean | number;
+  label?: string;
+}
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  size: "md",
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const radioGroup: any = inject("radioGroup", {});
+
+const isGroup = computed(() => {
+  return radioGroup != undefined && radioGroup?.name === "LayRadioGroup";
+});
+
+const naiveName = computed(() => {
+  if (radioGroup.naiveName) {
+    return radioGroup.naiveName;
+  } else {
+    return props.name;
+  }
+});
+
+const isChecked = computed({
+  get() {
+    if (isGroup.value) {
+      return radioGroup.modelValue.value === props.value;
+    } else {
+      return props.modelValue === props.value;
+    }
+  },
+  set(val) {
+    if (isGroup.value) {
+      radioGroup.modelValue.value = props.value;
+    } else {
+      if (val) {
+        emit("change", props.value);
+        emit("update:modelValue", props.value);
+      }
+    }
+  },
+});
+
+const handleClick = function () {
+  if (!ifDisabled.value) {
+    isChecked.value = !isChecked.value;
+  }
+};
+const ifDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+  if (radioGroup.hasOwnProperty("disabled") && radioGroup.disabled.value) {
+    return true;
+  }
+  return false;
+});
+</script>
+
+<template>
+  <span class="layui-radio" :size="size">
+    <input type="radio" :value="value" :name="naiveName" />
+    <div
+      class="layui-unselect layui-form-radio"
+      :class="{
+        'layui-form-radioed': isChecked,
+        'layui-radio-disabled layui-disabled': ifDisabled,
+      }"
+      @click.stop="handleClick"
+    >
+      <i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
+        >&#xe643;</i
+      >
+      <i v-else class="layui-icon layui-form-radioed">&#xe63f;</i>
+      <span>
+        <slot>{{ label }}</slot>
+      </span>
+    </div>
+  </span>
+</template>

src/component/radio/interface.ts

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