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屬性來綁定一個觸發事件，從而在用戶點擊按鈕時打開提示框。

下面是一個簡單的示例代碼：

<template>
  <view>
    <button bindtap="showModal">打開提示框</button>
  </view>
</template>

<script>
  export default {
    methods: {
      showModal: function () {
        uni.showModal({
          title: '提示',
          content: '這是一個模態彈窗',
          success: function (res) {
            if (res.confirm) {
              console.log('用戶點擊確定');
            } else if (res.cancel) {
              console.log('用戶點擊取消');
            }
          }
        });
      }
    }
  };
</script>

在上面的代碼中，我們定義了一個名為「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語法來等待提示框完成後再執行。