vue.js可拖拽的悬浮组件
2019-04-29
main.js
这里用到了vue的自定义指令,实现拖拽的功能
Vue.directive('move', {
inserted: function(a) {
// 鼠标按下事件
a.onmousedown = function(e) {
var disX = e.clientX - a.offsetLeft
var disY = e.clientY - a.offsetTop
if (a.setCapture) {
a.setCapture()
}
// 鼠标移动事件-----给文档流绑定移动事件
document.onmousemove = function(e) {
e.preventDefault()
var L = e.clientX - disX
var T = e.clientY - disY
L = Math.min(Math.max(L, 0), document.documentElement.clientWidth - a.offsetWidth)
T = Math.min(Math.max(T, 0), document.documentElement.clientHeight - a.offsetHeight)
a.style.left = L + 'px'
a.style.top = T + 'px'
}
// 鼠标离开事件
document.onmouseup = function() {
document.onmousemove = document.onmousedown = null
if (a.releaseCapture) {
a.releaseCapture()// 拖动后在解除事件锁定
}
}
}
}
})
drag.vue
想要换成什么组件,功能,样式,直接根据需要自己修改即可
<template>
<div id="app">
<div>
<el-tooltip class="item"
effect="dark"
content="切换列表/视图"
placement="top-start">
<div class="squal"
v-move>
<el-switch style="display: block;left:50%;top:50%;transform:translate(-50%,-50%);"
@change="list2view"
v-model="value4"
active-color="#13ce66"
inactive-color="#ff4949"
active-text=""
inactive-text="">
</el-switch>
</div>
</el-tooltip>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value4: true
}
},
methods: {
list2view() {
alert(111)
}
}
}
</script>
<style>
.squal {
width: 3rem;
height: 3rem;
text-align: center;
background: #f2f6fc;
position: absolute;
right: 12%;
bottom: 13%;
border-radius: 50%;
z-index: 500;
}
</style>