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 相关文章推荐
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
PHP生成静态页
2006/11/25 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
js实现分页功能
2017/05/24 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
Python中的super用法详解
2015/05/28 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
转党组织关系介绍信
2014/01/08 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
父母对孩子的寄语
2014/04/09 职场文书
法定代表人身份证明书
2014/09/10 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Golang之sync.Pool使用详解
2021/05/06 Golang
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
Python加密与解密模块hashlib与hmac
2022/06/05 Python