业务需求中,有这样一个反馈信息,需要根据;
进行换行并通过Notification组件展示:
const msg = "我是反馈信息1;我是反馈信息2;我是反馈信息3"
常规的Notification
使用并不会自动换行,但是官方文档中description
不仅可以使用string
,还可以使用VNode
:
众所周知,Vue
中构造一个VNode
的语法为h
函数:
h(nodeType, nodeConfig, nodeInnerHTML)
我们第一种方式可以使用HTML中pre
标签结合\n
换行:
description: ()=>{
// 将反馈信息中所有;替换为\n换行符
const res = msg.replaceAll(';','\n')
return h('pre',{},res)
},
第二种方式较为繁琐,将每一个被分号切割的字符串都转为VNode
,可定制化程度更高:
description: () => {
// 将反馈信息使用;分割为数组
const splitText = msg?.split(';') ?? []
// 数组中每项反馈信息都转为VNode
const res = _.map(splitText, (item) => {
return h('p', {
style: {
'margin-bottom': 0,
'font-size': 'small'
}
}, item)
})
// 返回总的VNode,子元素为所有反馈信息
return h('p', {
style: {
overflow: 'scroll',
height: '80vh'
}
}, res)
},