uniapp uni.showModal 如何自定义样式

uni.showModal是uni-app框架中用于显示模态对话框的API。它可以用来展示一个带有标题、内容和按钮的对话框，并且可以根据需要自定义对话框的样式。

要自定义uni.showModal的样式，可以通过在App.vue或者页面的vue文件中添加全局样式或者局部样式来实现。以下是一种常见的自定义样式的方法：

1. 在App.vue或者页面的vue文件中，添加一个<style>标签，用于定义对话框的样式。

<style>
  .custom-modal {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20px;
  }
  .custom-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
  }
  .custom-content {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }
  .custom-button {
    background-color: #007aff;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
  }
</style>

2. 在需要使用uni.showModal的地方，调用uni.showModal函数，并设置参数中的cssClass属性为自定义的样式类名。

uni.showModal({
  title: '提示',
  content: '这是一个自定义样式的对话框',
  cssClass: 'custom-modal',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

通过以上步骤，你可以自定义uni.showModal对话框的样式。在上述示例中，我们定义了一个名为custom-modal的样式类，用于设置对话框的背景色、圆角、内边距等样式。你可以根据自己的需求修改样式类的属性。