uni.showModal详解_千锋教育

一、uni.showModal怎么添加函数

uni.showModal是uni-app框架中提供的一个弹出提示框的方法，一般用于提示用户进行一些操作，如确认、取消等，其中的回调函数可以做一些额外操作，比如说打开wechat小程序。

下面是一个简单的示例：

uni.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});



这段代码会在页面中弹出一个提示框，其中包括一个标题和内容文本，以及“确定”和“取消”两个按钮。当用户点击其中任何一个按钮时，都会触发回调函数，根据用户的选择进行不同的操作。

二、uni.showModal怎么自定义关闭
默认情况下，uni.showModal方法的取消操作是由“取消”按钮触发的，而“确定”操作则是由“确定”按钮触发的。如果我们想要实现自定义关闭功能，就需要通过一些额外的步骤。

首先需要在页面的data中定义一个变量，用来存储弹窗的状态：

data: {
  modalShow: false
}


然后我们需要将这个变量作为参数传递给uni.showModal方法，并在success回调函数中对其进行修改：

uni.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  showCancel: true,
  cancelColor: '#007aff',
  confirmColor: '#FF3333',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else {
      console.log('用户点击取消');
    }
    this.setData({
      modalShow: false
    });
  }
});


在上面的代码中，我们设置了showCancel参数为true以启用“取消”按钮，cancelColor和confirmColor分别用于设置“取消”按钮和“确定”按钮的颜色，success回调函数中我们则根据用户的选择对modalShow变量进行修改。

三、uni.showModal原理
uni.showModal方法的原理是通过调用微信小程序的wx.showModal方法实现的。在uni-app框架中，微信小程序的API被封装在了uni对象中，页面中可以直接调用uni.showModal方法来创建自己的模态弹窗。

uni.showModal方法还支持其他一些参数选项，包括title、content、confirmText、cancelText、showCancel、cancelColor、confirmColor等。具体的使用方法可以参考官方文档。

四、uni.showModal 字大小
uni.showModal方法的提示框大小是固定的，无法通过设置字体大小来改变提示框中的文字大小。如果我们想要控制文字大小，可以通过CSS样式的方式来实现。

在uni-app框架中，样式文件可以单独创建一个.css文件，并在页面文件中使用@import进行导入。然后我们就可以在样式文件中定义自己的样式了。

比如说，可以使用下面的样式来设置模态框中的文字大小：

.modal-content {
  font-size: 16px;
}


这个样式规则将会应用到class为“modal-content”的元素中，并将其文字大小设置为16像素。

五、uni.showModal源码
uni.showModal的源码可以在uni-app框架的GitHub库中找到。在uni.js文件中搜索“showModal”关键词，即可找到相关的源码部分。

下面是uni.showModal方法的源码片段：

showModal: function showModal(param) {
  param.showCancel = param.showCancel === false ? false : true;
  if (param.cancelText && !param.cancelColor) {
    param.cancelColor = '#000000';
  }
  if (param.confirmText && !param.confirmColor) {
    param.confirmColor = '#3CC51F';
  }
  if (!param.title) {
    param.title = '';
  }
  wx.showModal({
    title: param.title,
    content: param.content,
    confirmText: param.confirmText || '确定',
    confirmColor: param.confirmColor || '#3CC51F',
    cancelText: param.cancelText || '取消',
    cancelColor: param.cancelColor || '#000000',
    success: function success(res) {
      var ret = {};
      ret.confirm = res.confirm;
      ret.cancel = !res.confirm;
      param.success && param.success(ret);
      param.complete && param.complete(ret);
    },
    fail: function fail(res) {
      param.fail && param.fail(res);
    }
  });
}


在源码中，我们可以看到uni.showModal方法其实是通过调用微信小程序的wx.showModal方法实现的，同时也对参数进行了一些处理。

六、uni.showModal提示框取消
在uni.showModal方法中，我们可以通过设置showCancel参数来决定是否显示“取消”按钮。如果将showCancel参数设置为false，就可以取消掉模态提示框中的“取消”按钮。

下面是一段示例代码：

uni.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  showCancel: false,
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    }
  }
});


在上面的代码中，我们将showCancel参数设置为false，这样就不会显示“取消”按钮了。

七、uni.showModal手动关闭
uni.showModal方法本身是没有提供手动关闭的功能的，但是可以通过调用uni.hideModal方法手动关闭提示框。在关闭提示框时，需要先判断当前提示框是否处于打开状态。

下面是一段示例代码：

data: {
  modalShow: false
},
showModal: function () {
  this.setData({
    modalShow: true
  });
},
hideModal: function () {
  var that = this;
  if (that.data.modalShow) {
    that.setData({
      modalShow: false
    });
  }
}


在这段代码中，我们通过定义modalShow变量来控制模态提示框的显示和隐藏。showModal方法可以用于打开提示框，而hideModal方法则可以用于关闭提示框。在hideModal方法中，我们首先判断当前提示框是否处于打开状态，如果是，则更新modalShow变量，否则不做任何操作。

八、uni.showModal做成一个按钮
我们可以将uni.showModal方法和按钮元素结合起来，来创建一个用于打开提示框的按钮。在按钮元素中，我们可以使用bindtap属性来绑定一个触发事件，从而在用户点击按钮时打开提示框。

下面是一个简单的示例代码：





在上面的代码中，我们定义了一个名为“showModal”的方法，在这个方法中我们调用了uni.showModal方法来打开提示框。然后我们在按钮元素中使用bindtap属性将触发事件绑定到这个方法上。

九、uni.showModal内容居中
我们可以通过使用CSS样式将模态提示框中的内容居中。在uni-app框架中，我们可以通过下列样式来实现内容居中：

.modal-content {
  text-align: center;
}


其中，.modal-content表示模态提示框中的内容区域，text-align: center则用于将内容水平居中。同时，我们还可以使用vertical-align属性来调整内容的垂直对齐方式。

十、uni.showModal await选取
如果我们需要在提示框弹出后立即执行某个操作，而不是等待用户的选择完成后再进行操作，就需要使用async/await语法来等待提示框完成后再执行。

下面是一个简单的示例代码：

async function showModal() {
  const res = await uni.showModal({
    title: '提示',
    content: '这是一个模态弹窗'
  });
  console.log(res.confirm);
}

showModal();


在这段代码中，我们先定义了一个名为“showModal”的async函数，然后使用await语法等待uni.showModal方法的结果。在成功之后，就可以根据用户的选择进行不同的操作了。注意，使用async/await语法时需要将函数定义为async函数。