能否修改npm库vuetify-confirm的HTML结构与样式？

一、使用库自带配置项（最简单方案） #

vuetify-confirm 本身提供了多个配置参数用于修改样式，无需额外修改CSS或结构：

1. 单次调用时传参 #

this.$confirm('确定要执行该操作吗？', '提示', {
  buttonTrueColor: 'primary darken-2', // 确认按钮颜色
  buttonFalseColor: 'grey lighten-1', // 取消按钮颜色
  color: 'indigo', // 标题栏背景色
  width: '500px' // 弹窗宽度
})

2. 全局默认配置 #

在注册插件时设置全局默认值，所有弹窗都会生效：

import VuetifyConfirm from 'vuetify-confirm'
import Vuetify from 'vuetify'

Vue.use(Vuetify)
Vue.use(VuetifyConfirm, {
  buttonTrueText: '确认',
  buttonFalseText: '取消',
  buttonTrueColor: 'success',
  buttonFalseColor: 'warning',
  color: 'primary'
})

二、自定义CSS覆盖样式 #

如果自带配置无法满足需求（比如修改按钮内边距、字体大小等），可以使用Vue的深度选择器定位组件内部元素：

/* 修改确认按钮背景色 */
::v-deep .vuetify-confirm .v-btn[color="success"] {
  background-color: #2e7d32 !important;
}

/* 修改取消按钮文本颜色 */
::v-deep .vuetify-confirm .v-btn[color="warning"] {
  color: #f57c00 !important;
}

/* 修改弹窗卡片的圆角 */
::v-deep .vuetify-confirm .v-card {
  border-radius: 8px !important;
}

注意：Vue2可用 /deep/ 或 ::v-deep，Vue3推荐用 :deep() 作为深度选择器语法。

三、重写render函数修改HTML结构 #

如果需要调整HTML结构（比如添加额外提示元素、修改布局顺序），可以直接覆盖组件的render方法：

import VuetifyConfirm from 'vuetify-confirm'

// 获取原Confirm组件配置
const originalConfirm = VuetifyConfirm.Confirm

// 重写render函数，基于原代码修改需要的部分
originalConfirm.render = function() {
  const _vm = this
  const _h = _vm.$createElement
  const _c = _vm._self._c || _h

  return _c('v-dialog', { 
    attrs: { "eager": "", "value": "true", "max-width": _vm.width, "persistent": _vm.persistent }, 
    on: { 
      "input": _vm.change, 
      "keydown": function ($event) {
        if (!('button' in $event) && _vm._k($event.keyCode, "esc", 27, $event.key, "Escape")) {
          return null;
        }
        _vm.choose(false);
      } 
    } 
  }, [
    _c('v-card', { attrs: { "tile": "" } }, [
      // 保留原标题栏
      Boolean(_vm.title) ? _c('v-toolbar', { attrs: { "dark": "", "color": _vm.color, "dense": "", "flat": "" } }, [
        Boolean(_vm.icon) ? _c('v-icon', { attrs: { "left": "" } }, [_vm._v(_vm._s(_vm.icon))]) : _vm._e(), 
        _vm._v(" "), 
        _c('v-toolbar-title', { staticClass: "white--text", domProps: { "textContent": _vm._s(_vm.title) } })
      ], 1) : _vm._e(), 
      _vm._v(" "), 
      // 原消息文本
      _c('v-card-text', { staticClass: "body-1 text-body-1 py-3", domProps: { "innerHTML": _vm._s(_vm.message) } }), 
      _vm._v(" "),
      // 新增自定义提示文本
      _c('v-card-text', { staticClass: "text-sm text-red-500" }, [_vm._v("⚠️ 此操作不可撤销，请谨慎操作")]),
      _vm._v(" "), 
      // 调整按钮顺序：取消按钮在前，确认按钮在后
      _c('v-card-actions', [
        Boolean(_vm.buttonFalseText) ? _c('v-btn', { attrs: { "color": _vm.buttonFalseColor, "text": _vm.buttonFalseFlat }, on: { "click": () => _vm.choose(false) } }, [_vm._v(" " + _vm._s(_vm.buttonFalseText) + " ")]) : _vm._e(), 
        _vm._v(" "),
        _c('v-spacer'), 
        _vm._v(" "),
        Boolean(_vm.buttonTrueText) ? _c('v-btn', { attrs: { "color": _vm.buttonTrueColor, "text": _vm.buttonTrueFlat }, on: { "click": () => _vm.choose(true) } }, [_vm._v(" " + _vm._s(_vm.buttonTrueText) + " ")]) : _vm._e()
      ], 1)
    ], 1)
  ], 1);
}

// 注册插件
Vue.use(VuetifyConfirm)

注意：此方法依赖当前版本的render函数结构，建议在package.json中锁定版本（如 "vuetify-confirm": "2.0.6"），避免库更新后代码失效。

内容的提问来源于stack exchange，提问作者baceeeee