快捷導(dǎo)航

elementUI vue this.$confirm 和el-dialog 彈出框移動(dòng) 示例demo

更新時(shí)間：2019年07月03日 10:05:22 作者：```...簡單點(diǎn)

這篇文章主要介紹了elementUI vue this.$confirm 和el-dialog 彈出框移動(dòng) 示例demo，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

調(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)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離
   const disX = e.clientX - dialogHeaderEl.offsetLeft
   const disY = e.clientY - dialogHeaderEl.offsetTop
   // 獲取到的值帶px 正則匹配替換
   let styL, styT
   // 注意在ie中 第一次獲取到的值為組件自帶50% 移動(dòng)之后賦值為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) {
    // 通過事件委托，計(jì)算移動(dòng)的距離
    const l = e.clientX - disX
    const t = e.clientY - disY
    // 移動(dòng)當(dāng)前元素
    dragDom.style.left = `${l + styL}px`
    dragDom.style.top = `${t + styT}px`
    dragDom.style.position = `absolute`
    // 將此時(shí)的位置傳出去
    // 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)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離
    const disX = e.clientX - dialogHeaderEl.offsetLeft
    const disY = e.clientY - dialogHeaderEl.offsetTop
    // 獲取到的值帶px 正則匹配替換
    let styL, styT
    // 注意在ie中 第一次獲取到的值為組件自帶50% 移動(dòng)之后賦值為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) {
     // 通過事件委托，計(jì)算移動(dòng)的距離
     const l = e.clientX - disX
     const t = e.clientY - disY
     // 移動(dòng)當(dāng)前元素
     dragDom.style.left = `${l + styL}px`
     dragDom.style.top = `${t + styT}px`
     // 將此時(shí)的位置傳出去
     // 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,
   }
  },
  //頁面加載成功時(shí)完成
  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 彈出框移動(dòng) 示例demo,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: