具体slot用法详见http://www.cnblogs.com/keepfool/p/5637834.html

html:

<!--测试弹窗-->
<dialog-test v-if="testShow==1">
<div class="header-box" slot="header">
<h2>提示信息</h2>
</div>
<div class="body-box" slot="body">
<p>我是一个对话框</p>
<textarea class="test-content"></textarea>
</div>
</dialog-test>
<dialog-test v-else-if="testShow==2">
<div class="header-box" slot="header">
<h2>2222222222222222</h2>
</div>
<div class="body-box" slot="body">
<p>我是一个对话我是一个对话框我是一个对话框我是一个对话框我是一个对话框框</p>
</div>
</dialog-test>

子组件中:

<script type="text/x-template" id="dialog-test-template">
<div class="dialog-wrap">
<div class="mask"></div>
<div class="dialog-is-distribute">
<slot name="header"></slot><!--父组件中slot=head的占位符-->
<slot name="body"></slot><!--父组件中slot=body的占位符-->
</div>
</div>
</script>

对比,使用子组件嵌套子组件的形式:

最外层就一个:

<transition name="fade">
<dialog-box v-if="addShow" v-on:addeval="hiddenEval()" :title="dialogTitle" :sign="dialogContent" :custwidth="dialogWidth"></dialog-box>
</transition>

而子组件为:

<script type="text/x-template" id="dialog-box-template">
<div class="dialog-wrap">
<div class="mask"></div>
<div class="dialog-is-distribute" :style="{width:custwidth}">
<div class="title"><b :class="showIcon"></b>{{title}}<i class="close" v-on:click="closedialog()"></i></div>
<dialog-add v-on:closedialog="closedialog" v-if="sign=='add'"></dialog-add>
<dialog-print v-on:closedialog="closedialog" v-else-if="sign=='print'"></dialog-print>
<dialog-addtab v-on:closedialog="closedialog" v-else-if="sign=='addtab'"></dialog-addtab>
<dialog-delete v-on:closedialog="closedialog" v-else-if="sign=='delete'"></dialog-delete>
</div>
</div>
</script>

然后每一个

dialog-add
dialog-print
dialog-addtab等等都是一个子组件;

使用slot编写弹窗组件的更多相关文章

  1. iOS应用日志:开始编写日志组件与异常日志

    应用日志(一):开始编写日志组件 对于那些做后端开发的工程师来说,看 LOG解Bug应该是理所当然的事,但我接触到的移动应用开发的工程师里面,很多人并没有这个意识,查Bug时总是一遍一遍的试图重现,试 ...

  2. Vue列表组件与弹窗组件示例

    列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...

  3. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  4. vue+element table的弹窗组件

    在处理表格编辑相关的需求,是需要做一个弹框进行保存的:或者查看表格数据的详细信息时,也是需要做弹窗: 当然 ,这是类似于这样的 ,当然 element 已经帮我们做好 弹窗这一块 主要 我想记录的是 ...

  5. 封装Vue Element的dialog弹窗组件

    我本没有想着说要封装一个弹窗组件,但有同行的朋友在问我,而且弹窗组件也确实在项目开发中用的比较多.思前想后,又本着样式统一且修改起来方便的原则,还是再为大家分享一个我所封装的弹窗组件吧. 其实,并不是 ...

  6. vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  7. 手把手教你撸个vue2.0弹窗组件

    手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/kiko/inde... 源码地 ...

  8. Jquery弹窗组件

    下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...

  9. 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

    百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...

随机推荐

  1. Python下尝试实现图片的高斯模糊化

    资源下载 #本文PDF版下载Python下尝试实现图片的高斯模糊化#本文代码下载高斯模糊代码下载 高斯模糊是什么? (先来看一下维基百科对它的定义) 高斯模糊是模糊图像的结果.它是一种广泛使用的图形软 ...

  2. 用了皮肤控件之后,报错:容量超出了最大容量 参数名:capacity

    用了皮肤控件之后,报错:容量超出了最大容量 参数名:capacity MessageBox.show()错误!!容量超出了最大容量.参数名: capacity 解决方案: 设置 skin.SkinDi ...

  3. Java容器——Map接口

    1.定义 Map用于保存存在映射关系<key, value>的数据.其中key值不能重复(使用equals()方法比较),value值可以重复. 2.常用实现类 HashMap:和Hash ...

  4. ** exception error: no match of right hand side value

    错误发生的情况是模式匹配失败.对于badmatch异常,很难找到单一的原因,但经常性的原因是你无意间尝试绑定已绑定过的变量.

  5. 体验异步的终极解决方案-ES7的Async/Await

    阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解.本文以体验为主,不会深入说明,结尾有详细的文章引用. 第一个例子 Async/Await应该是目前最简单的异步方案 ...

  6. html5阴影

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  7. (转)RocketMQ源码学习--消息存储篇

    http://www.tuicool.com/articles/umQfMzA 1.序言 今天来和大家探讨一下RocketMQ在消息存储方面所作出的努力,在介绍RocketMQ的存储模型之前,可以先探 ...

  8. 使用GAN进行异常检测——可以进行网络流量的自学习哇,哥哥,人家是半监督,无监督的话,还是要VAE,SAE。

    实验了效果,下面的还是图像的异常检测居多. https://github.com/LeeDoYup/AnoGAN https://github.com/tkwoo/anogan-keras 看了下,本 ...

  9. 解决mac更新系统后git无法使用

    这只是个小笔记啊,记着以后忘了可以再找出来,你们遇到了这个问题也可以翻出来看,废话不多说了,直接讲吧 一.无法使用的原因 mac  更新系统后  git命令无法使用,输入git命令会出现这样的提示 进 ...

  10. Vue--Vue.nextTick()的使用

    Vue.nextTick()是比较常用到的API Vue官网对它的解释是:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 首先要明白Vue的响应式 ...