uniapp showToast中title换行

在uniapp中，可以使用`\n`来实现toast的title换行。以下是一个示例代码：

uni.showToast({
  title: '第一行\n第二行',
  duration: 2000
});

在上述示例中，`title`的值为`'第一行\n第二行'`，`\n`表示换行。当`showToast`被调用时，toast的title将会显示为两行文本。

希望对你有所帮助！如果你还有其他问题，请随时提问。

相关问题

uniapp showToast

引用引用引用<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [跨平台应用开发进阶(七) ：uni-app 自定义 showToast](https://blog.csdn.net/sunhuaqiang1/article/details/123150420)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [uniapp 提示框(showToast、showModal、showLoading)](https://blog.csdn.net/weixin_44504531/article/details/127145134)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [uniapp showToast](https://blog.csdn.net/hu1628299958/article/details/114694214)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

uniapp showtoast 样式修改

你可以通过修改全局样式或者在单个页面中的样式来修改 `uni.showToast` 的样式。

1. 全局样式

在 `App.vue` 中的 `style` 标签中添加以下样式：

/* uni.showToast 样式修改 */
.uni-toast__text {
  color: #fff; /* 文本颜色 */
  background-color: rgba(0, 0, 0, 0.7); /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 10px 16px; /* 内边距 */
}

2. 单个页面样式

在需要修改样式的页面中的 `style` 标签中添加以下样式：

/* uni.showToast 样式修改 */
.custom-toast__text {
  color: #fff; /* 文本颜色 */
  background-color: rgba(0, 0, 0, 0.7); /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 10px 16px; /* 内边距 */
}

然后在触发 `uni.showToast` 的地方，添加 `icon` 和 `mask` 参数，并在 `success` 回调函数中添加以下代码：

uni.showToast({
  title: '这是一条提示信息',
  icon: 'none',
  mask: true,
  success() {
    const toast = document.querySelector('.uni-toast__text');
    if (toast) {
      toast.classList.add('custom-toast__text');
    }
  }
})

这样就可以通过添加自定义样式类来修改 `uni.showToast` 的样式了。