elementui在Dialog对话框标题前面加图标的实现

<el-dialog :fullscreen="screenWidth < 768" :title="null" :visible.sync="visible" :before-close="onCloseDialog" append-to-body
    >
    <div slot="title" class="dialog-title">
      <span v-if="symbolDisplay">
        <img  class="promptIcon" src="../../../static/material/icon/gantanhao.png" />
      </span>
      
      {{ dTitle }}
    </div>
</el-dialog>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 如果你在使用 ElementUI 中出现了多个对话框出现相同的内容,可能是因为你在多个对话框中使用了同一个变量来保存内容。 解决这个问题的方法是,为每个对话框创建一个独立的变量来保存内容。你可以在创建对话框时,为对话框传递一个唯一的标识符,然后在保存内容时,使用该标识符来区分不同的对话框。 例如,你可以这样创建一个对话框: ``` <el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false"> <span>{{ content }}</span> </el-dialog> ``` 在数据中保存对话框的内容和标识符: ``` data() { return { dialogVisible: false, dialogs: [ { id: 'dialog1', title: 'Dialog 1', content: 'Content for Dialog 1' }, { id: 'dialog2', title: 'Dialog 2', content: 'Content for Dialog 2' }, { id: 'dialog3', title: 'Dialog 3', content: 'Content for Dialog 3' }, ] } }, ``` 然后在打开对话框时,根据标识符来设置对话框的内容: ``` openDialog(id) { const dialog = this.dialogs.find(dialog => dialog.id === id) this.title = dialog.title this.content = dialog.content this.dialogVisible = true } ``` 这样,每个对话框就可以保存独立的内容,避免出现相同的内容。 ### 回答2: 当elementUI中的多个对话框出现相同的内容时,可以通过以下几种方式来解决: 1. 分别创建不同的对话框组件:在使用elementUI对话框组件时,可以为每个对话框创建一个独立的组件。这样每个对话框都有独立的组件实例,可以独立传入不同的内容,避免内容重复问题。 2. 动态生成对话框内容:可以使用JavaScript代码动态生成对话框的内容。在打开一个对话框之前,根据需要生成不同的内容,并通过对话框组件的参数来传入。这样每次打开对话框时,都可以传入不同的内容,从而解决内容重复的问题。 3. 利用elementUI的动态组件功能:elementUI提供了动态组件的功能,可以根据需要在对话框内部动态切换不同的组件。可以根据需要创建多个不同的组件,然后根据情况动态切换展示内容,避免内容重复问题。 综上所述,解决elementUI多个对话框出现相同内容的问题可以通过创建独立的对话框组件、动态生成对话框内容或利用动态组件功能来实现。根据具体情况选择合适的解决方案,可以有效避免对话框内容重复的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

起名时在学Aiifox

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值