Maintenant, je vais partager avec vous une méthode Vue.js pour réaliser un glissement aléatoire d'images. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.
Les principaux codes sont les suivants :
<template> <p id="test_3"> <img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> </p> </template> <script> export default{ data:function(){ return{ canDrag: false, x0:0, y0:0, x1:0, y1:0, style:null } }, methods:{ start:function(e){ //鼠标左键点击 if(e.button==0){ this.canDrag=true; //记录鼠标指针位置 this.x0=e.clientX; this.y0=e.clientY; } }, stop:function(e){ this.canDrag=false; }, move:function(){ if(this.canDrag==true){ this.x1=e.clientX; this.y1=e.clientX; let x=this.x1-this.x0; let y=this.y1-this.y0; let img=document.querySelector("#test_3 img"); this.style=`left:${img.offsetLeft+x}px;top:${img.offsetTop+y}px`; this.x0=this.x1; this.y0=this.y1; } } } } </script>
Ce qui précède est ce que J'ai compilé pour vous, j'espère que cela sera utile à tout le monde à l'avenir.
Articles associés :
Solution au problème de superposition d'options de sélection dans layui
Événement personnalisé Vue.js Entrée de formulaire méthode des composants
Un résumé de plusieurs façons d'enregistrer des composants avec vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!