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 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue @click.native 绑定原生点击事件
Apr 22 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python常见异常分类与处理方法
2017/06/04 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
浅谈python常用程序算法
2019/03/22 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python3中rank函数的用法
2019/11/27 Python
PyQt5实现登录页面
2020/05/30 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
大学社团活动策划书
2014/01/26 职场文书
增员口号大全
2014/06/18 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
暑期实践个人总结
2015/03/06 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android