vue element this.$confirm如何换行并提示修改颜色

vue 08-04 15:52

一、this.$confirm提示的文字换行

this.$confirm的提示文字不支持转为html格式,所以也就无法换行或者修改颜色。但是我们可以用 this.$createElement 来处理。例在Vue的代码中

//res.data为后端返回的数据列表

const h = this.$createElement
const newDatas = []
res.data.forEach(item=>{
  newDatas.push(h('p', null, '【' + item.mobile + '】成功,时间:' + item.time))
})
this.$confirm({
  title: "下单列表", 
  message: h('div', null, newDatas),
  showCancelButton: true,
  confirmButtonText: '继续购物',
  cancelButtonText: '查看订单',
  type: 'success'
})

二、this.$confirm提示的文字添加颜色

主要还是用到this.$createElement,给dom元素添加class或者自定义样式就行。例如下面的代码:

h('p', { class: 'color-red'}, '【' + item.mobile + '】成功,时间:' + item.time) 或者

h('p', { style: {color: 'red' }}, '【' + item.mobile + '】成功,时间:' + item.time)

相关推荐