✨(radio-group): 新增 radio-group 单选按钮组

package/component/src/component/iconPicker/index.vue

@@ -9,7 +9,7 @@ import "./index.less";
 import { Ref, ref } from "vue";
 import { LayIconList as icons } from "@layui/icons-vue";
 import LayDropdown from "../dropdown/index.vue";
-import layInput from "../input/index.vue";
+import LayInput from "../input/index.vue";
 
 export interface LayIconPickerProps {
   page?: boolean;
@@ -26,7 +26,7 @@ const emit = defineEmits(["update:modelValue", "change"]);
 const selectedIcon: Ref<string> = ref(props.modelValue as string);
 const dropdownRef = ref<any>(null);
 
-const selectIcon = function (icon: string) {
+const selectIcon = function (icon: string) : void {
   emit("update:modelValue", icon);
   emit("change", icon);
   selectedIcon.value = icon;
@@ -34,9 +34,9 @@ const selectIcon = function (icon: string) {
 };
 
 const icones: Ref = ref([]);
-const total = ref(icons.length);
-const totalPage = ref(total.value / 12);
-const currentPage: Ref = ref(1);
+const total: Ref<number> = ref(icons.length);
+const totalPage: Ref<number> = ref(total.value / 12);
+const currentPage: Ref<number> = ref(1);
 
 if (props.page) {
   icones.value = icons.slice(0, 12);

package/component/src/component/noticeBar/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div
     class="layui-notice-bar"
-    :style="{ background, height: `${height}px` }"
-    v-show="!isMode"
+    :style="{ 'background': background, 'height': `${height}px` }"
+    v-show="!state.isMode"
   >
     <div
       class="layui-notice-bar-warp"
-      :style="{ color, fontSize: `${size}px` }"
+      :style="{ 'color': color , 'font-size': `${size}px` }"
     >
-      <LayIcon
+      <lay-icon
         v-if="leftIcon"
         class="layui-notice-bar-warp-left-icon"
         :type="leftIcon"
-      ></LayIcon>
+      ></lay-icon>
       <div
         class="layui-notice-bar-warp-text-box"
         ref="noticeBarWarpRef"
@@ -45,12 +45,12 @@
           <!-- <slot />   -->
         </div>
       </div>
-      <LayIcon
+      <lay-icon
         :type="rightIcon"
         v-if="rightIcon"
         class="layui-notice-bar-warp-right-icon"
         @click="onRightIconClick"
-      ></LayIcon>
+      ></lay-icon>
     </div>
   </div>
 </template>
@@ -63,12 +63,10 @@ export default {
 
 <script lang="ts" setup>
 import {
-  toRefs,
-  reactive,
-  defineComponent,
-  ref,
   onMounted,
+  reactive,
   nextTick,
+  ref
 } from "vue";
 import LayCarousel from "../carousel/index.vue";
 import LayCarouselItem from "../carouselItem/index.vue";
@@ -77,7 +75,7 @@ import { LayIcon } from "@layui/icons-vue";
 export interface LayNoticeBarProps {
   mode?: string;
   text?: string;
-  textlist?: string[];
+  textlist?: any[];
   color?: Function;
   background?: Function;
   size?: number | string;
@@ -105,7 +103,7 @@ const emit = defineEmits(["close", "link"]);
 
 const noticeBarWarpRef = ref();
 const noticeBarTextRef = ref();
-//@ts-ignore
+
 const active = ref(props.textlist[0]?.id);
 const state = reactive({
   order: 1,

package/component/src/component/radio/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { computed, inject } from "vue";
 export default {
   name: "LayRadio",
 };
@@ -8,7 +9,7 @@ export default {
 import "./index.less";
 
 export interface LayRadioProps {
-  modelValue: string;
+  modelValue?: string | boolean;
   disabled?: boolean;
   label?: string;
   name: string;
@@ -18,12 +19,36 @@ const props = defineProps<LayRadioProps>();
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
-const handleClick = function () {
-  if (props.disabled) {
-    return;
+const radioGroup: any = inject("radioGroup", {});
+
+const isGroup = computed(() => {
+  return radioGroup != undefined && radioGroup?.name === "LayRadioGroup";
+});
+
+const isChecked = computed({
+  get() {
+    if (isGroup.value) {
+      return radioGroup.modelValue.value === props.label;
+    } else {
+      return props.modelValue === props.label;
     }
+  },
+  set(val) {
+    if (isGroup.value) {
+      radioGroup.modelValue.value = props.label;
+    } else {
+      if (val) {
         emit("change", props.label);
         emit("update:modelValue", props.label);
+      }
+    }
+  },
+});
+
+const handleClick = function () {
+  if (!props.disabled) {
+    isChecked.value = !isChecked.value;
+  }
 };
 </script>
 
@@ -33,14 +58,12 @@ const handleClick = function () {
     <div
       class="layui-unselect layui-form-radio"
       :class="{
-        'layui-form-radioed': modelValue == label,
+        'layui-form-radioed': isChecked,
         'layui-radio-disabled layui-disabled': disabled,
       }"
       @click.stop="handleClick"
     >
-      <i
-        v-if="modelValue == label"
-        class="layui-anim layui-icon layui-anim-scaleSpring"
+      <i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
         >&#xe643;</i
       >
       <i

package/component/src/component/radioGroup/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;

package/component/src/component/radioGroup/index.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+export default {
+  name: "LayRadioGroup",
+};
+</script>
+
+<script setup lang="ts">
+import { provide, ref, watch } from "vue";
+
+export interface LayRadioGroupProps {
+  modelValue?: string | boolean;
+}
+
+const props = withDefaults(defineProps<LayRadioGroupProps>(), {});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const modelValue = ref(props.modelValue);
+
+provide("radioGroup", { name: "LayRadioGroup", modelValue: modelValue });
+
+watch(
+  () => modelValue,
+  (val) => {
+    emit("change", modelValue.value);
+    emit("update:modelValue", modelValue.value);
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.modelValue,
+  (val) => (modelValue.value = val)
+);
+</script>
+
+<template>
+  <div class="layui-radio-group">
+    <slot></slot>
+  </div>
+</template>

package/component/src/component/select/index.vue

@@ -34,10 +34,9 @@ export interface LaySelectProps {
   items?: { label: string; value: string | number | [] | null; key: string }[];
 }
 
-const selectRef = ref<null | HTMLElement>(null);
+const selectRef = ref<null | HTMLElement>();
 
-// @ts-ignore
-onClickOutside(selectRef, (event) => {
+onClickOutside(selectRef, (event: Event) => {
   openState.value = false;
 });
 
@@ -53,7 +52,6 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
 const openState = ref(false);
 
 const open = function () {
-  // 禁用
   if (props.disabled) {
     openState.value = false;
     return;

package/component/src/index.ts

@@ -11,6 +11,7 @@ import LayBacktop from "./component/backTop/index";
 import LayAvatar from "./component/avatar/index";
 import LayAvatarList from "./component/avatarList/index";
 import LayRadio from "./component/radio/index";
+import LayRadioGroup from "./component/radioGroup/index";
 import LayButton from "./component/button/index";
 import LayButtonContainer from "./component/buttonContainer/index";
 import LayButtonGroup from "./component/buttonGroup/index";
@@ -90,6 +91,7 @@ const components: Record<string, Plugin> = {
   LaySplitPanel,
   LaySplitPanelItem,
   LayRadio,
+  LayRadioGroup,
   LayButton,
   LayIcon,
   LayBacktop,
@@ -178,6 +180,7 @@ export {
   LaySplitPanel,
   LaySplitPanelItem,
   LayRadio,
+  LayRadioGroup,
   LayButton,
   LayIcon,
   LayBacktop,

package/document/src/document/zh-CN/components/noticeBar.md

@@ -101,9 +101,7 @@ export default {
       { id: '4', text: '条目四' },
     ])
     return {
-       
         list,
-        
     }
   }
 }

package/document/src/document/zh-CN/components/radio.md

@@ -97,6 +97,39 @@ export default {
 
 :::
 
+::: title 事件回调
+:::
+
+::: demo
+
+<template>
+    <lay-radio-group v-model="selected4" @change="change4">
+      <lay-radio name="action" label="1">写作</lay-radio>
+      <lay-radio name="action" label="2">画画</lay-radio>
+      <lay-radio name="action" label="3">运动</lay-radio>
+    </lay-radio-group>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const selected4 = ref("1");
+    const change4 = function( current ) {
+        console.log("当前值:" + current)
+    }
+    return {
+        selected4,
+        change4
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Radio 属性
 :::