vue实现模态框的通用写法推荐


Posted in Javascript onFebruary 26, 2018

在看了element组件的源码后发现,所有模态框其实实现方法都差不多,主要用到了vue在组件化上的双向绑定。代码:

<!--查看槽点对话框-->
<template lang="html">
 <transition name="el-fade-in-linear">
  <div draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" class="g-dialog-wrapper" v-show="myVisible">
   <div class="g-dialog-header">
    <div class="left">
     模态框
    </div>
    <div class="right">
     <i class="g-times-icon fa fa-times" @click="myVisible=false" aria-hidden="true"></i>
    </div>
   </div>
   <div class="g-dialog-container">
   </div>
  </div>
 </transition>
</template>
<script>
 export default {
  props: {
   visible: Boolean
  },
  created() {
  },
  data() {
   return {
    myVisible: this.visible,
  },
  computed: {},
  methods: {
  },
  components: {},
  watch: {
   myVisible: function (val) {
    this.$emit('update:visible', val)
   },
   visible: function (val) {
    this.myVisible = val
   }
  }
 }
</script>
<style lang="css" scoped>
</style>

上面代码主要的部分是watch里面的代码,实现监听数据变化,及时更新。所以在使用的时候就很方便了,在component注册组件之后:

<g-key-dialog :visible.sync="keyDialogVisible"></g-key-dialog>

注:这里必须使用sync,要不是无法双向绑定的

以上这篇vue实现模态框的通用写法推荐就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 #Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 #Javascript
详解Node 定时器
Feb 26 #Javascript
node.js基础知识小结
Feb 26 #Javascript
Es6 Generator函数详细解析
Feb 24 #Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 #Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 #Javascript
You might like
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP获取文件行数的方法
2015/06/10 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PDO::_construct讲解
2019/01/27 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python字符串替换实例分析
2015/05/11 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
环保专项行动方案
2014/05/12 职场文书
大学生个人求职信
2014/06/02 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
看雷锋电影观后感
2015/06/10 职场文书
健康证明
2015/06/19 职场文书
企业愿景口号
2015/12/25 职场文书
教师读书活动心得体会
2016/01/14 职场文书