mirror of https://github.com/halo-dev/halo
feat(components): add disabled prop supports for switch component (#3564)
#### What type of PR is this? /kind improvement /area console #### What this PR does / why we need it: 为 Switch 组件添加 disabled 属性以支持禁用。 <img width="1403" alt="image" src="https://user-images.githubusercontent.com/21301288/226829739-914eca3d-6d33-4d8c-9cc8-fe19b655ad9d.png"> #### Special notes for your reviewer: 1. `cd path/to/console/packages/components` 2. `pnpm story:dev` 3. 测试 Switch 组件的 disabled 属性是否工作正常。 #### Does this PR introduce a user-facing change? ```release-note None ```pull/3580/head
parent
066e5e9462
commit
e759dd505f
|
@ -2,9 +2,11 @@
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
modelValue?: boolean;
|
modelValue?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
modelValue: false,
|
modelValue: false,
|
||||||
|
disabled: false,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -14,6 +16,8 @@ const emit = defineEmits<{
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const handleChange = () => {
|
const handleChange = () => {
|
||||||
|
if (props.disabled) return;
|
||||||
|
|
||||||
emit("update:modelValue", !props.modelValue);
|
emit("update:modelValue", !props.modelValue);
|
||||||
emit("change", !props.modelValue);
|
emit("change", !props.modelValue);
|
||||||
};
|
};
|
||||||
|
@ -24,11 +28,13 @@ const handleChange = () => {
|
||||||
:class="{
|
:class="{
|
||||||
'bg-gray-200': !modelValue,
|
'bg-gray-200': !modelValue,
|
||||||
'!bg-primary': modelValue,
|
'!bg-primary': modelValue,
|
||||||
|
'switch-disabled': disabled,
|
||||||
}"
|
}"
|
||||||
aria-checked="false"
|
aria-checked="false"
|
||||||
class="switch-inner"
|
class="switch-inner"
|
||||||
role="switch"
|
role="switch"
|
||||||
type="button"
|
type="button"
|
||||||
|
:disabled="disabled"
|
||||||
@click="handleChange"
|
@click="handleChange"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
@ -63,6 +69,11 @@ const handleChange = () => {
|
||||||
ease-in-out
|
ease-in-out
|
||||||
duration-200;
|
duration-200;
|
||||||
|
|
||||||
|
&.switch-disabled {
|
||||||
|
@apply opacity-60
|
||||||
|
cursor-not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
.switch-indicator {
|
.switch-indicator {
|
||||||
@apply pointer-events-none
|
@apply pointer-events-none
|
||||||
inline-block
|
inline-block
|
||||||
|
|
Loading…
Reference in New Issue