vue + element-ui dialog 弹出框组件封装

对于dialog组件的封装,我看大家都封装的各异,但是我还是比较推崇我这款。重点是它的title不仅仅是一个字符串传值。采用组件title插槽的方法,不仅可以动态的更改title,而且可以任意的给title添加各种方法,简单的说就是可控制性更强了,好了废话不多说,上代码了。

<template>
  <el-dialog
    :title="dialogConfig.title"
    :visible.sync="visible"
    :width="dialogConfig.width"
    close-on-press-escape
    :close-on-click-modal="false"
    @close="handleClose"
    :show="show">
      <div slot="title" v-if="!dialogConfig.title">
          <slot name="title"></slot>
      </div>
    <slot name="content"></slot>
  </el-dialog>
</template>

有关使用代码,还有其他代码,大家自己感悟。不懂得可以留言提问,写的不对的欢迎吐槽。

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » vue + element-ui dialog 弹出框组件封装

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注