当前位置: 首页 > news >正文

一个vue3的待办列表组件

一个vue3的待办列表组件, 仿企业微信的待办列表
TodoList.vue

<template><div><el-input v-model="todoInput" placeholder="写下你的待办事项..." class="el-input" @keyup.enter="addTodo"input-style="background-color: #EBECED;" /><el-table :data="todos" size="small" :show-header="false" @row-dblclick="editTodo"><el-table-column width="30"><template #default="scope"><el-checkbox v-model="scope.row.completed" @change="toggleTodo(scope.row)">check</el-checkbox></template></el-table-column><el-table-column prop="text" /></el-table><div @click="showCompleted = !showCompleted" style="cursor: pointer; text-align: center; margin: 10px 0;"><el-divider v-if="!showCompleted">已完成 (点击展开)</el-divider><el-divider v-else>已完成 (点击折叠)</el-divider></div><el-table :data="completedTodos" size="small" :show-header="false" v-if="showCompleted"><el-table-column width="30"><template #default="scope"><el-checkbox v-model="scope.row.completed" @change="toggleTodo(scope.row)">check</el-checkbox></template></el-table-column><el-table-column prop="text" /></el-table><el-dialog title="修改" v-model="editDialogVisible"><el-form :model="editingTodo"><el-form-item label="内容"><el-input ref="inputRef" v-model="editingTodo.text"></el-input></el-form-item><el-form-item label="状态"><el-checkbox v-model="editingTodo.completed">已完成</el-checkbox></el-form-item></el-form><template #footer><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="confirmEdit()">确 定</el-button></template></el-dialog></div>
</template><script setup lang="ts">
// 通用的待办列表
// 使用<TodoList :todoList="todoList" :save="save"></TodoList>
import { ref } from 'vue';interface Todo {id: number;text: string;completed: boolean;
}defineOptions({name: 'TodoList'
})const props = defineProps({todoList: Array<Todo>,save: Function  //外部传入的保存方法,入参是Todo[]
});const todoInput = ref('');
const todos = ref<Todo[]>([]);
const completedTodos = ref<Todo[]>([]);
const editDialogVisible = ref(false);
const editingTodo = ref({} as Todo);
const showCompleted = ref(false);
const inputRef = ref();watch(() => props.todoList, (newValue) => {if (newValue) {newValue.sort((a, b) => b.id - a.id);todos.value = newValue.filter(t => !t.completed);completedTodos.value = newValue.filter(t => t.completed);}
})const addTodo = () => {if (todoInput.value.trim() === '') return;todos.value.unshift({id: Date.now(),text: todoInput.value,completed: false});todoInput.value = '';saveTodoList();
};const toggleTodo = async (todo: Todo) => {await new Promise(resolve => setTimeout(() => resolve("delay"), 300)); //产生一个点击后动画效果if (todo.completed) {if (!completedTodos.value.find(t => t.id == todo.id)) {completedTodos.value.unshift(todo);}todos.value = todos.value.filter(t => t.id !== todo.id);} else {if (!todos.value.find(t => t.id == todo.id)) {todo.id = Date.now();//更新时间到最新,所以每个todo其实是没有唯一值的todos.value.unshift(todo);}completedTodos.value = completedTodos.value.filter(t => t.id !== todo.id);}saveTodoList();
};const editTodo = (todo: Todo) => {editingTodo.value = { ...todo };editDialogVisible.value = true;//组件focus的正确方式 setTimeoutsetTimeout(() => {inputRef.value?.focus();})
};const confirmEdit = () => {editDialogVisible.value = false;var todo = todos.value.find(t => t.id == editingTodo.value.id)if (todo) {todo.text = editingTodo.value.texttodo.completed = editingTodo.value.completed;toggleTodo(todo);}
};const saveTodoList = () => {if (props.save) { // 添加空值检查props.save(todos.value.concat(completedTodos.value));}
}</script>
<style scoped>
.el-input {--el-input-bg-color: #EBECED;
}
</style>

相关文章:

一个vue3的待办列表组件

一个vue3的待办列表组件, 仿企业微信的待办列表 TodoList.vue <template><div><el-input v-model"todoInput" placeholder"写下你的待办事项..." class"el-input" keyup.enter"addTodo"input-style"background-c…...

深入分析梧桐数据库SQL查询之挖掘季度销售冠军

在现代商业环境中&#xff0c;对销售数据的深入分析是企业决策过程中不可或缺的一部分。通过分析销售数据&#xff0c;企业可以识别出表现最佳的员工&#xff0c;从而激励团队&#xff0c;优化销售策略&#xff0c;并提高整体业绩。本文将详细介绍如何使用SQL查询来识别每个季度…...

「ZJUBCA秋季迎新见面会预告」

01 TIME 主席团与各部部长致辞 Presidents and Leads speech 02 TIME Aptos宣讲 Aptos Pitch-Hackathon 03 TIME 破冰小游戏 Icebreaker Games-Mining a Bitcoin 04 TIME 观影 Movie time&#xff01; ⬇️浙江大学区块链协会秋季迎新见面会预告⬇️ 01 Presidents and Leads s…...

钉钉消息推送工具类

pom.xml <!-- HuTool 工具 --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.12</version></dependency><!-- commons-lang3 --><dependency><groupId>…...

Android Studio 导入/删除/新建库的模块(第三方项目) - Module

文章目录 一、导入module项目 Module空项目如何导入Project工程项目二、删除module项目三、新建module项目(不常用) 一、导入module项目 首先&#xff0c;你必须要有一个工程(Project),才可以打开项目(Module) 第一步骤&#xff1a;右键项目依次点击 New -> Module 1、工…...

flowable 去掉自带的登录权限

重写Security配置&#xff0c;使所有请求都可以通过Security验证。&#xff08;/**/**&#xff09; 如&#xff1a; 公共的Security配置 package com.central.workflow.config;import org.springframework.context.annotation.Configuration; import org.springframework.se…...

第T8周:猫狗识别

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营](https://mp.weixin.qq.com/s/0dvHCaOoFnW8SCp3JpzKxg) 中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊](https://mtyjkh.blog.csdn.net/)** &#x1f37a; 要求&#xff1a; 了解mode…...

第十七周:机器学习

目录 摘要 Abstract 一、MCMC 1、马尔科夫链采样 step1 状态设定 step2 转移矩阵 step3 马尔科夫链的生成 step4 概率分布的估计 2、蒙特卡洛方法 step1 由一个分布产生随机变量 step2 用这些随机变量做实验 3、MCMC算法 4、参考文章 二、flow-based GAN 1、引…...

算法4之链表

概述 链表的题目没有太难的算法&#xff0c;纯看熟练度&#xff0c;是必须会。面试笔试不会是直接挂的&#xff0c;或者给面试官留下不好的印象。 单双链表的反转&#xff0c;单链表实现队列&#xff0c;K个一组反转链表。 单链表反转 链表节点的定义 Data public class Li…...

掌握未来技术:KVM虚拟化安装全攻略,开启高效云端之旅

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 目录 前言&#…...

挖矿病毒的处理

前阶段生产服务器又中挖矿病毒了&#xff0c;紧急处理了一波 现象 执行 top命令&#xff0c;查看哪里cpu占用较高 CPU 彪满下不来 解决 1、杀掉进程 kill -9 pid 2、但是&#xff0c;过一会又不行了&#xff0c;说明有定时任务在定时执行这个病毒 3、先找到病毒文件&…...

JVM(HotSpot):GC之G1垃圾回收器

文章目录 一、简介二、工作原理三、Young Collection 跨代引用四、大对象问题 一、简介 1、适用场景 同时注重吞吐量&#xff08;Throughput&#xff09;和低延迟&#xff08;Low latency&#xff09;&#xff0c;默认的暂停目标是 200 ms超大堆内存&#xff0c;会将堆划分为…...

appium文本输入的多种形式

目录 一、send_keys方法 二、press_keycode方法 三、subprocess方法直接通过adb命令输入 一、send_keys方法 这个是最常用的方法&#xff0c;不过通常使用时要使用聚焦&#xff0c;也就是先点击后等待&#xff1a; element wait.until(EC.presence_of_element_located((By…...

springboot095学生宿舍信息的系统--论文pf(论文+源码)_kaic

学生宿舍信息管理系统 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了学生宿舍信息管理系统的开发全过程。通过分析学生宿舍信息管理系统管理的不足&#xff0c;创建了一个计算机管理学生宿舍信息管理系统的方…...

使用SQL在PostGIS中创建各种空间数据

#1024程序员节&#xff5c;征文# 一、目录 1. 概述 2. 几何&#xff08;Geometry&#xff09;类型 创建点 创建线 创建面 3. 地理&#xff08;Geography&#xff09;类型 地理点&#xff08;GEOGRAPHY POINT&#xff09; 地理线串&#xff08;GEOGRAPHY LINESTRING&#xff…...

ArkTS 如何适配手机和平板,展示不同的 Tabs 页签

ArkTS&#xff08;Ark TypeScript&#xff09;作为HarmonyOS应用开发的主要语言&#xff0c;提供了丰富的组件和接口来适配不同设备&#xff0c;包括手机和平板。在展示不同的Tabs页签以适应手机和平板时&#xff0c;ArkTS主要依赖于布局和组件的灵活性&#xff0c;以及响应式设…...

Docker下载途径

Docker不是Linux自带的&#xff0c;需要我们自己安装 官网&#xff1a;https://www.docker.com/ 安装步骤&#xff1a;https://docs.docker.com/engine/install/centos/ Docker Hub官网(镜像仓库)&#xff1a;https://hub.docker.com/ 在线安装docker 先卸载旧的docker s…...

Windows: 如何实现CLIPTokenizer.from_pretrained`本地加载`stable-diffusion-2-1-base`

参考&#xff1a;https://blog.csdn.net/qq_38423499/article/details/137158458 https://github.com/VinAIResearch/Anti-DreamBooth?tabreadme-ov-file 联网下载没有问题&#xff1a; import osos.environ["HF_ENDPOINT"] "https://hf-mirror.com" i…...

MySQL 9从入门到性能优化-慢查询日志

【图书推荐】《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;》-CSDN博客 《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;&#xff08;数据库技术丛书&#xff09;》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…...

ARM学习(33)英飞凌(infineon)PSOC 6 板子学习

笔者来聊一下psoc62 系列板子的知识 1、PSOC62板子介绍 Psoc6-evaluationkit-062S2 与RT-Thread联合推出的一款32位的双core的板子&#xff0c;基于CortexM4以及CortexM0。 管脚兼容Arduio。板载DAP-Link&#xff0c;可以支持调试以及串口&#xff0c;无需外接2MB的Flash以及…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...

codeforces C. Cool Partition

目录 题目简述&#xff1a; 思路&#xff1a; 总代码&#xff1a; https://codeforces.com/contest/2117/problem/C 题目简述&#xff1a; 给定一个整数数组&#xff0c;现要求你对数组进行分割&#xff0c;但需满足条件&#xff1a;前一个子数组中的值必须在后一个子数组中…...