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 相关文章推荐
删除条目时弹出的确认对话框
Jun 05 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
AngularJS Module方法详解
Dec 08 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
php 修改密码实现代码
May 24 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
使用微信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
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
javascript整除实现代码
2010/11/23 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Python通过format函数格式化显示值
2020/10/17 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
幼儿园安全生产月活动总结
2014/07/05 职场文书
外出学习心得体会范文
2016/01/18 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers
python读取mat文件生成h5文件的实现
2022/07/15 Python