elementul中dialog组件如何更改title样式

最新推荐文章于 2024-07-23 10:29:33 发布

接口写好了吗

最新推荐文章于 2024-07-23 10:29:33 发布

阅读量5.4k

点赞数 5

分类专栏：功能实现文章标签： javascript css elementul dialog vue

本文链接：https://blog.csdn.net/seeeeeeeeeee/article/details/119954433

版权

功能实现专栏收录该内容

154 篇文章 93 订阅

订阅专栏

这篇博客介绍了如何在Vue中通过删除默认title并使用插槽来自定义`el-dialog`组件的标题和样式，内容展示了如何创建一个包含已分配人员列表以及撤销操作的对话框，对话框包含取消和撤销两个按钮，且都设置了特定的样式。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

实现方法

就是把原本的title删掉，用插槽title就可以了，然后你就改div样式就行

<el-dialog  :visible.sync="dialogFormVisible">
      <template slot="title">
        <div style="font-size:18px;color:#38b48b;font-weight: bold;">已分配人员（勾选后点击撤销可取消分配）</div>
      </template>
      <p>1 小王</p>
      <p>2 小黄</p>
      <p>3 小白</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" style="font-weight: bold;">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" style="font-weight: bold;"
          >撤 销</el-button
        >
      </div>
    </el-dialog>