首页 前端知识 vue 修改 this.$confirm 的文字样式、自定义样式

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

2024-02-11 10:02:48 前端知识 前端哥 885 24 我要收藏

通常使用 confirm 确认框时,一般这样写:

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

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

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

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

提示文字中,修改部分字体样式时,可以这样做: 

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

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将<span style="color: red;">永久删除</span>该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true, // 使用HTML片段
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

二、createElement 新建元素和对象,然后对新建的元素进行标签化设置。 

 

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

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

        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

 设置 iconClass 属性,可以更改icon:

 三、文字换行显示

 

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

<script>
  export default {
    methods: {
      open() {
        const confirmText = ['第一行内容',  '第二行内容','第三行内容']
        const newData = []
        const h = this.$createElement
        for (const i in confirmText) {
            newData.push(h('p', null, confirmText[i]))
        }

        this.$confirm(
          '提示',
        {
          title:'提示',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          message: h('div', null, newData),
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

 

 四、使用 customClass 设置MessageBox 的自定义类名,从而自定义样式

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

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass:'del-model', // 设置MessageBox 的自定义类名
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>
//注意这里不能将样式放到scoped中!!!
<style lang="scss">
.del-model {
  .el-button:nth-child(1) {
    width: 100px;//修改确认按钮的宽度
  }
  .el-button:nth-child(2) {
    margin-right: 10px;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
  }
}
</style>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1736.html
标签
elementui
评论
发布的文章

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!