在放公共js的地方
export default (Vue) => {
Vue.directive('drag', {
inserted: function (el) {
const oDiv = el // 获取当前元素
oDiv.onmousedown = (e) => {
// 算出鼠标相对元素的位置
// const disX = e.clientX - oDiv.offsetLeft
const disY = e.clientY - oDiv.offsetTop
document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
// const left = e.clientX - disX
const top = e.clientY - disY
// oDiv.style.left = left + 'px'
oDiv.style.top = top + 'px'
}
document.onmouseup = (e) => {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
}
在main.js中全局注入
import directives from './assets/js/drag.js'
Vue.use(directives)
在需要使用拖拽的div中加 v-drag
<div class="popup" @click="togglebox" v-drag>
<div class="tip">
<i :class="active?'el-icon-arrow-right':'el-icon-arrow-left'">
</i>
右侧展开
</div>
//可以展开
<transition name="boxshow">
<div class="bottom" v-show="boxshow" v-drag>
<div class="company">xxxxxxx</div>
<div>xxxxx <span class="blue">{{ authUserCurrent }}</span>xxxxx <span
class="blue">{{ authUserMax - authUserCurrent }}</span>人
</div>
<el-button type="primary" @click="addRoutes1">xxxxx</el-button>
</div>
</transition>
</div>
.boxshow-enter-active,
.boxshow-leave-active {
transition: all 0.5s ease;
}
.boxshow-leave-active,
.boxshow-enter {
width: 0px !important;
}