vue 修改 this.$confirm 的文字样式、自定义样式

在Vue中，您可以通过使用一个自定义组件来替换this.$confirm的默认对话框，并在该组件中应用您想要的任何自定义样式。以下是一个简单的例子：

1. 创建一个自定义对话框组件 CustomConfirm.vue:

<template>
  <div class="custom-confirm">
    <!-- 对话框内容 -->
    <div class="content">
      <p>{{ message }}</p>
      <div class="buttons">
        <button @click="handleConfirm">确认</button>
        <button @click="handleCancel">取消</button>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: ['message'],
  methods: {
    handleConfirm() {
      this.$emit('confirm');
    },
    handleCancel() {
      this.$emit('cancel');
    }
  }
}
</script>
 
<style scoped>
.custom-confirm {
  /* 添加您的自定义样式 */
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
 
.content {
  /* 内容样式 */
}
 
.buttons {
  text-align: right;
}
 
button {
  /* 按钮样式 */
  padding: 5px 10px;
  margin-left: 10px;
  border: none;
  background-color: #42b983;
  color: white;
  cursor: pointer;
}
</style>

2. 在您的Vue组件中使用这个自定义对话框：

<template>
  <div>
    <button @click="openConfirm">打开确认对话框</button>
    <custom-confirm v-if="showCustomConfirm" :message="confirmMessage" @confirm="handleConfirm" @cancel="handleCancel"></custom-confirm>
  </div>
</template>
 
<script>
import CustomConfirm from './CustomConfirm.vue';
 
export default {
  components: {
    CustomConfirm
  },
  data() {
    return {
      showCustomConfirm: false,
      confirmMessage: '您确定要执行此操作吗？'
    };
  },
  methods: {
    openConfirm() {
      this.showCustomConfirm = true;
    },
    handleConfirm() {
      // 确认操作
      this.showCustomConfirm = false;
    },
    handleCancel() {
      // 取消操作
      this.showCustomConfirm = false;
    }
  }
}
</script>

在这个例子中，我们创建了一个自定义的CustomConfirm组件，并在需要时通过改变showCustomConfirm的值来显示或隐藏这个对话框。通过message属性传递确认信息，并通过confirm和cancel事件来处理用户的确认或取消操作。您可以在CustomConfirm.vue的<style>标签中添加自定义样式来修改对话框的外观。