✨(checkbox): 新增 size 属性, 用于尺寸调整
This commit is contained in:
parent
bef298f77f
commit
38b6042fd9
@ -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;
|
||||
}
|
||||
|
@ -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"
|
||||
|
@ -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"]);
|
||||
|
@ -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 单选分组
|
||||
:::
|
||||
|
||||
|
@ -29,6 +29,7 @@
|
||||
<li>[新增] date-picker 组件 年月日 范围选择, 重构代码。</li>
|
||||
<li>[新增] date-picker 组件 allow-clear 属性, 开启内容清空操作。</li>
|
||||
<li>[新增] date-picker 组件 readonly 属性, 开启只读模式。</li>
|
||||
<li>[新增] radio 组件 size 属性, 用于设置 radio 尺寸。</li>
|
||||
<li>[新增] switch 组件 size 属性, 用于设置 switch 尺寸。</li>
|
||||
<li>[修复] date-picker 组件 modelValue 属性, 空值报错。</li>
|
||||
<li>[修复] input-number 组件 size 属性, lg md sm xs 为可选值。</li>
|
||||
|
Loading…
Reference in New Issue
Block a user