如何使用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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
使用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 smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php 注释规范
2012/03/29 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python实现堆排序的方法详解
2016/05/03 Python
Python探索之pLSA实现代码
2017/10/25 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python3实现绘制二维点图
2019/12/04 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
求职自荐信格式
2013/12/04 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
初中英语课后反思
2014/04/25 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
夏洛特的网观后感
2015/06/15 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
如何利用python实现Simhash算法
2022/06/28 Python