需求

由于接口返回的提示信息過長，接口已經在返回提示中加入換行標簽了，但是使用proxy.$modal.msgSuccess(res.msg)提示沒有換行，那么Vue3中proxy.$modal.msgSuccess()如何讓提示文本換行？

解決方案

msgSuccess()函數中傳入dangerouslyUseHTMLString屬性。代碼如下：

getOrderInfo(_oids).then(res => {if(res.code == 200) {proxy.$modal.msgSuccess({message:res.msg,dangerouslyUseHTMLString: true});}else {proxy.$modal.msgError({message:res.msg,dangerouslyUseHTMLString: true});}

在Vue3中使用dangerouslyUseHTMLString屬性主要用于處理Element Plus等UI庫中需要將字符串作為HTML片段渲染的場景。

安全風險?

該屬性會繞過Vue的默認XSS防護，若動態插入用戶輸入的HTML內容可能導致XSS攻擊。在確保輸入的HTML內容不含惡意代碼才能使用，由于提示信息是接口自己組裝返回的，可以確保內容是安全的。