vue小测试之拖拽、自定义事件
在开始之前我去复习了一下，clientX、clientY、pageX、pageY的区别，对于不熟悉offsetLeft和offsetTop的也可以在这里去复习一下。
vue拖拽指令之offsetX、clientX、pageX、screenX_wade3po的博客-CSDN博客_vue offset
客户区坐标位置（clientX，clientY）
鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的clientX和clientY属性中，所有浏览器都支持这两个属性。
页面坐标位置（pageX，pageY）
pageX和pageY两个属性代表鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。在没有滚动的情况下，clientX和cilentY与pageX和pageY是相等的
屏幕坐标位置（screenX，screenY）
鼠标事件发生的时候，不仅仅会有相对于浏览器的窗口，还有一个相对于整个电脑屏幕的位置。
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script><style>* {margin: 0;padding: 0;}.box {position: absolute;top: 0;left: 0;text-align: center;line-height: 100px;width: 100px;height: 100px;border-radius: 10%;background-color: greenyellow;margin-top: 10px;}</style>
</head><body><div id="root"><com-son :msg="haha"></com-son></div><template id="box"><div><h3 class="box" v-for="(item,idx) in dmsg" :key="idx" @mousedown="drag">{{item}}</h3></div></template><script>// 创建组件let ComSon = {template: "#box",props: ['msg'],data() {return {dmsg: this.msg}},methods: {drag(e) {//鼠标摁下事件var x = e.clientX - e.target.offsetLeft;var y = e.clientY - e.target.offsetTop;// console.log(x, y);//鼠标移动事件document.onmousemove = function (el) {e.target.style.left = el.pageX - x + 'px'e.target.style.top = el.pageY - y + 'px'},//鼠标抬起事件document.onmouseup = function () {// 设置随机颜色var bgc = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256)e.target.style.backgroundColor = bgc;document.onmousemove = null;}}}}Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data() {return {haha: ['宝子们', '周末愉快', '愉快吖', '哈哈', '~！！！', '这是', '作业哟']}},methods: {},components: {ComSon,}});</script>
</body></html>效果图：
案列二：自定义事件的子传父
1、css板块代码
#root {width: 900px;height: 600px;padding: 10px;display: flex;justify-content: space-between;}.sh {width: 400px;height: 100%;background-color: rgb(233, 157, 157);padding: 10px;}.shop {width: 100%;height: 150px;background-color: white;display: flex;align-items: center;box-sizing: border-box;overflow: hidden;margin-bottom: 10px;}.bgcont {width: 400px;height: 100%;background-color: rgb(157, 231, 233);padding: 10px;}.shop img {width: 120px;margin-left: 10px;}.shop_context {margin: 0px 10px;}.shop_context>p {overflow: hidden;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 14px;color: rgb(112, 111, 111);}.shop_context div {display: flex;justify-content: space-between;align-items: center;}.shop_context div>p {color: rgb(71, 70, 70);font-size: 14px;}.active {color: darkorange !important;}.son {width: 100%;height: 100%;background-color: #fff;display: flex;flex-direction: column;align-items: center;}.son img {margin-top: 20px;width: 270px;height: 290px;border: darkgrey 1px solid;}.son p {margin: 0px 20px;font-size: 15px;}.son h2:last-of-type {color: red;}.son button {border: none;width: 250px;height: 45px;border-radius: 10px;background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}2、body部分
<body><div id="root"><div class="sh"><div class="shop" v-for="(item, index) in list" :key="index" @click="shopChuan(list[index])"><img :src="item.imgsrc" alt=""><div class="shop_context"><h3>{{item.name}}</h3><p>{{item.context}}</p><div><h3>￥{{item.price}}缘</h3><p v-text="item.flag == true?'已购买':'未购买'" :class="item.flag == true?'active':''"></p></div></div></div></div><div class="bgcont" v-if="isShow"><com-son :propsitem="propsitem" @haha="hahaha"></com-son></div></div>3、vue代码
template代码是放在body中的，也可以将它写在组件里，依据个人喜好设置
<template id="son"><div class="son"><!-- <h1>子组件</h1> --><img :src="propsitem.imgsrc" alt=""><h3>{{propsitem.name}}</h3><p>{{propsitem.context}}</p><h3>￥{{propsitem.price}}缘</h3><button @click="change">点击购买</button></div></template><script>let ComSon = {template: "#son",props: {// 对象验证propsitem: {type: Object}},methods: {change() {if (this.propsitem.flag === true) {alert("已经购买过了~~~")return}this.$emit("haha", this.propsitem.id)alert("购买成功~~~")}}}const vm = new Vue({el: '#root',data() {return {list: [{id: 111,name: "小米平板5 Pro",imgsrc: "./img/tp3.png",context: "更大的屏幕，带来更强的拓展性高效的多任务处理灵活的多设备互联，你想做的每件事，从未如此得心应手小米平板5 Pro 12.4英寸生产力的更多可能性，由此展开。",price: 2999,flag: false,},{id: 222,name: "米家直驱洗烘一体机",imgsrc: "./img/tp2.png",context: "「以旧换新优惠50元，以旧换新到手价1949元！」「第六代DD直驱电机！智能洗烘！微蒸空气洗！高温杀菌，电机10年质保！」DD直驱电机/智能洗烘/微蒸空气洗/高温除螨洗/巴氏杀菌",price: 1999,flag: true,},{id: 333,name: "米家全能扫拖机器人",imgsrc: "./img/tp1.png",context: "免洗集尘全自动，一机解放双手，自动洗拖布 | 自动集尘 | 自动热烘干 | 自动补水 | 专用清洁剂，S-Cross AI™ 超感知立体识别避障系统，智能分配用水比例，拖地不中断",price: 3999,flag: false,},],isShow: false,propsitem: {}}},methods: {shopChuan(e) {this.isShow = trueconsole.log(e);this.propsitem = e},hahaha(b) {// console.log(b);for (let i of this.list) {if (i.id === b) {i.flag = true// console.log(i.id);}}}},components: {ComSon}})</script>效果展示：
相关文章：
vue小测试之拖拽、自定义事件
在开始之前我去复习了一下，clientX、clientY、pageX、pageY的区别，对于不熟悉offsetLeft和offsetTop的也可以在这里去复习一下。 vue拖拽指令之offsetX、clientX、pageX、screenX_wade3po的博客-CSDN博客_vue offset 客户区坐标位置（clientX&…...
时序预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机时间序列预测(多指标评价)
时序预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机时间序列预测(多指标评价) 目录 时序预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机时间序列预测(多指标评价)效果一览基本描述程序设计参考资料 效果一览 基本描述 MATLAB实现DBN-SVM深度置信网络结合支持向量机…...
Python中异步编程是什么意思？ - 易智编译EaseEditing
异步编程是一种编程模式，用于处理可能会导致程序等待的操作，例如网络请求、文件读写或长时间的计算任务，而不会阻塞整个程序的执行。 在传统的同步编程中，当程序执行一个耗时的操作时，它会等待该操作完成，…...
【JS真好玩】自动打字机效果
目录 一、前言二、布局分析三、总体样式四、中间部分五、底部5.1 div5.2 label5.3 input 六、JS让它动起来6.1定时器6.2 字符串处理6.2.1 slice6.2.2 splice6.3.3 split 七、总结 一、前言 大家好，今天实现一个自动打字机效果，旨在实现一些网上很小的de…...
宠物赛道，用AI定制宠物头像搞钱项目教程
今天给大家介绍一个非常有趣，而粉丝价值又极高，用AI去定制宠物头像或合照的AI项目。 接触过宠物行业应该知道，获取1位铲屎官到私域，这类用户的价值是极高的，一个宠物粉，是连铲个屎都要花钱的，每…...
基于vue和element的脚手架【vue-element-admin 和vue-element-plus-admin 】
vue-element-admin vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现 介绍 | vue-element-adminA magical vue adminhttps://panjiachen.github.io/vue-element-admin-site/zh/guide/ vue-element-plus-admin vue-element-plus-admin 是一…...
推荐Java开发常用的工具类库google guava
Guava Guava是一个Google开源的Java核心库，它提供了许多实用的工具和辅助类，使Java开发更加简洁、高效、可靠。目前和hutool一起，是业界常用的工具类库。shigen也比较喜欢使用，在这里列举一下常用的工具类库和使用的案例。 参考…...
stencilJs学习之构建 Drawer 组件
前言 在之前的学习中，我们已经掌握了 stencilJs 中的一些核心概念和基础知识，如装饰器 Prop、State、Event、Listen、Method、Component 以及生命周期方法。这些知识是构建复杂组件和应用的基础，而抽屉组件是一个很好的示例，能够…...
hbase 国内镜像 极速下载
文章目录 国内镜像汇总-极速下载【JavaPub版】 lucene国内镜像 https://mirrors.cloud.tencent.com/apache/hbase/ 国内镜像汇总-极速下载【JavaPub版】...
Linux驱动——Tiny4412芯片_Source Insight的下载+Linux3.5内核下工程的创建
文章目录 前言Source Insight的下载1.下载地址2.下载步骤 linux3.5内核下工程的创建 前言 本博客仅作为笔记总结，以及帮助有需要的人，不作权威解释。 Source Insight的下载 1.下载地址 官网：https://www.sourceinsight.com/ 另外可以选择…...
rust交叉编译 在mac下编译linux和windows
系统版本macbook proVentura 13.5linux ubuntu22.04.3 LTS/18.04.6 LTSwindowswindows 10 专业版 20H2mac下rustc --versionrustc 1.74.0-nightly (58eefc33a 2023-08-24)查看当前系统支持的交叉编译指定系统版本列表 rustup target list如果已经安装这里会显示（installed）。…...
linux离线环境安装redis
先检查gcc版本，使用gcc --version进行检查，版本在5以下的，安装redis要安装redis6以下的版本 如果没有gcc命令，要先安装gcc命令。因为是离线环境，yum命令什么的用不了。为了安装gcc，进行了几种尝试。 1、下…...
记录学习--字节码解析try catch
1.示例代码 Testpublic void someTest() {String s "111";try {s "222";int i 1/0;} catch (Exception e){e.printStackTrace();System.out.println(s);}System.out.println(s);}2.示例代码对应的字节码 0 ldc #2 <111>2 astore_13 ldc #3 <22…...
多线程与高并发——并发编程（3）
文章目录 三、锁1 锁的分类1.1 可重入锁、不可重入锁1.2 乐观锁、悲观锁1.3 公平锁、非公平锁1.4 互斥锁、共享锁2 深入synchronized2.1 类锁、对象锁2.2 synchronized的优化2.3 synchronized实现原理2.4 synchronized的锁升级2.5 重量级锁底层 ObjectMonitor3 深入ReentrantLo…...
关于内网主备+https
先openssl证书 整体流程为： 1、页面访问为https，在电脑修改hosts文件，如域名为 babaozhou.com, 则配置为 ip1 babaozhou.com，ip2 babaozhou.com； 也就是说同域名关联两个ip，这样如果服务器1ping不通了则可…...
java入坑之网络编程
一、 网络基础知识 1.1网卡 1.2IP地址 1.3端口 1.4保留IP 1.5网络协议 二、UDP 编程 2.1相关概念 计算机通讯：数据从一个IP的port出发（发送方），运输到另外一个IP的port（接收方） UDP：无连接无…...
A Survey on Large Language Model based Autonomous Agents
本文是LLM系列的文章，针对《A Survey on Large Language Model based Autonomous Agents》的翻译。 基于大模型的自动agents综述 摘要1 引言2 基于LLM的自动代理构建3 基于LLM的自动代理应用4 基于LLM的自动代理评估5 相关综述6 挑战6.1 角色扮演能力6.2 广义与人对…...
Integer、Long 等包装类 == 值判断、地址判断与缓存
先看下以下代码和输出 public static void main(String[] args) throws Exception{Integer a-128;Integer aa-128;System.out.printf("aaa? %s \n",aaa);Integer b127;Integer bb127;System.out.printf("bbb? %s \n",bbb);Integer c128;Integer cc128;Sy…...
numpy学习:reshape和resize
.reshape 与 .resize reshape：有返回值，所谓有返回值，即不对原始多维数组进行修改； resize：无返回值，所谓无返回值，即会对原始多维数组进行修改；...
JPA在不写sql的情况下实现模糊查询
本文已收录于专栏 《Java》 目录 背景介绍概念说明单字段模糊匹配：多字段模糊匹配： 实现过程代码实现1.写一个实体类去实现Specification接口，重写toPredicate方法2.定义一个接口去继承JpaRepository接口，并指定返回的类型和参数类…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
如何更改默认 Crontab 编辑器 ？
在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...