uniapp中自定义showModal样式

在uniapp中，我们可以通过修改uni.scss文件中的$modal-colors变量来自定义showModal的样式。

首先，在项目根目录下找到uni.scss文件（如果没有则需要手动创建），并添加以下代码：

$modal-colors: (
  background: #ffffff,
  title: #333333,
  content: #666666,
  cancel-text: #666666,
  cancel: #f5f5f5,
  confirm-text: #ffffff,
  confirm: #007aff
);

这里我们以修改背景颜色、标题颜色、内容颜色、取消按钮文字颜色、取消按钮背景颜色、确认按钮文字颜色和确认按钮背景颜色为例进行修改。

然后，在需要显示showModal的页面中，使用uni.showModal方法，并设置modalStyles属性为custom，如下所示：

uni.showModal({
  title: '提示',
  content: '这是一条提示信息',
  modalStyles: {
    custom: {
      background: '#ffffff',
      title: '#333333',
      content: '#666666',
      cancelText: '#666666',
      cancel: '#f5f5f5',
      confirmText: '#ffffff',
      confirm: '#007aff'
    }
  }
})

这里我们将modalStyles属性设置为custom，并设置custom对象的属性为我们在uni.scss文件中自定义的样式。最后，就可以通过showModal方法显示我们自定义的样式了。

需要注意的是，uni.scss文件中的$modal-colors变量会影响到整个项目中所有的showModal样式，而在页面中通过modalStyles属性设置的样式只会影响到当前页面中的showModal样式。