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
Ryan Wang 2023-03-23 22:16:34 +08:00 committed by GitHub
parent 066e5e9462
commit e759dd505f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 0 deletions

View File

@ -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