如何使用vue slot创建一个模态框的实例代码


Posted in Javascript onMay 24, 2020

【1】遮罩层:承载内容,管理样式布局。

【2】内容层:控制遮罩层的显示与否。

遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。

遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意。因此可以在遮罩层里采用插槽。

遮罩层的实现

<div class="common-mask" v-if="visible">
 <slot name="head"></slot>
 <slot name="body"></slot>
 <slot name="foot"></slot>
 </div>
<style scoped lang='scss'>
 .common-mask {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba($color: #000000, $alpha: 0.75);
 display: flex;
 justify-content: center;
 align-content: center;
 z-index: 4;
 }
</style>

内容层的实现

<Vue-Modal :visible="visible">
 <div slot="head">head</div>
 <div slot="body">body</div>
 <div slot="foot">
 <button class="common-btn" @click="close">Close</button>
 </div>
 </Vue-Modal>

PS:vue组件模态框实现方式

// 组件代码

<template>
<div>
 <div class="dialog-modal"> <!-- 根元素,z-index 需要高于父容器其他元素 -->
  <div class="dialog-wrapper" @click="onClose" v-show="isShow"></div> <!-- 加载一个具有透明度的背景,使根元素透明,子元素会继承该透明度 -->
  <transition name="drop">
    <div class="dialog-container" v-show="isShow"> <!-- 模态框容器,z-index 需要高于背景 -->
      <span class="close-btn" @click="onClose">x</span>
      <slot>
        <p>hello</p>
      </slot>
    </div>
  </transition>
 </div>
</div>
</template>
<script>
  export default {
    props: {
      isShow:{
        type: Boolean,
        default: false
      }
    },
    methods: {
      onClose(){
        this.$emit('on-close');
      }
    }
  }
</script>
<style>
.drop-enter-active {
 transition: all .5s;
}
.drop-leave-active {
 transition: all .3s;
}
.drop-enter {
 transform: translateY(-500px);
}
.drop-leave-active {
 transform: translateY(-500px);
}  
 
  .dialog-modal{
    position: absolute;
    z-index: 5;
  }
  .dialog-wrapper
  {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
   
  }
  .dialog-wrapper{
    background-color: #eee;
    opacity: .9;
  }
  .dialog-container{
    position: fixed;
    z-index:80;
    top: 10%;
    left: 25%;
    width: 50%;
    /* margin: 0 auto; */
    background-color: #eee;
    border-radius: 3px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
  span.close-btn{
    padding: 0 5px;
    float: right;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
  }
</style>

// 组件使用

//导入模态对话框
import modal from './plugins/dialog'
// 在使用组件
<modal></modal>

<modal @on-close="closeThis('isShowLog')":is-show='isShowLog'><login></login></modal>

总结

到此这篇关于如何使用vue slot创建一个模态框的文章就介绍到这了,更多相关vue slot创建模态框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue cli 全面解析
Feb 28 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
使用React代码动态生成栅格布局的方法
May 24 #Javascript
ES6对象操作实例详解
May 23 #Javascript
ES6函数和数组用法实例分析
May 23 #Javascript
ES6箭头函数和扩展实例分析
May 23 #Javascript
ES6新增的数组知识实例小结
May 23 #Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 #Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
php的大小写敏感问题整理
2011/12/29 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python版本五子棋的实现代码
2018/12/11 Python
基于Python解密仿射密码
2019/10/21 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
全球性的女装店:storets
2019/06/12 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
毕业生求职信
2014/06/10 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
Android中View.post和Handler.post的关系
2022/06/05 Java/Android