Uni-app Dialog 函数列表及使用说明

| 函数名称 | 函数描述 | 参数 | 返回值 | |---|---|---|---|| | showToast | 消息提示框 | title: string, duration: number=1500 | 无 | | showModal | 确认框 | title: string, content: string, confirmText: string='确定', cancelText: string='取消' | Promise | | showPrompt | 提示框 | title: string, placeholder: string='', confirmText: string='确定', cancelText: string='取消' | Promise<string | null> | | showLoading | 加载框 | title: string | 无 | | hideLoading | 隐藏加载框 | 无 | 无 | | showActionSheet | 操作菜单 | itemList: Array, itemColor: string='#000000' | Promise |

函数代码示例

// dialog.js

export default {
   // 消息提示框
   showToast(title, duration = 1500) {
      // 调用 uni.showToast API
      uni.showToast({
         title: title,
         icon: 'none',
         duration: duration
      })
   },

   // 确认框
   showModal(title, content, confirmText = '确定', cancelText = '取消') {
      // 返回一个 Promise 对象，以便异步获取用户的操作结果
      return new Promise((resolve, reject) => {
         uni.showModal({
            title: title,
            content: content,
            confirmText: confirmText,
            cancelText: cancelText,
            success: res => {
               if (res.confirm) {
                  // 用户点击了“确定”按钮
                  resolve(true)
               } else if (res.cancel) {
                  // 用户点击了“取消”按钮
                  resolve(false)
               } else {
                  // 调用失败时，返回 reject 状态
                  reject()
               }
            },
            fail: () => {
               // 调用失败时，返回 reject 状态
               reject()
            }
         })
      })
   },

   // 提示框
   showPrompt(title, placeholder = '', confirmText = '确定', cancelText = '取消') {
      // 返回一个 Promise 对象，以便异步获取用户的操作结果
      return new Promise((resolve, reject) => {
         uni.showModal({
            title: title,
            content: '',
            showCancel: true,
            confirmText: confirmText,
            cancelText: cancelText,
            success: res => {
               if (res.confirm) {
                  // 用户点击了“确定”按钮，拿到输入框中的值
                  let inputVal = res.inputValue || ''
                  resolve(inputVal.trim())
               } else if (res.cancel) {
                  // 用户点击了“取消”按钮，返回 null 值
                  resolve(null)
               } else {
                  // 调用失败时，返回 reject 状态
                  reject()
               }
            },
            fail: () => {
               // 调用失败时，返回 reject 状态
               reject()
            }
         })

         // 弹出键盘，并设置相关属性
         uni.showKeyboard({
            defaultValue: '',
            maxLength: 20,
            multiple: false,
            confirmHold: true,
            confirmType: 'done',
            placeholder: placeholder,
            success: () => {},
            fail: () => {}
         })
      })
   },

   // 加载框
   showLoading(title) {
      // 调用 uni.showLoading API 显示加载框
      uni.showLoading({
         title: title,
         mask: true
      })
   },

   hideLoading() {
      // 调用 uni.hideLoading API 隐藏加载框
      uni.hideLoading()
   },

   // 操作菜单
   showActionSheet(itemList, itemColor = '#000000') {
      // 返回一个 Promise 对象，以便异步获取用户的操作结果
      return new Promise((resolve, reject) => {
         uni.showActionSheet({
            itemList: itemList,
            itemColor: itemColor,
            success: res => {
               // 用户点击了菜单项，返回所选项的索引值
               resolve(res.tapIndex)
            },
            fail: () => {
               // 调用失败时，返回 reject 状态
               reject()
            }
         })
      })
   }
}

函数使用方法

// 使用 showToast 函数显示消息提示框
import dialog from './dialog.js';
dialog.showToast('操作成功！');

// 使用 showModal 函数显示确认框
dialog.showModal('确认操作', '确定要进行此操作吗？').then(res => {
   if (res) {
      // 用户点击了“确定”按钮
      console.log('用户点击了“确定”按钮');
   } else {
      // 用户点击了“取消”按钮
      console.log('用户点击了“取消”按钮');
   }
});

// 使用 showPrompt 函数显示提示框
dialog.showPrompt('请输入用户名', '请输入您的用户名').then(res => {
   if (res) {
      // 用户点击了“确定”按钮，获取输入框中的用户名
      console.log('用户输入的用户名：', res);
   } else {
      // 用户点击了“取消”按钮
      console.log('用户点击了“取消”按钮');
   }
});

// 使用 showLoading 函数显示加载框
dialog.showLoading('正在加载...');

// 使用 hideLoading 函数隐藏加载框
dialog.hideLoading();

// 使用 showActionSheet 函数显示操作菜单
dialog.showActionSheet(['选项一', '选项二', '选项三']).then(res => {
   console.log('用户点击了菜单项：', res);
});

注意：

所有函数均基于 uni.js API，需要在 uni-app 项目中使用。
可以根据项目需求自定义参数和返回值。
函数代码示例仅供参考，实际使用时请根据具体情况进行修改。