使用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>