发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

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

杨景志

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
显示全部楼层
通常使用 confirm 确认框时，一般这样写：
  1. <template>
  2.   <el-button type="text" @click="open">点击打开 Message Box</el-button>
  3. </template>

  5. <script>
  6.   export default {
  7.     methods: {
  8.       open() {
  9.         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  10.           confirmButtonText: '确定',
  11.           cancelButtonText: '取消',
  12.           type: 'warning'
  13.         }).then(() => {
  14.           this.$message({
  15.             type: 'success',
  16.             message: '删除成功!'
  17.           });
  18.         }).catch(() => {
  19.           this.$message({
  20.             type: 'info',
  21.             message: '已取消删除'
  22.           });         
  23.         });
  24.       }
  25.     }
  26.   }
  27. </script>
复制代码

但偶尔也需要修改文字等样式，这时该怎么做呢？

一、 将dangerouslyUseHTMLString属性设置为 true，message 就会被当作 HTML 片段处理。

提示文字中，修改部分字体样式时，可以这样做：
  1. <template>
  2.   <el-button type="text" @click="open">点击打开 Message Box</el-button>
  3. </template>

  5. <script>
  6.   export default {
  7.     methods: {
  8.       open() {
  9.         this.$confirm('此操作将<span style="color: red;">永久删除</span>该文件, 是否继续?', '提示', {
  10.           confirmButtonText: '确定',
  11.           cancelButtonText: '取消',
  12.           dangerouslyUseHTMLString: true, // 使用HTML片段
  13.           type: 'warning'
  14.         }).then(() => {
  15.           this.$message({
  16.             type: 'success',
  17.             message: '删除成功!'
  18.           });
  19.         }).catch(() => {
  20.           this.$message({
  21.             type: 'info',
  22.             message: '已取消删除'
  23.           });         
  24.         });
  25.       }
  26.     }
  27.   }
  28. </script>
复制代码
二、createElement 新建元素和对象，然后对新建的元素进行标签化设置。

  1. <template>
  2.   <el-button type="text" @click="open">点击打开 Message Box</el-button>
  3. </template>

  5. <script>
  6.   export default {
  7.     methods: {
  8.       open() {
  9.         const h = this.$createElement
  10.         this.$confirm(
  11.           '提示',
  12.         {
  13.           confirmButtonText: '确定',
  14.           cancelButtonText: '取消',
  15.           type: 'warning',
  16.           message:h('p', null, [
  17.                    h('span', null, '内容可以是 '),
  18.                    h('i', { style: 'color: red' }, 'xxxxx')
  19.           ]),
  20.           // iconClass:"el-icon-question colorYellow", // 需要修改 icon 图标，需要把注释代码打开，其中 colorYellow 表示图标颜色，(自定义图标的类名，会覆盖 type)

  22.         }).then(() => {
  23.           this.$message({
  24.             type: 'success',
  25.             message: '删除成功!'
  26.           });
  27.         }).catch(() => {
  28.           this.$message({
  29.             type: 'info',
  30.             message: '已取消删除'
  31.           });         
  32.         });
  33.       }
  34.     }
  35.   }
  36. </script>
复制代码
设置 iconClass 属性，可以更改icon：


三、文字换行显示

  1. <template>
  2.   <el-button type="text" @click="open">点击打开 Message Box</el-button>
  3. </template>

  5. <script>
  6.   export default {
  7.     methods: {
  8.       open() {
  9.         const confirmText = ['第一行内容',  '第二行内容','第三行内容']
  10.         const newData = []
  11.         const h = this.$createElement
  12.         for (const i in confirmText) {
  13.             newData.push(h('p', null, confirmText[i]))
  14.         }

  16.         this.$confirm(
  17.           '提示',
  18.         {
  19.           title:'提示',
  20.           confirmButtonText: '确定',
  21.           cancelButtonText: '取消',
  22.           type: 'warning',
  23.           message: h('div', null, newData),
  24.         }).then(() => {
  25.           this.$message({
  26.             type: 'success',
  27.             message: '删除成功!'
  28.           });
  29.         }).catch(() => {
  30.           this.$message({
  31.             type: 'info',
  32.             message: '已取消删除'
  33.           });         
  34.         });
  35.       }
  36.     }
  37.   }
  38. </script>
