Hướng dẫn tạo một component toggle switch trong Vue 2 có thể tái sử dụng với v-model và sử dụng Tailwind CSS 3
Bước 1: Tạo component ToggleSwitch.vue
<template>
<label class="inline-flex items-center cursor-pointer">
<span class="mr-3">{{ label }}</span>
<div class="relative">
<input type="checkbox" class="sr-only" :checked="modelValue" @change="toggle">
<div
class="block bg-gray-300 w-10 h-6 rounded-full transition"
:class="modelValue ? 'bg-green-500' : 'bg-gray-300'">
</div>
<div
class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"
:class="modelValue ? 'translate-x-4' : ''">
</div>
</div>
</label>
</template>
<script>
export default {
name: 'ToggleSwitch',
props: {
value: {
type: Boolean,
default: false
},
label: {
type: String,
default: ''
}
},
computed: {
modelValue: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
}
},
methods: {
toggle() {
this.modelValue = !this.modelValue;
}
}
}
</script>
<style scoped>
.dot {
transition: transform 0.3s ease-in-out;
}
</style>Bước 2: Sử dụng component trong cha
<template>
<div class="p-4">
<ToggleSwitch v-model="isToggled" label="Bật / Tắt" />
<p class="mt-3">Trạng thái: {{ isToggled ? 'Bật' : 'Tắt' }}</p>
</div>
</template>
<script>
import ToggleSwitch from './ToggleSwitch.vue';
export default {
components: {
ToggleSwitch
},
data() {
return {
isToggled: false
};
}
};
</script>
Bước 3: Giải thích:
- Component
ToggleSwitch:- Sử dụng
propsđể nhận giá trịvaluetừv-model. - Trong
computed, sử dụngmodelValueđể đồng bộ dữ liệu giữa cha và component con thông quagetvàset. - Phương thức
toggleđể chuyển đổi trạng tháicheckedcủainput.
- Sử dụng
- Tailwind CSS:
- Sử dụng các lớp tiện ích như
w-10,h-6,rounded-full,bg-gray-300,bg-green-500để tạo phong cách cho toggle switch.
- Sử dụng các lớp tiện ích như
Component này có thể tái sử dụng nhiều nơi trong dự án của bạn, chỉ cần truyền giá trị vào v-model.
Trong Vue 2, khi sử dụng v-model với các component tùy chỉnh, v-model mặc định sẽ sử dụng prop value và emit sự kiện input để truyền giá trị từ component con về component cha. Do đó, modelValue là một computed property được khai báo để quản lý hai chiều: lấy giá trị từ prop value và đồng thời emit giá trị thay đổi thông qua sự kiện input.
Mặc dù modelValue không phải là prop trực tiếp, nó là một computed property với getter và setter như sau:
- Getter: Lấy giá trị của prop
value, đây là giá trị được truyền từ cha quav-model. - Setter: Gửi lại giá trị thay đổi từ component con lên cha bằng cách emit sự kiện
input.
Cụ thể:
computed: {
modelValue: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
}
}- get(): Trả về giá trị của prop
value, tức là giá trị được truyền từ component cha quav-model. - set(value): Mỗi khi giá trị của
modelValuethay đổi (thông quatoggle), nó sẽ emit sự kiện'input', truyền giá trị mới về cha.
modelValue được dùng ở đây để kết nối giá trị value của cha và component con, cho phép v-model hoạt động như một binding hai chiều.