element textarea支持换行 elementui文本框换行

目录

• 方式一：使用块级标签
• 方式二：使用模板字符串和换行标签
• 方式三：使用正则替换

前言： 最近在写项目中遇到这样一个需求，就是把MessageBox的提示信息换行居中显示，而title和按钮不居中显示

实现效果大概是这样的

默认效果是这样的

然后就在网上查找了几种方法，简单总结一下

方式一、方式二适用于前端确定那些文字，然后进行渲染；方式三是根据后端返回的message信息进行处理

用到了MessageBox的两个属性

参数	说明	类型	可选值	默认值
dangerouslyUseHTMLString	是否将 message 属性作为 HTML 片段处理	boolean	—	false
customClass	MessageBox 的自定义类名	string	—	—

首先定义了三个按钮，用来实现三种方式

<template>
  <div>
    <el-button type="success" @click="open1">方式一 点击打开 Message Box</el-button>
    <el-button type="success" @click="open2">方式二 点击打开 Message Box</el-button>
    <el-button type="success" @click="open3">方式三 点击打开 Message Box</el-button>
  </div>
</template>

自定义的MessageBox类名及内容：

<style lang="stylus"> 
  	/* 注意没有scoped */
  	.my-message-box .el-message-box__content {
    	text-align: center !important;
  	}
</style>

方式一：使用块级标签

// 方式一
open1() {
    let data = ["确认提交该内容吗1？", "注意：一旦提交，将无法修改数据内容！"];
    let str = '';
    data.forEach(item => {
        str += `<div>${item}</div>`;
        // str += `<div style="text-align: center;">${item}</div>`; // 这种写法不需要自定义类名
    })
    this.onConfirm(str);
}

将$confirm方法单独提取了出来

confirm(str) {
    this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        dangerouslyUseHTMLString:true, // 注意此属性
        customClass: 'my-message-box' // 此次是自定义类名
    })
        .then(() => {
        this.$message.success("删除成功!");
    })
        .catch(() => {
        this.$message.info("已取消删除");
    });
}

方式一实现效果如下

方式二：使用模板字符串和换行标签

// 方式二
open2() {
    let data = ["确认提交该内容吗2？", "注意：一旦提交，将无法修改数据内容！"];
    let str = '';
    data.forEach(item => {
        str += `${item}<br/>`;
    })
    this.onConfirm(str);
}

// 或者使用下面这种方式
let str = `确认提交该内容吗2？<br/>注意：一旦提交，将无法修改数据内容！`;
this.onConfirm(str);

方式二实现效果如下

方式三：使用正则替换

// 方式三
open3() {
    let str = '错误信息一：测试数据时出错；错误信息二：添加信息时出错；错误信息三：修改信息是出错；';
    let reg = /[;；]/g;
    str = str.replace(reg, '；<br/>');
    this.onConfirm(str);
}

方式三实现效果如下

附上完整代码

<template>
  <div>
    <el-button type="success" @click="open1">方式一 点击打开 Message Box</el-button>
    <el-button type="success" @click="open2">方式二 点击打开 Message Box</el-button>
    <el-button type="success" @click="open3">方式三 点击打开 Message Box</el-button>
  </div>
</template>

<script>
export default {
  components: {},
  name: "Demo",
  data() {
    return {
      
    };
  },
  methods: {
    // 方式一
    open1() {
      let data = ["确认提交该内容吗1？", "注意：一旦提交，将无法修改数据内容！"];
      let str = '';
      data.forEach(item => {
        str += `<div>${item}</div>`;
        // str += `<div style="text-align: center;">${item}</div>`; // 这种写法不需要自定义类名
      })
      this.onConfirm(str);
    },
    // 方式二
    open2() {
      let data = ["确认提交该内容吗2？", "注意：一旦提交，将无法修改数据内容！"];
      let str = '';
      data.forEach(item => {
        str += `${item}<br/>`;
      })
      // let str = `确认提交该内容吗2？<br/>注意：一旦提交，将无法修改数据内容！`;
      this.onConfirm(str);
    },
    // 方式三
    open3() {
      let str = '错误信息一：测试数据时出错；错误信息二：添加信息时出错；错误信息三：修改信息是出错；';
      let reg = /[;；]/g;
      str = str.replace(reg, '；<br/>');
      this.onConfirm(str);
    },
    onConfirm(str) {
       this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        dangerouslyUseHTMLString:true,
        customClass: 'my-message-box'
      })
        .then(() => {
          this.$message.success("删除成功!");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    }
  },
  computed: {},
};
</script>

<style lang="stylus"> 
  .my-message-box .el-message-box__content {
    text-align: center !important;
  }
</style>

今天的分项就到这里了~