(checkbox): 新增 size 属性, 用于尺寸调整

This commit is contained in:
就眠儀式
2022-07-19 20:38:19 +08:00
parent bef298f77f
commit 38b6042fd9
5 changed files with 65 additions and 4 deletions

View File

@@ -1,3 +1,31 @@
@lg: 24px;
@md: 22px;
@sm: 20px;
@xs: 18px;
.set-size(@size) {
& {
.layui-form-radio > i {
font-size: @size;
}
}
}
.layui-radio{
&[size="lg"] {
.set-size(@lg);
}
&[size="md"] {
.set-size(@md);
}
&[size="sm"] {
.set-size(@sm);
}
&[size="xs"] {
.set-size(@xs);
}
}
.layui-radio input[type="radio"]{
display: none;
}

View File

@@ -7,9 +7,9 @@ export default {
<script setup lang="ts">
import "./index.less";
import { disable } from "@umijs/ssr-darkreader";
export interface LayRadioProps {
size?: 'lg' | 'md' | 'sm' | 'xs';
modelValue?: string | boolean;
disabled?: boolean;
value?: string;
@@ -17,7 +17,9 @@ export interface LayRadioProps {
name?: string;
}
const props = defineProps<LayRadioProps>();
const props = withDefaults(defineProps<LayRadioProps>(), {
size: "md"
});
const emit = defineEmits(["update:modelValue", "change"]);
@@ -72,7 +74,7 @@ const ifDisabled = computed(() => {
</script>
<template>
<span class="layui-radio">
<span class="layui-radio" :size="size">
<input type="radio" :value="value" :name="naiveName" />
<div
class="layui-unselect layui-form-radio"

View File

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<LaySwitchProps>(), {
disabled: false,
onswitchValue: true,
unswitchValue: false,
size:'md'
size: "md",
});
const emit = defineEmits(["update:modelValue", "change"]);