uni.showModal 怎么加图标
时间: 2024-08-13 08:01:04 浏览: 71
微信小程序 showModal 自定义showModal.zip
`uni.showModal` 是微信小程序提供的一个用于展示模态弹窗的方法。该方法接收四个参数:content、title、showCancel 和 cancelText,默认情况下不会有任何图标显示。若想在调用 `uni.showModal` 时添加图标,需要通过 `content` 参数提供一段包含 SVG 图标的内容。
以下是将图标加入到模态弹窗示例:
```javascript
// 首先引入SVG文件
import iconSvg from './path_to_your_svg_file.svg';
// 使用模板字符串将图标插入内容中
const message = `
<div style="display:flex;align-items:center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">${iconSvg}</svg>
这是一个含有图标的模态弹窗提示信息
</div>
`;
// 调用 uni.showModal 并传入带有SVG图标的消息作为 content
uni.showModal({
title: '标题',
content: message,
showCancel: true,
cancelText: '取消',
success(res) {
if (res.confirm) {
console.log('用户点击了确认');
} else if (res.cancel) {
console.log('用户点击了取消');
}
},
});
```
注意几个关键点:
1. **引入SVG** - 确保你的SVG文件位于正确的路径下,并将其引入JavaScript文件。
2. **使用模板字符串** - 使用模板字符串可以方便地插入SVG元素到文本中。
3. **CSS样式** - 你需要适当设置SVG和其容器的CSS样式,如宽度、高度等,以适应你的界面设计需求。
阅读全文