uni.showModal自定义按钮

uni.showModal是uni-app框架中的一个API，用于显示模态对话框（弹窗）。它可以用来向用户展示一些信息，并提供自定义按钮供用户选择。

使用uni.showModal可以创建一个模态对话框，其中包含一个标题、内容和按钮。你可以自定义按钮的文本和样式，并通过回调函数来处理用户的点击事件。

以下是uni.showModal的使用示例：

uni.showModal({
  title: '提示',
  content: '这是一个模态对话框',
  showCancel: true,
  cancelText: '取消',
  cancelColor: '#000000',
  confirmText: '确定',
  confirmColor: '#3CC51F',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定按钮')
    } else if (res.cancel) {
      console.log('用户点击取消按钮')
    }
  }
})

在上面的示例中，我们创建了一个模态对话框，标题为"提示"，内容为"这是一个模态对话框"。对话框中有两个按钮，一个是"取消"按钮，另一个是"确定"按钮。当用户点击按钮时，会触发success回调函数，并通过回调函数的参数res来判断用户点击的是哪个按钮。

相关问题

uni.showModal自定义样式

### 修改 `uni.showModal` 的样式

在 Uni-app 中，默认的 `uni.showModal` 方法提供了基本的功能，但其样式较为固定。为了实现更灵活的样式定制，可以采用自定义组件的方式替代默认的 `uni.showModal`。

#### 使用全局自定义提示框

通过创建并注册一个全局可用的自定义提示框组件来替换内置的 `uni.showModal` 功能[^1]：

// main.js 文件中引入并挂载自定义组件
import G_show_modal from '@/components/G_show_modal/g_show_modal.js'
Vue.use(G_show_modal);

此方式允许开发者完全控制弹窗的设计与交互逻辑，在实际项目开发过程中更为实用和高效。

#### 创建自定义模态窗口组件

构建一个新的 Vue 组件用于模拟 `showModal` 行为，并在此基础上调整 CSS 样式以满足特定需求[^4]:

<!-- components/CustomShowModal.vue -->
<template>
  <view class="custom-modal-mask">
    <view class="custom-modal-dialog">
      <!-- 定制化的内容区域 -->
      <text>{{ message }}</text>

      <!-- 操作按钮组 -->
      <button @click="handleConfirm">确认</button>
      <button @click="handleCancel">取消</button>
    </view>
  </view>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    handleConfirm() {
      // 处理确认事件
      this.$emit('confirm');
    },
    handleCancel() {
      // 处理取消事件
      this.$emit('cancel');
    }
  }
}
</script>

<style scoped>
/* 添加个性化CSS样式 */
.custom-modal-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .5);
}

.custom-modal-dialog {
  width: 80%;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  background-color: white;
}
</style>

随后可以在页面或其他地方调用该组件作为新的对话框解决方案:

this.$refs.myCustomModal.show({
  message: '这是一个测试消息',
  confirmButtonText: '好的',
  cancelButtonText: '不了'
});

这种方法不仅能够改变外观设计，还可以扩展更多功能特性，比如动画效果、异步加载数据等高级应用案例[^3]。

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的样式类，用于设置对话框的背景色、圆角、内边距等样式。你可以根据自己的需求修改样式类的属性。