Vue 단추 회전 과 이동 위치의 인 스 턴 스 코드 구현
크롬 이동 단 탐색 모드 에서 드래그 단 추 를 임의의 위치 에 두 고 회전 단 추 를 누 르 십시오
2.코드
<template>
<div id="app">
<div class="icon-add-50" :style="iconstyle" @click='click' @touchmove='touchmove' @touchstart='touchstart(this,$event)' @touchend='touchend'></div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
/*-------- --------------*/
iconrotate:45,// deg
icontranslateX:100,// x px
icontranslateY:100,// y px
/*-------- ------------*/
mouseX:0,
mouseY:0,
objX:0,
objY:0,
isDown:false
}
},
methods:{
click:function(){//
if (this.iconrotate==0) {
this.iconrotate=315;
}else {
this.iconrotate=0;
}
},
touchstart:function(obj,e){//finger touch
this.objX = this.icontranslateX;
this.objY = this.icontranslateY;
this.mouseX = e.touches[0].clientX;
this.mouseY = e.touches[0].clientY;
this.isDowm = true;
},
touchmove:function(e){//finger move
let x = e.touches[0].clientX;
let y = e.touches[0].clientY;
if (this.isDowm) {
this.icontranslateX = parseInt(x) - parseInt(this.mouseX) + parseInt(this.objX);
this.icontranslateY = parseInt(y) - parseInt(this.mouseY) + parseInt(this.objY);
}
},
touchend:function(e){//finger from touch to notouch
if (this.isDowm) {
let x = e.touches[0].clientX;
let y = e.touches[0].clientY;
this.icontranslateX = parseInt(x) - parseInt(this.mouseX)+ parseInt(this.objX);
this.icontranslateY = parseInt(y) - parseInt(this.mouseY)+ parseInt(this.objY);
this.isDowm=false;
}
}
},
computed:{
iconstyle:function(){//
let arr = new Array();
arr.push('transform:');// : , ; ,
arr.push('translateX('+this.icontranslateX+'px) ');
arr.push('translateY('+this.icontranslateY+'px) ');
arr.push('rotate('+this.iconrotate+'deg) ');
return arr.join("");
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/* */
.icon-add-50{
position: relative;
box-sizing: border-box;
width: 50px;
height: 50px;
border: 2px solid gray;
border-radius: 50%;
box-shadow:darkgrey 0px 0px 2px 2px;
background-color: CornflowerBlue;
}
.icon-add-50:before{
content: '';
position: absolute;
width: 30px;
height: 2px;
left: 50%;
top: 50%;
margin-left: -15px;
margin-top: -1px;
background-color: white;
}
.icon-add-50:after{
content: '';
position: absolute;
width: 2px;
height: 30px;
left: 50%;
top: 50%;
margin-left: -1px;
margin-top: -15px;
background-color: white;
}
</style>
총결산위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 실현 버튼 회전 과 위 치 를 이동 하 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.