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(
|
||||
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
|
||||
|
|
Loading…
Reference in New Issue