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

2021-06-25 10:13:31 浏览数 (2)

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

代码语言:javascript复制
<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>

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

0 人点赞