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接口，并指定返回的类型和参数类…...
Java设计模式之单例模式
单例模式是一种设计模式，它的目的是确保一个类只有一个实例，并提供一个全局访问点来访问该实例。这个模式通常在需要控制资源访问权、限制实例化数量或实现全局共享时使用。 在实现单例模式时，一般会定义一个私有的构造函数，以防…...
Vue3 学习
基础 js:https://www.bilibili.com/video/BV15T411j7pJ/?spm_id_from333.337.search-card.all.click&vd_source9747207be61edfe4ec62226fc79b3589 官方文档： https://cn.vuejs.org/ 版本之间差异在关于---》版本发布 https://cn.vuejs.org/about/release…...
Error obtaining UI hierarchy Error taking device screenshot: EOF/NULL 解决办法
RT：Error obtaining UI hierarchy Error taking device screenshot: EOF/NULL 解决办法 关于monitor开发神器我就不多说了，但是假如我们在开发中遇到如上问题该怎么处理呢？别慌下面会有方法，不过不是对任何机型都有效，…...
Java框架之王：Spring的崛起与进化
在Java世界中，Spring框架无疑已经成为了一个传奇。它为开发者提供了强大的工具和丰富的功能，使得构建高质量、可扩展的Java应用程序变得轻松便捷。本文将带您领略Spring的魅力，以及它在过去几年中的崛起和进化。 一、Spring的崛起 Spring框…...
【位运算】位运算常用技巧总结
目录 前言 一.常见的小问题 1.给定一个数n,确定它的二进制表示中的第x位是0还是1 2.给定一个数n，将它的二进制表示中的第x位修改成1 3.给定一个数n，将它的二进制表示中的第x位修改成0 4.给定一个数n，提取它的二进制表示中最右侧的1&…...
【STM32】IIC使用中DMA传输时 发送数据总少一个的问题
问题描述 在使用STM32 I2C数据发送过程中，发现每轮实际发送出去的数据总比在DMA配置中设定的传输数据个数要少一个。比方说：DMA配置里设定的传输数据个数是10个，结果发现在总线上只能发出9个，经过进一步发现是少了最后一个数据。…...
记录layui数据表格使用文件上传按钮
一、前言 虽然用到这种的情况不多，但是还是记录下 二、相关代码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html;charsetutf-8"/><meta name"renderer" content&quo…...
c++之枚举
1、背景 在开发代码的过程中，vector类型数组a的index取了一个枚举值CTR，eg：a[CTR]，刚开始以为是map类型，后面看不是，简单的看了下c的enum类型，原来enum按顺序默认为数字。 2、enum简介 2.1、…...
LeetCode 热题 100（七）：105. 从前序与中序遍历序列构造二叉树、14. 二叉树展开为链表
题目一： 105. 从前序与中序遍历序列构造二叉树https://leetcode.cn/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 思路：依据前序遍历的根左右和中序遍历的左根右， 且根左长度＝左根 代码： …...
机器学习笔记 - 在表格数据上应用高斯混合GMM和网格搜索GridSearchCV提高分类精度的机器学习案例
1、需求及数据集说明 这是一项二分类任务，评估的是分类准确性（正确预测的标签百分比）。训练集有1000个样本，测试集有9000个样本。你的预测应该是一个9000 x 1的向量。您还需要一个Id列（1到9000），并且应该包括一个标题。格式如下所示： Id,Solution 1,0 2,1 3,1 ... 900…...