✨(component): 新增radioGroup组件 disabled属性
This commit is contained in:
0o张不歪o0
parent
eaa66f6d5a
commit
93cb391f68
@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin="primary"] i {
|
||||
border-color: var(--global-checked-color) !important;
|
||||
border-color: var(--global-checked-color);
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
@ -136,3 +136,8 @@
|
||||
.layui-checkbox-disabled:hover i {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{
|
||||
background-color: var(--global-neutral-color-3) !important;
|
||||
border-color: var(--global-neutral-color-3) !important;
|
||||
}
|
||||
@ -27,7 +27,6 @@ const props = withDefaults(defineProps<LayCheckboxProps>(), {
|
||||
});
|
||||
|
||||
const checkboxGroup: any = inject("checkboxGroup", {});
|
||||
const checkboxGroupDisabled: boolean = inject("checkboxGroupDisabled", false);
|
||||
|
||||
const isGroup = computed(() => {
|
||||
return (
|
||||
@ -93,10 +92,19 @@ const setArrayModelValue = function (checked: any) {
|
||||
};
|
||||
|
||||
const handleClick = function () {
|
||||
if (!props.disabled&&!checkboxGroupDisabled) {
|
||||
if (!ifDisabled.value) {
|
||||
isChecked.value = !isChecked.value;
|
||||
}
|
||||
};
|
||||
const ifDisabled = computed(() => {
|
||||
if (props.disabled) {
|
||||
return true;
|
||||
}
|
||||
if (checkboxGroup.hasOwnProperty('disabled')&&checkboxGroup.disabled.value) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -105,8 +113,8 @@ const handleClick = function () {
|
||||
<div
|
||||
class="layui-unselect layui-form-checkbox"
|
||||
:class="{
|
||||
'layui-checkbox-disabled layui-disabled': disabled||checkboxGroupDisabled,
|
||||
'layui-form-checked': isChecked,
|
||||
'layui-checkbox-disabled layui-disabled': ifDisabled,
|
||||
}"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
|
||||
@ -21,9 +21,9 @@ const props = withDefaults(defineProps<LayCheckboxGroupProps>(), {
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const modelValue = ref(props.modelValue);
|
||||
const disabled=ref(props.disabled)
|
||||
provide("checkboxGroup", { name: "LayCheckboxGroup", modelValue: modelValue,disabled:disabled });
|
||||
|
||||
provide("checkboxGroup", { name: "LayCheckboxGroup", modelValue: modelValue });
|
||||
provide("checkboxGroupDisabled",props.disabled)
|
||||
watch(
|
||||
() => modelValue,
|
||||
(val) => {
|
||||
@ -38,6 +38,11 @@ watch(
|
||||
(val) => (modelValue.value = val)
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.disabled,
|
||||
(val) => (disabled.value = val)
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -7,6 +7,7 @@ export default {
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { disable } from '@umijs/ssr-darkreader';
|
||||
|
||||
export interface LayRadioProps {
|
||||
modelValue?: string | boolean;
|
||||
@ -55,32 +56,33 @@ const isChecked = computed({
|
||||
});
|
||||
|
||||
const handleClick = function () {
|
||||
if (!props.disabled) {
|
||||
if (!ifDisabled.value) {
|
||||
isChecked.value = !isChecked.value;
|
||||
}
|
||||
};
|
||||
const ifDisabled = computed(() => {
|
||||
if (props.disabled) {
|
||||
return true;
|
||||
}
|
||||
if (radioGroup.hasOwnProperty('disabled')&&radioGroup.disabled.value) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="layui-radio">
|
||||
<input type="radio" :value="value" :name="naiveName" />
|
||||
<div
|
||||
class="layui-unselect layui-form-radio"
|
||||
:class="{
|
||||
'layui-form-radioed': isChecked,
|
||||
'layui-radio-disabled layui-disabled': disabled,
|
||||
}"
|
||||
@click.stop="handleClick"
|
||||
>
|
||||
<i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
|
||||
></i
|
||||
>
|
||||
<i
|
||||
v-else
|
||||
class="layui-icon layui-form-radioed"
|
||||
></i
|
||||
>
|
||||
<span><slot>{{label}}</slot></span>
|
||||
<div class="layui-unselect layui-form-radio" :class="{
|
||||
'layui-form-radioed': isChecked,
|
||||
'layui-radio-disabled layui-disabled': ifDisabled,
|
||||
}" @click.stop="handleClick">
|
||||
<i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"></i>
|
||||
<i v-else class="layui-icon layui-form-radioed"></i>
|
||||
<span>
|
||||
<slot>{{ label }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -10,18 +10,22 @@ import { provide, ref, watch } from "vue";
|
||||
export interface LayRadioGroupProps {
|
||||
modelValue?: string | boolean;
|
||||
name?: string;
|
||||
disabled?:boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayRadioGroupProps>(), {});
|
||||
const props = withDefaults(defineProps<LayRadioGroupProps>(), {
|
||||
disabled:false
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const modelValue = ref(props.modelValue);
|
||||
|
||||
const disabled=ref(props.disabled)
|
||||
provide("radioGroup", {
|
||||
name: "LayRadioGroup",
|
||||
modelValue: modelValue,
|
||||
naiveName: props.name,
|
||||
disabled:disabled
|
||||
});
|
||||
|
||||
watch(
|
||||
@ -37,6 +41,11 @@ watch(
|
||||
() => props.modelValue,
|
||||
(val) => (modelValue.value = val)
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.disabled,
|
||||
(val) => (disabled.value = val)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-checkbox name="like" value="1" v-model="checked2" >普通</lay-checkbox>
|
||||
<lay-checkbox name="like" value="1" v-model="checked2">普通</lay-checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -134,7 +134,7 @@ export default {
|
||||
<template>
|
||||
<lay-checkbox name="like" skin="primary" value="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
|
||||
<br/><br/>
|
||||
<lay-checkbox-group v-model="checkeds" disabled>
|
||||
<lay-checkbox-group v-model="checkeds" :disabled="disabled">
|
||||
<lay-checkbox name="like" skin="primary" value="1">写作</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" value="2">画画</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" value="3">运动</lay-checkbox>
|
||||
@ -146,11 +146,8 @@ import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const disabled = ref(true)
|
||||
|
||||
const checked6 = ref(false);
|
||||
|
||||
return {
|
||||
disabled,checked6
|
||||
}
|
||||
|
||||
@ -121,6 +121,7 @@ export default {
|
||||
const change4 = function( current ) {
|
||||
console.log("当前值:" + current)
|
||||
}
|
||||
const disabled1=ref(false)
|
||||
return {
|
||||
selected4,
|
||||
change4
|
||||
@ -142,6 +143,7 @@ export default {
|
||||
| label | 显示值 | -- |
|
||||
| value | 绑定值 | -- |
|
||||
| v-model | 选中值 | -- |
|
||||
| disabled | 是否禁用 | `false` |
|
||||
|
||||
:::
|
||||
|
||||
@ -164,6 +166,7 @@ export default {
|
||||
| 属性 | 描述 | 默认值 |
|
||||
| ------- | ------------- | ------ |
|
||||
| v-model | 选中值 | -- |
|
||||
| disabled | 是否整体禁用 | `false` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -25,7 +25,8 @@
|
||||
<li>[新增] formItem 组件 label-width属性，用于控制宽度 by @SmallWai</li>
|
||||
<li>[优化] inputNumber 组件 禁用状态下的样式 by @SmallWai</li>
|
||||
<li>[优化] botton 组件 禁用状态下的icon hover样式 by @SmallWai</li>
|
||||
<li>[新增] CheckboxGroup 组件 disabled属性 by @SmallWai</li>
|
||||
<li>[新增] checkboxGroup 组件 disabled属性 by @SmallWai</li>
|
||||
<li>[新增] radioGroup 组件 disabled属性 by @SmallWai</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user