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


Posted in Javascript onJuly 03, 2019

调试了好久, 还能凑合用, 请直接看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>

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

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

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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
使用微信SDK自定义分享的方法
Jul 03 #Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 #Javascript
8 个有用的JS技巧(推荐)
Jul 03 #Javascript
vue swipe自定义组件实现轮播效果
Jul 03 #Javascript
20个必会的JavaScript面试题(小结)
Jul 02 #Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 #Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 #Javascript
You might like
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
form自动提交实例讲解
2017/07/10 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
清空上传控件input file的值
2010/07/03 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python实现简易Web爬虫详解
2018/01/03 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
详解Python中的分支和循环结构
2020/02/11 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
领导干部四风问题自我剖析材料
2014/09/25 职场文书
人事专员岗位职责
2015/02/03 职场文书
扬州个园导游词
2015/02/06 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
解决numpy和torch数据类型转化的问题
2021/05/23 Python
python tqdm用法及实例详解
2021/06/16 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python