✨(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"]{
|
.layui-radio input[type="radio"]{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
|
@ -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"]);
|
||||||
|
@ -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 单选分组
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user