/
keller1
/
KellerAPI
Обзор
Документация
Войти
/
keller1
/
KellerAPI
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
main
frontend/src/components/TaskItem.vue
86 строк
1 KB
keller1
todolist
16 апр 2026, 16:35
16 апр 2026, 16:35
93b5b4e
Код
Авторство
О чём код?
<script setup> const props = defineProps({ task: { type: Object, required: true } }) const emit = defineEmits(['delete', 'switch']) const handleRemove = (id) => { emit('delete', id) } const handleToggle = (id) => { emit('switch', id) } </script> <template> <li class="task-item"> <div class="left" @click="handleToggle(task.id)"> <span class="checkbox" :class="{ checked: task.completed }"> <span v-if="task.completed" class="checkmark">✓</span> </span> <span class="title" :class="{ done: task.completed }"> {{ task.title }} </span> </div> <button class="delete-btn" @click.stop="handleRemove(task.id)"> 🗑 </button> </li> </template> <style scoped> .task-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; } .checkbox { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #00a2ff; display: flex; align-items: center; justify-content: center; } .checkbox.checked { background: #00a2ff; border-color: #00a2ff; color: #fff; } .left { display: flex; align-items: center; gap: 10px; cursor: pointer; } .checkmark { font-size: 14px; } .title { font-size: 15px; } .title.done { text-decoration: line-through; color: #999; } .delete-btn { border: none; background: transparent; cursor: pointer; font-size: 18px; } </style>