脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → elementUI vue this.$confirm 和el-dialog 弹出框

elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

 更新时间：2019年07月03日 10:05:22   作者：```...简单点  
这篇文章主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用:

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- import CSS -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <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)
   // 鼠标按下，计算当前元素距离可视区的距离
   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
    // 移动当前元素
    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);
    // 鼠标按下，计算当前元素距离可视区的距离
    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
     // 移动当前元素
     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>

总结

以上所述是小编给大家介绍的elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • vueJs函数toRaw markRaw使用对比详解

    vueJs函数toRaw markRaw使用对比详解

    这篇文章主要为大家介绍了vueJs函数toRaw markRaw使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • vue路由传参-如何使用encodeURI加密参数

    vue路由传参-如何使用encodeURI加密参数

    这篇文章主要介绍了vue路由传参-如何使用encodeURI加密参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • vue使用@include或@mixin报错的问题及解决

    vue使用@include或@mixin报错的问题及解决

    这篇文章主要介绍了vue使用@include或@mixin报错的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • web前端vue filter 过滤器

    web前端vue filter 过滤器

    vue的过滤器通常用在一些常见的文本格式化，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。本文给大家介绍了web前端vue filter 过滤器的相关知识，感兴趣的朋友一起看看吧
    2018-01-01
  • 详解vue 计算属性与方法跟侦听器区别(面试考点)

    详解vue 计算属性与方法跟侦听器区别(面试考点)

    这篇文章主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue.js如何更改默认端口号8080为指定端口的方法

    vue.js如何更改默认端口号8080为指定端口的方法

    本篇文章主要介绍了vue.js如何更改默认端口号8080为指定端口的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue使用keep-alive如何实现多页签并支持强制刷新

    vue使用keep-alive如何实现多页签并支持强制刷新

    这篇文章主要介绍了vue使用keep-alive如何实现多页签并支持强制刷新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue清除动态路由的问题记录

    vue清除动态路由的问题记录

    项目中往往都是添加动态路由，如何删除已经添加进来的路由往往被忽视，为此这里做一下记录，感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Vue实现boradcast和dispatch的示例

    Vue实现boradcast和dispatch的示例

    这篇文章主要介绍了Vue实现boradcast和dispatch的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-11-11
  • Vite3结合Svelte3使用@import导入scss样式

    Vite3结合Svelte3使用@import导入scss样式

    这篇文章主要为大家介绍了Vite3结合Svelte3使用@import导入scss样式实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06

最新评论