当前位置: 首页 > 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以及…...

个人开发者如何利用 Taotoken 管理多个项目的 AI 调用成本

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 个人开发者如何利用 Taotoken 管理多个项目的 AI 调用成本 对于独立开发者或自由职业者而言&#xff0c;同时维护多个小型项目是常…...

从零构建现代化前端CLI工具:以martmart-cli为例的工程实践

1. 项目概述&#xff1a;一个为MartMart设计的现代化CLI工具 如果你是一名前端开发者&#xff0c;或者正在参与一个基于现代JavaScript框架&#xff08;比如React、Vue&#xff09;的项目&#xff0c;那么你一定对“脚手架”和“命令行工具”这两个词不陌生。从早期的 create-…...

如何快速集成Prometheus和Jaeger:Echo框架第三方中间件终极指南

如何快速集成Prometheus和Jaeger&#xff1a;Echo框架第三方中间件终极指南 【免费下载链接】echo High performance, minimalist Go web framework 项目地址: https://gitcode.com/gh_mirrors/ec/echo Echo是一个高性能、极简的Go Web框架&#xff0c;为开发者提供了轻…...

别再傻傻在线等了!手把手教你用命令行精准定制VS2022离线安装包(附.NET/C++/MFC组件命令)

精准定制VS2022离线安装包&#xff1a;命令行高效配置指南 在开发团队协作或特殊网络环境下&#xff0c;Visual Studio 2022的离线安装成为刚需。但直接下载完整离线包不仅耗时&#xff08;超过25GB&#xff09;&#xff0c;还会占用大量存储空间——而实际上&#xff0c;90%的…...

如何快速解密QMC音频文件:qmc-decoder完整使用指南

如何快速解密QMC音频文件&#xff1a;qmc-decoder完整使用指南 【免费下载链接】qmc-decoder Fastest & best convert qmc 2 mp3 | flac tools 项目地址: https://gitcode.com/gh_mirrors/qm/qmc-decoder 你是否遇到过从音乐平台下载的歌曲无法在其他播放器播放的情…...

告别 Origin 内卷|虎贲等考 AI 科研绘图,一键出期刊级学术图

很多做毕业论文、发期刊、做课题的同学和科研人&#xff0c;都卡在同一个难题上&#xff1a;论文写得再好&#xff0c;却栽在科研绘图上。想用专业软件&#xff0c;Origin、Visio、GraphPad 上手难、参数复杂、调试半天出不来一张合格图&#xff1b;用 Excel、PPT 随手做图&…...

医疗软件开发框架Framewright:HIPAA合规与FHIR集成实践

1. 项目概述&#xff1a;一个为医疗软件量身定制的开发框架 如果你在医疗软件行业摸爬滚打过几年&#xff0c;一定会对开发过程中的那些“特殊要求”深有体会。这不仅仅是写个增删改查的CRUD应用那么简单&#xff0c;你得时刻绷紧神经&#xff0c;处理HIPAA合规、处理复杂的医学…...

异构GPU推理优化:Tessera架构解析与实践

1. 异构GPU推理的性能瓶颈与挑战在当前的AI推理服务部署中&#xff0c;混合使用不同代际的GPU已经成为提升性价比的常见做法。比如将最新的H100与相对便宜的L40S搭配使用&#xff0c;或者将计算密集型的B200与内存优化的H100组合部署。然而&#xff0c;这种异构环境下的资源利用…...

Prompt工程实战:从CRISPE框架到垂直应用,解锁AI模型高效协作

1. 项目概述与核心价值 如果你正在寻找一套能真正“榨干”ChatGPT、Midjourney、Stable Diffusion等主流AI模型潜力的中文提示词&#xff08;Prompt&#xff09;集合&#xff0c;那么你找对地方了。 langgptai/wonderful-prompts 这个开源项目&#xff0c;正是由《ChatGPT中文…...

全域矩阵防封指南:脱离“连点器”思维,揭秘店群RPA底层的跨平台指纹隔离基建

大家好&#xff0c;我是林焱&#xff0c;一名专注电商底层业务逻辑与 RPA 自动化架构定制的独立开发者。 在 CSDN 的私信里&#xff0c;最近很多同行都在向我大吐苦水&#xff1a;“林大&#xff0c;我用 Python 写了一套非常完美的自动化脚本&#xff0c;单号跑的时候无比丝滑…...