vue中简单弹框dialog的实现方法


Posted in Javascript onFebruary 26, 2018

效果如下,dialog中内容自行添加

vue中简单弹框dialog的实现方法

<template>
 <div>
 <div class="dialog-wrap">
  <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>
  <transition name="drop">
  <div class="dialog-content" v-if="isShow">
   <p class="dialog-close" @click="closeMyself">x</p>
   <slot>empty</slot>
  </div>
  </transition>
 </div>
 </div>
</template>

接收父组件传参isShow,并返回一个自定义事件on-close

<script>
 export default {
 props: {
  isShow: {
  type: Boolean,
  default: false
  }
 },
 data () {
  return {
  }
 },
 methods: {
  closeMyself () {
  this.$emit('on-close')
  }
 }
 }
</script>
<style scoped>
 .drop-enter-active {
 transition: all .5s ease;
 }
 .drop-leave-active {
 transition: all .3s ease;
 }
 .drop-enter {
 transform: translateY(-500px);
 }
 .drop-leave-active {
 transform: translateY(-500px);
 }
 .dialog-wrap {
 position: fixed;
 width: 100%;
 height: 100%;
 }
 .dialog-cover {
 background: #000;
 opacity: .3;
 position: fixed;
 z-index: 5;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 .dialog-content {
 width: 50%;
 position: fixed;
 max-height: 50%;
 overflow: auto;
 background: #fff;
 top: 20%;
 left: 50%;
 margin-left: -25%;
 z-index: 10;
 border: 2px solid #464068;
 padding: 2%;
 line-height: 1.6;
 }
 .dialog-close {
 position: absolute;
 right: 5px;
 top: 5px;
 width: 20px;
 height: 20px;
 text-align: center;
 cursor: pointer;
 }
 .dialog-close:hover {
 color: #4fc08d;
 }
</style>

以上这篇vue中简单弹框dialog的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
js中开关变量使用实例
Feb 24 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 #Javascript
vue实现模态框的通用写法推荐
Feb 26 #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
You might like
构建简单的Webmail系统
2006/10/09 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python中的自省(反射)详解
2015/06/02 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python字符串判断密码强弱
2020/03/18 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Python如何定义有默认参数的函数
2020/08/10 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
Unix如何添加新的用户
2014/08/20 面试题
员工工作表扬信范文
2014/01/13 职场文书
环保建议书
2014/03/12 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
给领导的感谢信范文
2015/01/23 职场文书
整改通知书
2015/04/20 职场文书