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 17 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
JavaScript 函数的执行过程
May 09 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
js实现滑动滑块验证登录
Jul 24 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加入ftp扩展的解决方法
2013/02/07 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
js实现验证码功能
2020/07/24 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python实现图片批量剪切示例
2014/03/25 Python
python生成验证码图片代码分享
2016/01/28 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python 构造三维全零数组的方法
2018/11/12 Python
python语言基本语句用法总结
2019/06/11 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python学习笔记之装饰器
2020/08/06 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
一篇.NET面试题
2014/09/29 面试题
西式婚礼证婚词
2014/01/12 职场文书
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS