一键生成个人网站,wordpress 修改数据库表,禅城建设网站,网站被攻击怎么让百度重新蜘蛛自动抓通过自定义指令实现拖拽功能
在main.js里加入drag自定义指令
我自己测试时发现modal不管如何设置宽度#xff0c;居中等#xff0c;他的初始的left都为0#xff0c;如果不设置好#xff0c;容易出现点击后刚开始移动弹窗会偏移一段距离。
Vue.directive(drag, {bind(el)…通过自定义指令实现拖拽功能
在main.js里加入drag自定义指令
我自己测试时发现modal不管如何设置宽度居中等他的初始的left都为0如果不设置好容易出现点击后刚开始移动弹窗会偏移一段距离。
Vue.directive(drag, {bind(el) {// 获取弹窗头部const header el.querySelector(.ant-modal-header)const modal el.querySelector(.ant-modal)// 弹窗头部鼠标变为移动header.style.cursor move// 头部鼠标按下header.onmousedown er {// 得到初始位置// 初始位置left是0top是modal的offsetTopconst xx modal.style.left ? parseInt(modal.style.left.slice(0, -2)) : 0const yy modal.style.top ? parseInt(modal.style.top.slice(0, -2)) : modal.offsetTopconst disX er.clientX - xxconst disY er.clientY - yydocument.onmousemove e {//距离 为 移动的位置-初始位置const left e.clientX - disXconst top e.clientY - disY// 设置整个弹窗的距左距右位置modal.style.left left pxmodal.style.top top px}document.onmouseup () {document.onmousemove nulldocument.onmouseup null}}}
}) 在modal使用了centered时会出现移动的一瞬间弹窗偏移严重的问题而且弹窗上下居中的class名字在这里拿不到所以只能再建一个dragcenter自定义指令。
// 自定义代码实现弹窗拖动效果 modal居中时
Vue.directive(dragcenter, {bind(el) {// ant-modal-centered在这里取不到// const centered el.querySelector(ant-modal-centered)// console.log(centered, centered)// 获取弹窗头部const header el.querySelector(.ant-modal-header)const modal el.querySelector(.ant-modal)// 弹窗头部鼠标变为移动header.style.cursor move// 头部鼠标按下header.onmousedown er {// 得到初始位置// 居中的话 初始位置为0或已经移动过的位置const disX modal.style.left ? parseInt(modal.style.left.slice(0, -2)) : 0const disY modal.style.top ? parseInt(modal.style.top.slice(0, -2)) : 0document.onmousemove e {//距离 为 移动的位置-初始位置const left disX e.clientX - er.clientXconst top disY e.clientY - er.clientY// 设置整个弹窗的距左距右位置modal.style.left left pxmodal.style.top top px}document.onmouseup () {document.onmousemove nulldocument.onmouseup null}}}
})使用时modal未使用centered则用v-drag使用centered时则用v-dragcenter。