复制代码
四、使用 customClass 设置MessageBox 的自定义类名，从而自定义样式
  1. <template>
  2.   <el-button type="text" @click="open">点击打开 Message Box</el-button>
  3. </template>

  5. <script>
  6.   export default {
  7.     methods: {
  8.       open() {
  9.         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  10.           confirmButtonText: '确定',
  11.           cancelButtonText: '取消',
  12.           type: 'warning',
  13.           customClass:'del-model', // 设置MessageBox 的自定义类名
  14.         }).then(() => {
  15.           this.$message({
  16.             type: 'success',
  17.             message: '删除成功!'
  18.           });
  19.         }).catch(() => {
  20.           this.$message({
  21.             type: 'info',
  22.             message: '已取消删除'
  23.           });         
  24.         });
  25.       }
  26.     }
  27.   }
  28. </script>
  29. //注意这里不能将样式放到scoped中！！！
  30. <style lang="scss">
  31. .del-model {
  32.   .el-button:nth-child(1) {
  33.     width: 100px;//修改确认按钮的宽度
  34.   }
  35.   .el-button:nth-child(2) {
  36.     margin-right: 10px;
  37.     background-color: #2d8cf0;
  38.     border-color: #2d8cf0;
  39.   }
  40. }
  41. </style>
复制代码
附：vue element插件this.$confirm用法（取消也可以发请求）

场景：弹出框的两个按钮都能分别请求接口
最简单的弹出框就是“确定”“取消”，一般用户点击确定才会继续接下来的动作，点击取消则不做任何动作（即不会请求接口）。
如：
  1. <template>
  2.   <el-button type="text" @click="open">点击打开 Message Box</el-button>
  3. </template>

  5. <script>
  6.   export default {
  7.     methods: {
  8.       open() {
  9.         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  10.           confirmButtonText: '确定',
  11.           cancelButtonText: '取消',
  12.           type: 'warning'
  13.         }).then(() => {
  14.           this.$message({
  15.             type: 'success',
  16.             message: '删除成功!'
  17.           });
  18.         }).catch(() => {
  19.           this.$message({
  20.             type: 'info',
  21.             message: '已取消删除'
  22.           });         
  23.         });
  24.       }
  25.     }
  26.   }
  27. </script>
复制代码
两个按钮都请求，则：
  1. //任务下线
  2. offline(data){
  3.      this.$confirm('是否开启保存点？', {
  4.          distinguishCancelAndClose: true,
  5.          confirmButtonText: '是',
  6.          cancelButtonText: '否', //相当于 取消按钮
  7.          type: 'warning'
  8.      }).then(() => {
  9.          api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {
  10.              if (res.data.code === "100") {
  11.                  this.$message({type: 'success', message: '下线成功!'})
  12.                  this.getTableData()
  13.              } else {
  14.                  this.$message({type: 'error', message: res.data.msg})
  15.                  this.getTableData()
  16.              }
  17.          })
  18.      }).catch(action => {
  19.      //判断是 cancel (自定义的取消) 还是 close （关闭弹窗）
  20.          if (action === 'cancel'){
  21.              api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {
  22.                  if (res.data.code === "100") {
  23.                      this.$message({type: 'success', message: '下线成功!'})
  24.                      this.getTableData()
  25.                  } else {
  26.                      this.$message({type: 'error', message: res.data.msg})
  27.                      this.getTableData()
  28.                  }
  29.              })
  30.          }
  31.      })
复制代码
默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 ‘cancel’（普通弹出框中的点击取消时的回调参数）。如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。（注意：如果没有设置distinguishCancelAndClose为true，则都默认为取消）
这样就可以在catch中拿到回调参数action进行判断做什么操作了

总结

到此这篇关于vue修改this.$confirm的文字样式、自定义样式的文章就介绍到这了,更多相关vue修改this.$confirm文字样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316106tnr.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: Vue3使用ref与reactive创建响应式对象的示例代码

下一篇: element必填校验输入空格问题修改正则表达式、请求拦截器实现所有输入框去

发表于 2024-2-27 15:24:44

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4