vue 设置 confirm 的样式

最新推荐文章于 2025-06-26 14:33:50 发布

Arvin.Wang

最新推荐文章于 2025-06-26 14:33:50 发布

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/acnwcl/article/details/123014487

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue组件中使用v-confirm自定义提示对话框，通过定义`confirm-p`样式实现文字断行，并在警告类型对话中添加自定义类以应用预设样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、定义样式

<style>
.confirm-p {
  word-break: break-all;
}
</style>

定义的样式不能放在 scoped 的 style 中

二、使用样式

this.$confirm('您确定要删除 ' + row.name + ' 吗？删除后将无法恢复，请谨慎操作。', '提示', {
  confirmButtonText: this.$t('common.confirm'),
  cancelButtonText: this.$t('common.cancel'),
  type: 'warning',
  customClass: 'confirm-p'
}).then(() => {
  this.doDeleteHandle(row, disabled)
}).catch((reason) => {
  console.log(reason)
})