Vue element ui彈框實現拖拽功能

2021-09-29 10:16:59 字數 1091 閱讀 6481

第一步

在src目錄中新建directive資料夾,然後在裡面再新建乙個el-drag-dialog資料夾,裡面寫兩個js檔案,drag.js和index.js,也是就封裝自定義指令。

第二步

drag.js 直接複製即可

export default  else 

})()

dialogheaderel.onmousedown = (e) => else

document.onmousemove = function(e) else if (left > maxdragdomleft)

if (-(top) > mindragdomtop) else if (top > maxdragdomtop)

// 移動當前元素

dragdom.style.csstext += `;left:$px;top:$px;`

// emit ondrag event

vnode.child.$emit('dragdialog')

}document.onmouseup = function(e)

}}}

第三步

index.js檔案

import drag from './drag'

import vue from 『vue』

const install = function(vue)

if (window.vue)

drag.install = install

export default drag

最後一步

import eldragdialog from "@/directive/el-drag-dialog";//引入檔案

在export default中//

directives: ,

在彈框中 v-el-drag-dialog //這個就是我們寫好的自定義元件

希望可以幫助到您!!!

layui彈框元件多層彈框的使用 隨筆

效果圖 父視窗開啟子視窗並傳值 type 可傳入的值有 0 資訊框,預設 1 頁面層 2 iframe層 3 載入層 4 tips層 layer.open end function 子視窗獲取父視窗引數var billtermuuid getquerystring billtermuuid var ...

js彈框 總結

messager.alert asasasasa jquery 非同步的,頁面多個提示框,邏輯不對.故而選用最原始的js 彈框 alert 已過發車時間 或者 車票已檢票 確認給該車票退保嗎?需求說 要有確認按鈕,就如下操作了 if confirm 已過發車時間 或者 車票已檢票 確認給該車票退保嗎...

UIAlertController 彈框4步走

uialitercontroller的使用方式與之前的uialterview的區別還是比較大的,剛開始用可能需要學習一下。典型的使用方法如下 1 uialertcontroller alert uialertcontroller alertcontrollerwithtitle 郵箱格式不正確 me...