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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...