修改了vue3 <script setup>留言板

Лунная ночь

<template><button class="edit_view_checkbox"><input type="checkbox" v-model="editshowInput" value="编辑" /></button><div class="editshowInput" v-if="editshowInput"><div class="textarea_addItem"><textarea placeholder="请输入备注内容" v-model="newItem"></textarea><button @click="addItem">添加</button></div><button class="">完成 <input type="checkbox" v-model="finishshowInput" value="完成" /></button></div><div class="text"><div v-for="(item, index) in items" :key="index" :class="{ finish: item.finish }"><button @click="toggleFinish(index)" v-if="finishshowInput">{{ item.finish ? '取消' : '完成' }}</button><button @click="edit(index)" v-if="finishshowInput">修改</button><span v-show="oindex == index ? true : false" class="textarea_alter"><textarea v-model="newItem"></textarea><button @click="csu">提交</button></span><span class="content_text"><button class="IndexNumber">{{ index + 1 }}</button>{{ item.name }}{{ item.finish ? '(已完成)' : '' }}<button @click="removeItem(index)" v-if="finishshowInput" class="del_btn">删除</button></span></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'
const editshowInput = ref(false)
const finishshowInput = ref(false)const newItem = ref('')
const items = ref([])
const oindex = ref(-1)const addItem = () => {items.value.push({ name: newItem.value, finish: false })saveTodo()newItem.value = ''
}
const removeItem = (index) => {if (confirm('确定要删除所选?')) {items.value.splice(index, 1)saveTodo()}}
const edit = (index) => {if (newItem.value === '' || false) {newItem.value = items.value[index].nameoindex.value = index} else {newItem.value = ''oindex.value = -1}
}
const csu = () => {if (oindex.value === -1) {return}items.value[oindex.value].name = newItem.valueoindex.value = -1newItem.value = ''saveTodo()
}const toggleFinish = (index) => {items.value[index].finish = !items.value[index].finishsaveTodo()
}const saveTodo = () => {try {localStorage.setItem('jottings', JSON.stringify(items.value))} catch (error) {console.error('Failed to save todo items to localStorage:', error)// 可以添加适当的错误处理逻辑,比如向用户显示错误信息}
}const loadTodo = () => {try {const savedItems = JSON.parse(localStorage.getItem('jottings'))if (savedItems) {items.value = savedItems}} catch (error) {console.error('Failed to load todo items from localStorage:', error)// 可以添加适当的错误处理逻辑,比如向用户显示错误信息}
}onMounted(() => {loadTodo()
})
</script><style scoped>
.edit_view_checkbox {position: absolute;transform: translate(-130px, 110px);margin: 0px 10px;-webkit-appearance: none;appearance: none;width: 100px;height: 100px;border-radius: 50%;z-index: 1;background-color: #14475693;box-shadow:inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);border: 0px solid black;& :active {box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}input::after {content: '编辑';width: 100%;height: 100%;/* border: 2px solid #e9f504; */position: absolute;left: -3px;top: 12px;border-radius: 50%;font-size: 50px;color: #e9f504;}input:checked::after {height: 20%;
width: 40px;
border-top: none;
border-right: none;
border-radius: 0;
transform: rotate(-45deg);
transition: all 0.5s ease-in-out;
/* 行高 */
line-height: 50px;
}
}.editshowInput {display: flex;gap: 10px;.textarea_addItem {display: flex;}
}
.text {display: flex;flex-wrap: wrap;gap: 2px;.textarea_alter {display: flex;}.content_text {/* color: hsla(160, 100%, 37%, 1); */color: rgb(255, 255, 255);text-shadow: 1px 1px 1px #000;.IndexNumber {font-size: 25px;}.del_btn {margin-right: 30px;}}
}
.finish {text-decoration: line-through;box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.916);background-color: rgb(191, 210, 255);color: #ffffff;border-radius: 50px;text-shadow: 1px 1px 1px #030303;box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
</style>

图片背景:

body {// 设置背景图片// background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg);background: url('../assets/img/10.jpg') no-repeat center center fixed;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;/* background-position: center 70px;  垂直方向向下偏移80像素 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/17924.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python常见面试题(三)——numpy和pandas

主要讲二者的结合应用 1、基础函数的应用 frame pd.DataFrame(np.random.randn(4, 3), columnslist(bde), index[Utah, Ohio, Texas, Oregon]) 2、lambda函数 也叫匿名函数&#xff0c;即&#xff0c;函数没有具体的名称&#xff0c;不用考虑函数命名&#xff1b;使用lamb…

Spring MVC+mybatis 项目入门:旅游网(二) dispatcher与controller与Spring MVC

个人博客&#xff1a;Spring MVCmybatis 项目入门:旅游网&#xff08;二&#xff09;dispatcher与controller与Spring MVC | iwtss blog 先看这个&#xff01; 这是18年的文章&#xff0c;回收站里恢复的&#xff0c;现阶段看基本是没有参考意义的&#xff0c;技术老旧脱离时代…

若依ruoyi-vue element-ui 横向滚动条 动态横向滚动条

动态横向滚动条 因为每次横向滑动都要到底部&#xff0c;引入插件 https://github.com/mizuka-wu/el-table-horizontal-scroll //动态横向滚动条移入样式 .el-table-horizontal-scrollbar :hover{//高度 变大10%transform: scaleY(1.5) translateY(-10%);//百分之八十亮度&a…

【Spring-01】BeanFactory和ApplicationContext

【Spring-01】BeanFactory和ApplicationContext 1. 容器接口1.1 什么是 BeanFactory1.2 BeanFactory 能做什么&#xff1f; 1. 容器接口 以 SpringBoot 的启动类为例&#xff1a; /*** BeanFactory 与 ApplicationContext的区别*/ SpringBootApplication public class Spring…

Grafana详解

目录 ​编辑 一、Grafana的主要特点 二、Grafana的基本功能 三、Grafana的使用方法 Grafana是一款开源的数据可视化工具&#xff0c;主要用于大规模指标数据的可视化展现。下面将详细介绍Grafana的特点、功能以及基本使用方法。 一、Grafana的主要特点 跨平台性&#xff…

牛客ONT45 距离是K的二叉树节点【中等 宽度优先遍历 Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/e280b9b5aabd42c9b36831e522485622 思路 图&#xff0c;队列 构件图&#xff0c;直接从target出发&#xff0c;扩展到第k层就是答案Java代码 import java.util.*;/** public class TreeNode {* int val 0;* …

vue3+vite解决项目打包后本地图片等资源找不到的问题

1.在vite.config.js里面做如下配置 import { defineConfig } from vite import vue from vitejs/plugin-vueexport default defineConfig({base: ./, // 打包的静态资源引用路径plugins: [vue()], // 放插件用的resolve: {alias: {: /src // 配置/提示符}}, })上述配置主要就是…

C++迈向精通:vector复现与sort复现

vector复现 思考过程 对于vector考虑如下几点&#xff1a; 底层数据结构算法实现方式对外表现形式 这里底层的数据结构采用了顺序表&#xff0c;当然&#xff0c;原版STL中的vector也是采用的顺序表。 算法实现的方式放在代码中去设计 对外表现形式是数组&#xff0c;因此需…

[IMX6ULL驱动开发]-Linux对中断的处理(二)

上一篇文章中&#xff0c;引入了Linux对于中断的一些简略流程以及中断抽象为具体实际形象。此文章主要是继续加深对Linux对中断的处理流程以及一些相应的数据结构。 目录 Linux对中断的扩展&#xff1a;硬件中断、软件中断 多中断处理 中断上下部处理流程 发生中断A&#…

Nginx R31 doc-15-Live Activity Monitoring 实时活动监控

前言 大家好&#xff0c;我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的&#xff0c;可以参考我的另一个项目&#xff1a; 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

SpringBoot整合SpringSecurit,实现ajax的登录、退出、权限校验

1、本文章中SpringBoot整合SpringSecurity&#xff0c;只是基于session方式&#xff0c;并且没有使用到redis。 2、登录、登出都是通过ajax的方式进行。 项目目录&#xff1a; 1、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xm…

FastReport 主子表关系

代码中只需要绑定主表的数据就可以&#xff0c;子表的数据会通过报表中的关连关系自动到数据库中带出。 using CloudSaaS.DB.Handler; using CloudSaaS.Model; using CloudSaaS.DAL; using FastReport; using FastReport.Web; using System; using System.Collections.Generic;…

(2020|ICML PMLR,线性 Transformer,核函数,RNN)Transformer 是 RNN

Transformers are RNNs: Fast Autoregressive Transformers with Linear Attention 公众号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 线性 Transformers 3.1. Transformer 3.2.…

2023、2024国赛web复现wp

2023 Unzip 类型&#xff1a;任意文件上传漏洞 主要知识点&#xff1a;软链接 随便上传一个一句话木马文件&#xff0c;得到一串php代码 根据代码上传zip文件发现进入后还是此页面 代码审计&#xff1a; <?php error_reporting(0); highlight_file(__FILE__);$finfo fin…

Stable Diffusion【写实模型】:逼真,逼真,超级逼真的国产超写实摄影大模型万享XL

今天和大家分享的是一个国产万享系列中使用量最高的大模型:万享XL_超写实摄影&#xff0c;顾名思义&#xff0c;该大模型主要是面向写实摄影&#xff0c;一方面生成的图片人物皮肤纹理细节超级逼真&#xff0c;另一方面对于光影效果的处理也非常到位。对于万享XL超写实摄影大模…

jQuery 下载与快速入门指南

引言 jQuery 是一个广泛使用的 JavaScript 库&#xff0c;它极大地简化了客户端的 HTML 文档遍历、事件处理、动画以及Ajax交互&#xff0c;让Web开发者能够更加高效地实现动态网页效果。本文将指导你如何下载jQuery&#xff0c;并提供一个简单的入门示例来展示其基本用法。 …

揭秘Tensor Core黑科技:如何让AI计算速度飞跃

揭秘 Tensor Core 底层&#xff1a;如何让AI计算速度飞跃 Tensor Core&#xff0c;加速深度学习计算的利器&#xff0c;专用于高效执行深度神经网络中的矩阵乘法和卷积运算&#xff0c;提升计算效率。 Tensor Core凭借混合精度计算与张量核心操作&#xff0c;大幅加速深度学习…

参数高效微调PEFT(二)快速入门P-Tuning、P-Tuning V2

参数高效微调PEFT(二)快速入门P-Tuning、P-Tuning V2 参数高效微调PEFT(一)快速入门BitFit、Prompt Tuning、Prefix Tuning 今天&#xff0c;我们继续了解下来自清华大学发布的两种参数高效微调方法P-Tuning和P-Tuning v2。可以简单的将P-Tuning是认为针对Prompt Tuning的改进…

(二)MySQL 存储引擎

欢迎访问 1. MySQL ⽀持哪些存储引擎&#xff1f;默认使⽤哪个&#xff1f; MyISAM 和 InnoDB&#xff0c;默认InnoDB 2.MyISAM 和 InnoDB 有什么区别&#xff1f; 事务支持&#xff1a; InnoDB 支持事务&#xff0c;具有 ACID&#xff08;原子性、一致性、隔离性、持久性&a…

零基础小白本地部署大疆上云api(个人记录供参考)

文章目录 运行前准备前后端项目运行1.前端项目&#xff1a; 后端项目运行必须先依靠emqx运行必须先依靠redis运行修改后端项目的application.yml文件 运行前准备 1.保证电脑又node.js环境&#xff0c;可以正常使用npm 2.Java的jdk必须是11及以上版本否则无效 3.下载好emqx,red…