如何使用vue slot创建一个模态框的实例代码
【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创建模态框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue+ts下对axios的封装实现
虽然vue中axios的使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达到简化操作.而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态码的处理.那么我基于自己的需求简单分装了一下.(之前很少接触vue,主要用的ng和react,这次新项目想用vue来弄,熟悉一下vue的一些新特性和方法,有啥不对的,欢迎大家批评指正) 前提: 熟悉前端ts, node等等. 1. 安装axios npm install axios
-
Vue-axios-post数据后端接不到问题解决
1 前言 最近在前后端联调的时候发现了一个问题,可能自己平时不注意发送的内容格式,导致解决问题的路上,走了很多弯路,尤其是在刚刚懂了一点Vue知识之后,发送请求的各种花式写法也是让人头大,我在这把我踩到的坑给大家介绍一下吧. 2 问题 这个问题是我前端登录的时候向后端发生post请求.在使用这个接口前,我使用 postman 确认过了几次,接口传参是没有问题的,而且使用params或者body传参都是能接收到的.然而还是报错了--我们先来看看一个截图吧. 我向后端发参数的时候无论如何我都接不到数
-
vue学习笔记之slot插槽用法实例分析
本文实例讲述了vue slot插槽用法.分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js&q
-
vue基础知识--axios合并请求和slot
一.axios合并请求 export default { data(){ return {} }, created(){ function getMsg(res1,res2){ console.log(res1) console.log(res2) } this.$axios.all([ this,axios.post('URL','key=value'), this.axios.get('URL') ]) .then(this.$axios.spread(getMsg)) //分发响应 .ca
-
vue插槽slot的简单理解与用法实例分析
本文实例讲述了vue插槽slot的简单理解与用法.分享给大家供大家参考,具体如下: vue中插槽的使用非常广泛,本文就插槽的使用和理解简单总结. 从字面理解插槽是预先插入一个代码空间,用于后期塞入数据. 插槽分类 匿名插槽 ------------------ 匿名的代码空间 具名插槽 ------------------ 带有命名的代码空间 作用域插槽 ------------------- 带有数据的代码空间 插槽使用示例 匿名插槽 说明在组件中先定义预留的代码空
-
vuex+axios+element-ui实现页面请求loading操作示例
本文实例讲述了vuex+axios+element-ui实现页面请求loading操作.分享给大家供大家参考,具体如下: 前言 我们在平常写项目的时候,发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作 如果是页面同时只发送一个请求,那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到 但是,当一个页面同时要发送多个请求的时候,这么做显然就不行了 因为最先完成的请求会把所有请求的 loading 都给关闭 举个例子,第一个请求的响应时间为
-
VUE中使用HTTP库Axios方法详解
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 安装Axios模块 在Vue中使用,最好安装两个模块axios 和vue-axios $npm install axios vue-axios --save 然后引用并使用模块 import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,Axios) 在组件中通过如下方式进行使用 this.$http[meth
-
如何使用vue slot创建一个模态框的实例代码
[1]遮罩层:承载内容,管理样式布局. [2]内容层:控制遮罩层的显示与否. 遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦. 遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意.因此可以在遮罩层里采用插槽. 遮罩层的实现 <div class="common-mask" v-if="visible"> <slot name="head"><
-
使用 Vue.js 仿百度搜索框的实例代码
整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s
-
bootstrap实现嵌套模态框的实例代码
项目上有一个需求,需要在已经弹出的一个bootstrap模态框的基础上再弹一个模态框. 因为bootstrap官方不建议这么做,最后实现的过程属实不易. 以下是解决方案: html代码: <div id="container"> <a data-toggle="modal" href="#myModal" rel="external nofollow" class="btn btn-primary&
-
angularJS模态框$modal实例代码
1.引入$modal模块 如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]); 2.执行调模态框 函数 $scope.editModule = function(type, size, id) { $scope.id = id; var modalInstance = $modal.open({ templateUrl: 'tpl/weichat_modulebaseinfo.html
-
Vue.js弹出模态框组件开发的示例代码
前言 在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求.这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了.目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能.这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式.这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发
-
Vue.extend 登录注册模态框的实现
模态框是我们 UI 控件中一个很重要的组件,使用场景有很多种,我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建. 文档中的解释是 在最近在做一个常用的类似下面的 登录/注册 业务场景时,利用 Vue.extend 来改善我们的代码,使我们代码逻辑更清晰化. 需求:点击登录或注册出现各自的模态框. 我们对于这种常见的登录注册业务,一般都是分为 Sigin.vue 和 Register.vue 两个组件,然后把两个组件写入 App.vue 组件中,或者是 l
-
详解使用React制作一个模态框
模态框是一个常见的组件,下面让我们使用 React 实现一个现代化的模态框吧. 组件设计 模态框想必大家都很熟悉,是工作中常用的组件,可以让我们填写或展示一些信息而不必打开一个新页面.在开始编码之前,我们先来了解一个 React 模态框组件应该如何设计. React 是一个状态(数据)驱动的前端框架,一个模态框最重要的状态就是打开和关闭,visible,当 visible 为 true 时,模态框打开,反之亦然. 由于 React 所提倡的是一种声明式,组件化的开发体验,每个组件都是 状态 =>
-
vue+elementui 实现新增和修改共用一个弹框的完整代码
element-ui是由饿了么前端团队推出的一套为开发者.设计师和产品经理准备的基于Vue.js 2.0的桌面组件库,而手机端有对应框架是 Mint UI .整个ui风格简约,很实用,同时也极大的提高了开发者的效率,是一个非常受欢迎的组件库. 一.新增 1.新增按钮 2.新增事件 在methods中,用来打开弹窗, dialogVisible在data中定义使用有true或false来控制显示弹框 **3.新增确定,弹框确定事件 ,新增和修改共用一个确定事件,使用id区别 **3.新增事件 调新
-
使用Vue.js创建一个时间跟踪的单页应用
Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应
-
一步步教你用Vue.js创建一个组件(附代码示例)
目录 前言 到底什么是组件? 为什么你一定要使用组件 在Vue中创建一个组件 模板部分 脚本部分 选项API:旧的方式 合成API:现在和未来 风格部分 总结 前言 Vue.js是一个渐进式框架,旨在以一种非常简单.直接的方式构建用户界面.它被设计成易于使用,并且足够灵活,可以处理各种各样的应用. 在本教程中,我们将向你展示如何用Vue.js创建一个简单的组件.我们还将介绍一些在使用组件时需要知道的基本概念. 我们将介绍在Vue中创建一个组件的基本语法,以及一些关于组件用途的理论.在这篇文章的最