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 相关文章推荐
js如何实现设计模式中的模板方法
Jul 23 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 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
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python读取图片属性信息的实现方法
2016/09/11 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python AES加密模块用法分析
2017/05/22 Python
python hook监听事件详解
2018/10/25 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
公司财务自我评价分享
2013/12/17 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
公司委托书范本
2014/04/04 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
党小组推荐意见
2015/06/02 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
V Rising 服务器搭建图文教程
2022/06/16 Servers