美文网首页
封装dialog组件

封装dialog组件

作者: 随风飞2019 | 来源:发表于2020-03-23 18:13 被阅读0次

components目录下新建一个zyw-dialog.vue文件,里面是组件模板内容
main.js里面全局引入组件
import zywDialog from "@/components/zyw-dialog.vue"
Vue.component(zywDialog.name,zywDialog)
页面里面,直接使用组件<zyw-dialog></zyw-dialog>

zyw-dialog.vue文件模板内容如下:
<template>
    <div class="el-dialog__wrapper">
        <div class="el-dialog">
            <div class="el-dialog__header">
                <slot name="header">默认:温馨提醒</slot>
            </div>
            <div class="el-dialog__body">
                <slot name="body">
                    这里是默认内容区域哦!
                </slot>
            </div>
            <div class="el-dialog__footer" v-if="$slots.footer">
                <slot name="footer">
                </slot>
            </div>
        </div>
    </div>
</template>

相关文章

网友评论

      本文标题:封装dialog组件

      本文链接:https://www.haomeiwen.com/subject/nqxgyhtx.html