(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"]{ .layui-radio input[type="radio"]{
display: none; display: none;
} }

View File

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

View File

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

View File

@ -98,6 +98,36 @@ export default {
::: :::
::: title 事件回调
:::
::: demo
<template>
<lay-radio v-model="selected5" name="action" size="lg" value="1">写作</lay-radio>
<lay-radio v-model="selected5" name="action" size="md" value="2">画画</lay-radio>
<lay-radio v-model="selected5" name="action" size="sm" value="3">运动</lay-radio>
<lay-radio v-model="selected5" name="action" size="xs" value="4">游泳</lay-radio>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selected5 = ref("1");
return {
selected5,
}
}
}
</script>
:::
::: title 单选分组 ::: title 单选分组
::: :::

View File

@ -29,6 +29,7 @@
<li>[新增] date-picker 组件 年月日 范围选择, 重构代码。</li> <li>[新增] date-picker 组件 年月日 范围选择, 重构代码。</li>
<li>[新增] date-picker 组件 allow-clear 属性, 开启内容清空操作。</li> <li>[新增] date-picker 组件 allow-clear 属性, 开启内容清空操作。</li>
<li>[新增] date-picker 组件 readonly 属性, 开启只读模式。</li> <li>[新增] date-picker 组件 readonly 属性, 开启只读模式。</li>
<li>[新增] radio 组件 size 属性, 用于设置 radio 尺寸。</li>
<li>[新增] switch 组件 size 属性, 用于设置 switch 尺寸。</li> <li>[新增] switch 组件 size 属性, 用于设置 switch 尺寸。</li>
<li>[修复] date-picker 组件 modelValue 属性, 空值报错。</li> <li>[修复] date-picker 组件 modelValue 属性, 空值报错。</li>
<li>[修复] input-number 组件 size 属性, lg md sm xs 为可选值。</li> <li>[修复] input-number 组件 size 属性, lg md sm xs 为可选值。</li>