使用slot编写弹窗组件

发布时间:2017-7-1 11:27:49编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"使用slot编写弹窗组件 ",主要涉及到使用slot编写弹窗组件 方面的内容,对于使用slot编写弹窗组件 感兴趣的同学可以参考一下。

具体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等等都是一个子组件;


上一篇:Warning: Function created with compilation errors.
下一篇:Core - Provide an easy way to store administrator and user model differences in a custom store (e.g., in a database)

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款