我封装了一个提示工具```javascript
// 提示业务模型
class Tip {
/**
* 模态弹框
*/
modal(params = {}) {
return new Promise((resolve, reject) => {
// 模态弹框
uni.showModal({
title: '温馨提示',
confirmColor: '#07C160',
content: '您确定要执行此操作吗？',
...params, // 自定义配置
// 确定或取消
complete(res) {
resolve(res)
}
})
})
}
/**
* loading
*/
loading(params = {}) {
// loading
uni.showLoading({
title: '加载中...',
mask: true,
...params
})
}
/**
* 消息提示框
*/
toast(params = {}) {
uni.showToast({
title: '成功',
icon: 'success',
mask: true,
position: 'center',
...params
})
} }
// 创建实例
const tip = new Tip()
// 导出实例
module.exports = tip
我没有输入任何内容，点击 <my-button @click="submitHandle">
<slot></slot>
</my-button> 为什么在app端没有显示，h5和微信小程序却有提示```javascript
<template>
<view class="login-form">
<my-input-group>
<!-- 输入框 -->
<my-input placeholder="请输入用户名" v-model="form.username" :maxlength="20" />
</my-input-group>
<my-input-group>
<!-- 输入框 -->
<my-input type="password" placeholder="请输入密码" v-model="form.password" :maxlength="16" />
</my-input-group>
<my-input-group>
<!-- 输入框 -->
<my-input placeholder="请输入验证码" :maxlength="4" v-model="form.captcha" />
<!-- 图形验证码 -->
<image :src="captchaImg" class="captcha" @click="getCaptcha" />
</my-input-group>
<my-input-group>
<!-- 登录按钮 -->
<my-button @click="submitHandle">
<slot></slot>
</my-button>
</my-input-group>
</view>
</template>
<script>
import {
getCaptchaApi
} from '@/api/auth/auth.js'
// 提示工具
import tip from '@/utils/tip.js'
// 引入表单验证工具
import formValidation from '@/utils/FormValidation.js'
export default {
name: "my-login-form",
data() {
return {
captchaImg: '',
// 表单数据
form: {
username: '',
password: '',
captcha: '',
captchaToken: ''
}
};
},
methods: {
async getCaptcha() {
try {
// 发起网络请求
const result = await getCaptchaApi()
// console.log(result)
// 将CaptchaToken保存
this.form.captchaToken = result.data.data.captchaToken
// 将图片url保存
this.captchaImg = result.data.data.image
} catch (error) {
//TODO handle the exception
console.log(error)
}
},
// 提交事件
async submitHandle() {
// 执行验证
const validatorResult = await this.validationHandle()
// 验证失败
if (!validatorResult) return
// 将数据返回
this.$emit('submit', JSON.parse(JSON.stringify(this.form)))
},
// 表单数据验证
async validationHandle() {
// 验证规则
const rules = {
// 用户名
username: [
// 非空验证
{
required: true,
message: '用户名不能为空'
},
// 长度验证
{
min: 6,
max: 20,
message: `用户名格式错误: 需以字母或下划线开头: 6-20位字母/数字/下划线`
},
// 自定义验证
{
pattern: /^[a-zA-Z_][a-zA-Z0-9_]{5,20}$/,
message: '用户名格式错误: 需以字母或下划线开头: 6-20位字母/数字/下划线'
}
],
// 密码
password: [
// 非空验证
{
required: true,
message: '密码不能为空'
},
// 长度验证
{
min: 8,
max: 16,
message: `密码格式错误: 需8-16位, 包含字母或特殊字符, 且不含中文`
},
// 自定义验证
{
pattern: /^(?=.*[a-zA-Z_\-\\!#$%&'()*+,.\/:;<=>?@[\]_{}~])(?!.*[\u4e00-\u9fa5]).{8,16}$/,
message: '密码格式错误: 需8-16位, 包含字母或特殊字符, 且不含中文'
}
],
// 验证码
captcha: [
// 非空验证
{
required: true,
message: '验证码不能为空'
},
// 长度验证
{
min: 4,
max: 4,
message: `验证码长度为4位`
},
// 自定义验证
{
pattern: /^[A-Za-z0-9]+$/,
message: '验证码只能包含数字和大小写字母'
}
],
// 验证码
captchaToken: [
// 非空验证
{
required: true,
message: '验证码失效请刷新'
},
// 长度验证
{
min: 32,
max: 32,
message: `验证码长度为4位`
},
],
}
// 执行验证方法
const validationResult = await formValidation.validation(this.form, rules)
// 判断用户输入的值是否符合规则
if (validationResult.length) {
// 弹框提示
tip.modal({
showCancel: false,
content: validationResult[0].message
})
// 验证失败
return false
}
// 验证完成
return true
}
},
created() {
this.getCaptcha()
}
}
</script>
<style lang="less">
.login-form {
padding: 120rpx;
// 图形验证码
.captcha {
position: absolute;
z-index: 100;
top: 0;
right: 0;
width: 200rpx;
height: 80rpx;
}
}
</style>
蔡cai
感觉是没执行promise的reject导致的，你看下运行到app的控制台有没有报错
2025-06-25 14:04