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(
defineProps<{
modelValue?: boolean;
disabled?: boolean;
}>(),
{
modelValue: false,
disabled: false,
}
);
@ -14,6 +16,8 @@ const emit = defineEmits<{
}>();
const handleChange = () => {
if (props.disabled) return;
emit("update:modelValue", !props.modelValue);
emit("change", !props.modelValue);
};
@ -24,11 +28,13 @@ const handleChange = () => {
:class="{
'bg-gray-200': !modelValue,
'!bg-primary': modelValue,
'switch-disabled': disabled,
}"
aria-checked="false"
class="switch-inner"
role="switch"
type="button"
:disabled="disabled"
@click="handleChange"
>
<span
@ -63,6 +69,11 @@ const handleChange = () => {
ease-in-out
duration-200;
&.switch-disabled {
@apply opacity-60
cursor-not-allowed;
}
.switch-indicator {
@apply pointer-events-none
inline-block