Fix vSwitch
This commit is contained in:
parent
1f558dbcbb
commit
8655f8d92e
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div role="button" @click="onClick">
|
||||
<div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': modelValue}">
|
||||
<div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': modelValue}" />
|
||||
<div role="button" @click.stop="onClick">
|
||||
<div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': props.modelValue}">
|
||||
<div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': props.modelValue}" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -9,14 +9,14 @@
|
|||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
|
||||
const { modelValue, disabled } = defineProps({
|
||||
const props = defineProps({
|
||||
modelValue: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false }
|
||||
})
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
|
||||
const onClick = () => {
|
||||
if (disabled) return
|
||||
emits('update:modelValue', !modelValue)
|
||||
if (props.disabled) return
|
||||
emits('update:modelValue', !props.modelValue)
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue