elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo
更新時間：2019年07月03日 10:05:22 作者：```...簡單點
這篇文章主要介紹了elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
調(diào)試了好久, 還能湊合用, 請直接看DOME 示例,復(fù)制就能用:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- import CSS -->
<link rel="stylesheet" >
<style media="screen" type="text/css">
#appLoading {
width: 100%;
height: 100%;
}
#appLoading span {
position: absolute;
display: block;
font-size: 50px;
line-height: 50px;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<div id="appLoading">
<span>Loading...</span>
</div>
<div id="app" style="display: none">
<el-dialog title="提示" width="50%" :visible.sync="startUsingDialog" v-dialog_drag>
<span> 您是否確定啟用次記錄?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="startUsingSubmit()" type="danger" :loading="startUsingLoading">啟用</el-button>
<el-button @click="startUsingDiglog=false">取消</el-button>
</span>
</el-dialog>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("body").on("mousedown", '.el-message-box__header', (e) => {
const dialogHeaderEl = document.querySelector('.el-message-box__header')
const dragDom = document.querySelector('.el-message-box')
dialogHeaderEl.style.cursor = 'move'
// 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
// 鼠標(biāo)按下，計算當(dāng)前元素距離可視區(qū)的距離
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
// 獲取到的值帶px 正則匹配替換
let styL, styT
// 注意在ie中 第一次獲取到的值為組件自帶50% 移動之后賦值為px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
let lefts = sty.left
let tops = sty.top
if (sty.left == 'auto') {
lefts = '0px'
}
if (sty.top == 'auto') {
tops = '0px'
}
styL = +lefts.replace(/\px/g, '')
styT = +tops.replace(/\px/g, '')
}
document.onmousemove = function (e) {
// 通過事件委托，計算移動的距離
const l = e.clientX - disX
const t = e.clientY - disY
// 移動當(dāng)前元素
dragDom.style.left = `${l + styL}px`
dragDom.style.top = `${t + styT}px`
dragDom.style.position = `absolute`
// 將此時的位置傳出去
// binding.value({x:e.pageX,y:e.pageY})
}
document.onmouseup = function (e) {
document.onmousemove = null
document.onmouseup = null
}
})
})
Vue.directive('dialog_drag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cursor = 'move'
// 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
dialogHeaderEl.onmousedown = (e) => {
console.log(1);
// 鼠標(biāo)按下，計算當(dāng)前元素距離可視區(qū)的距離
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
// 獲取到的值帶px 正則匹配替換
let styL, styT
// 注意在ie中 第一次獲取到的值為組件自帶50% 移動之后賦值為px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
let lefts = sty.left
let tops = sty.top
if (sty.left == 'auto') {
lefts = '0px'
}
if (sty.top == 'auto') {
tops = '0px'
}
styL = +lefts.replace(/\px/g, '')
styT = +tops.replace(/\px/g, '')
}
document.onmousemove = function (e) {
// 通過事件委托，計算移動的距離
const l = e.clientX - disX
const t = e.clientY - disY
// 移動當(dāng)前元素
dragDom.style.left = `${l + styL}px`
dragDom.style.top = `${t + styT}px`
// 將此時的位置傳出去
// binding.value({x:e.pageX,y:e.pageY})
}
document.onmouseup = function (e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
new Vue({
el: '#app',
data: function () {
return {
startUsingDialog: true,
startUsingLoading: false,
}
},
//頁面加載成功時完成
mounted() {
document.getElementById('app').style.display = 'block';
document.getElementById('appLoading').style.display = 'none';
},
//方法
methods: {
startUsingSubmit() {
this.startUsingLoading=true
this.$confirm("提示", "你好!", {
confirmButtonText: '確定',
cancelButtonText: '取消'
}).then(()=>{
this.startUsingLoading=false
})
this.$message({
showClose: true,
message: '這是一條消息提示',
duration: 0 //表示顯示幾秒, 0 表示不消失
});
}
},
})
</script>
</body>
</html>
ps:下面看下vue-elementUI 彈出框
<div class="dial-header">
<el-dialog title="請選擇適配器" :visible.sync="showFlag" style="width:900px">
<div style="text-align: left; margin: 0;width:400px;" >
<div class="adp" v-for="adapter in adapters" style="width:300px;height:30px;line-height:30px;border-top:none;margin:0px 0px 0px 40px">
<el-radio :label="adapter.ip" style="width:200px;padding-left:40px" v-model="radio"></el-radio>
<div style="display: inline-block;width:30px"><img v-if="!adapter.val" src="../../static/images/grey.png"><img v-if="adapter.val" src="../../static/images/green.png"></div>
</div>
<div style="padding-top:20px;text-align: right">
<el-button type="text" size="small" @click="showFlag = false">取消</el-button>
<el-button type="primary" size="small" @click="radioEvent()">確定</el-button>
</div>
</div>
</el-dialog>
<el-button type="primary" @click="showFlag = true">選擇</el-button>
</div>
<script>
export default {
data () {
return {
showFlag: false,
radio:""
}
},
methods:{
radioEvent(){
this.showFlag = false;
this.adapterSelected = this.radio;
},
}
</script>
總結(jié)
以上所述是小編給大家介紹的elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
今天小編就為大家分享一篇基于vue中對鼠標(biāo)劃過事件的處理方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關(guān)于Vue中使用icon的幾種常用方法,icon圖標(biāo)的使用 Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,需要的朋友可以參考下2023-07-07
路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue中keep-alive組件的作用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
vue集成高德地圖amap-jsapi-loader的實現(xiàn)
本文主要介紹了vue集成高德地圖amap-jsapi-loader的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要為大家介紹了Vue冷門技巧遞歸組件實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了vue中appear的用法,需要的朋友可以參考下2017-08-08
深入理解Vue響應(yīng)式原理及其實現(xiàn)方式
Vue的響應(yīng)式原理是Vue最核心的特性之一，也是Vue能夠為開發(fā)者提供高效便捷的開發(fā)體驗的重要原因之一，這篇文章主要介紹了響應(yīng)式的原理及其實現(xiàn)方式，需要詳細(xì)了解可以參考下文2023-05-05
這篇文章主要給大家介紹了關(guān)于如何使用vue3簡單實現(xiàn)WebSocket通信的相關(guān)資料,WebSocket是全雙工網(wǎng)絡(luò)通信通信協(xié)議,實現(xiàn)了客戶端和服務(wù)器的平等對話,任何一方都可以主動發(fā)送數(shù)據(jù),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vite項目如何集成eslint和prettier問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01