关于el-popconfirm气泡确认框标题无法换行的解决方法

问题复现

• 在自己做公司项目中遇到一个问题，使用气泡确认框<el-popconfirm>组件时，发现其标题title字段默认不换行
• 而我的标题文本较长，如果只放在一行会很难看，网上找了一些方法都没有一篇文章完整说的清的

解决方法

1. 首先在组件中title字段不能使用字符串，需要用v-bind绑定变成JS表达式结构
2. 然后放入你写的文本，注意使用模板字符串包裹文本，需要换行的地方使用\n进行换行

<el-popconfirm :title="`删除分类前请确保子分类和子词典\n都已删除,否则会造成结构混乱！`" >
    <el-button slot="reference">删除</el-button>
</el-popconfirm>

3. 然后还需要更改el-popconfirm气泡弹出框的样式，用pre-line实现文本换行显示
4. 注意！由于el-popconfirm组件的结构是写在<div id="app"></div>之外的，所以你写的样式如果是在组件内的话，可能会导致样式不生效！
5. 解决方式是在app.vue全局组件中写，或者使用::v-deep进行组件样式穿透

// 在app.vue中写入样式
<style>
.el-popconfirm__main {
  white-space: pre-line;
}
</style>

效果展示