elementUI this.$confirm 文字大小样式

**Element UI 的 `$confirm` 方法中的文字大小样式**

在 Element UI 中，`$confirm` 方法用于显示确认对话框。然而，在某些情况下，我们可能需要自定义对话框的文字大小样式。这篇文章将指导你如何实现这一点。

###1. 默认样式首先，让我们看一下 `$confirm` 方法的默认样式：

html<el-dialog :title="title" :visible.sync="visible" width="30%" :before-close="handleClose">
 <div class="dialog-body">{{ message }}</div>
 <!-- ... -->
</el-dialog>

在上面的代码中，`title` 和 `message` 是用于显示的文字内容。我们可以看到，文字大小是由浏览器默认样式控制的。

###2. 自定义样式要自定义对话框的文字大小样式，我们需要修改 Element UI 的 CSS 样式。具体来说，我们需要在我们的 CSS 文件中添加以下代码：

css.el-dialog__body {
 font-size:16px; /* 文字大小 */
}

这里，我们设置了 `.el-dialog__body` 元素的 `font-size` 属性为 `16px`。

###3. 应用自定义样式现在，我们需要在我们的 Vue 组件中应用这个自定义样式。我们可以通过以下方式实现：

javascript<template>
 <div>
 <el-button @click="showConfirm">显示确认对话框</el-button>
 <el-dialog :title="title" :visible.sync="visible" width="30%" :before-close="handleClose">
 <div class="dialog-body">{{ message }}</div>
 <!-- ... -->
 </el-dialog>
 </div>
</template>

<script>
export default {
 data() {
 return {
 visible: false,
 title: '',
 message: ''
 }
 },
 methods: {
 showConfirm() {
 this.visible = true this.title = '确认对话框'
 this.message = '您确定要继续吗?'
 },
 handleClose(done) {
 done()
 }
 }
}
</script>

在上面的代码中，我们定义了一个 `showConfirm` 方法，用于显示确认对话框。我们还定义了一个 `handleClose` 方法，用于关闭对话框。

###4. 结合自定义样式最后，我们需要将自定义样式应用到我们的 Vue 组件中。我们可以通过以下方式实现：

css.el-dialog__body {
 font-size:16px; /* 文字大小 */
}

/* 其他样式 */

在上面的代码中，我们设置了 `.el-dialog__body` 元素的 `font-size` 属性为 `16px`。

### 总结通过以上步骤，我们成功地自定义了 Element UI 的 `$confirm` 方法中的文字大小样式。我们可以根据自己的需求调整样式，实现更好的用户体验。

**示例代码**

以下是完整的示例代码：

html<template>
 <div>
 <el-button @click="showConfirm">显示确认对话框</el-button>
 <el-dialog :title="title" :visible.sync="visible" width="30%" :before-close="handleClose">
 <div class="dialog-body">{{ message }}</div>
 <!-- ... -->
 </el-dialog>
 </div>
</template>

<script>
export default {
 data() {
 return {
 visible: false,
 title: '',
 message: ''
 }
 },
 methods: {
 showConfirm() {
 this.visible = true this.title = '确认对话框'
 this.message = '您确定要继续吗?'
 },
 handleClose(done) {
 done()
 }
 }
}
</script>

<style>
.el-dialog__body {
 font-size:16px; /* 文字大小 */
}

/* 其他样式 */
</style>

**注释**

* `font-size` 属性用于设置文字大小。
* `.el-dialog__body` 元素用于定义对话框的内容区域。
* `showConfirm` 方法用于显示确认对话框。
* `handleClose` 方法用于关闭对话框。