介绍 Vue是什么 & lt; template>
,& lt; div id=癮pp"比;
& lt;才能div 类=癷con-add-50",:, @click=& # 39;点击# 39;,@touchmove=& # 39; touchmove& # 39;, @touchstart=& # 39; touchstart(这个事件美元)& # 39;,@touchend=& # 39; touchend& # 39;祝辞& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;应用# 39;
,数据(){
返回{才能
,,/* - - - - - - - - - -图标样式变量- - - - - - - - - - - - - - - */,,iconrotate: 45,//旋转度
,,icontranslateX: 100//沿x轴位移px
,,icontranslateY: 100//沿y轴位移px
,,/* - - - - - - - - - -拖动计算变量- - - - - - - - - - - - */,,mouseX: 0,
,,像老鼠的:0,
,,objX: 0,
,,objY: 0,
,,isDown:假的
,,}
},
,方法:{
点击才能:函数(){//图标点击事件
,,if (this.iconrotate==0), {
,,,,this.iconrotate=315;
,,}else {
,,,this.iconrotate=0;
,,}
,,},
touchstart才能:功能(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 =,真的;
,,},
touchmove才能:函数(e) {//finger move 触发
,,let x =, e.touches [0] .clientX;
,,let y =, e.touches [0] .clientY;
,,if (this.isDowm), {
,,,,this.icontranslateX =,方法(x),安康;方法(this.mouseX), +,方法(this.objX);
,,,,this.icontranslateY =,方法(y),安康;方法(this.mouseY), +,方法(this.objY);
,,}
,,},
touchend才能:函数(e) {//finger 得到touch 用notouch
,,if (this.isDowm), {
,,,,let x =, e.touches [0] .clientX;
,,,,let y =, e.touches [0] .clientY;
,,,,this.icontranslateX =,方法(x),安康;方法(this.mouseX) +,方法(this.objX);
,,,,this.icontranslateY =,方法(y),安康;方法(this.mouseY) +,方法(this.objY);
,,,,this.isDowm=false;
,,}
,,}
},
,计算:{
iconstyle才能:函数(){//图标动态样式
,,let arr =, new 数组();
,,arr.push(& # 39;变换:& # 39;);//注意:先移动后旋转,实现原地旋转,先旋转后移动,位置按照旋转后的新坐标系确定
,,arr.push (& # 39; translateX (& # 39; + this.icontranslateX + & # 39; px), & # 39;);
,,arr.push (& # 39; translateY (& # 39; + this.icontranslateY + & # 39; px), & # 39;);
,,arr.push(& # 39;旋转(& # 39;+ this.iconrotate + & # 39;度),& # 39;);
,,return arr.join (“;”);
,,}
,}
}
& lt;/script>
& lt; style>
# app {
,字体类型:& # 39;Avenir& # 39;,, Helvetica,, Arial,,无衬线;
,-webkit-font-smoothing:平滑;
,-moz-osx-font-smoothing:灰度;
,text-align:中心;
,颜色:# 2 c3e50;
,margin-top: 60 px;
}
,/*加号*/.icon-add-50 {
位置:,才能相对;
,,box-sizing: border-box;
,,宽度:50 px;
,,身高:50 px;
边境才能:2 px solid 灰色;
,,这个特性:50%;
不必才能:darkgrey 0 px 0 px 2 px 2 px;
,,背景颜色:CornflowerBlue;
}
.icon-add-50:{之前
,,内容:& # 39;& # 39;;
位置:才能,绝对;
,,宽度:30 px;
,,高度:2 px;
,,左:50%;
,,:50%;
,,margin-left: -15 px;
,,margin-top: 1 px;
,,背景颜色:白色;
}
.icon-add-50:{后
,,内容:& # 39;& # 39;;
位置:才能,绝对;
,,宽度:2 px;
,,身高:30 px;
,,左:50%;
,,:50%;
,,margin-left: 1 px;
,,margin-top: -15 px;
,,背景颜色:白色;
}
null
这篇文章主要介绍Vue如何实现按钮旋转和移动位置,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
<强> 1。静态效果图
铬移动端浏览模式下可拖动按钮处于任意位置,并且点击可旋转按钮
<强> 2。代码
