更新记录
v1.0.0(2022-01-18) 下载此版本
-uniapp提示框 -全局通用提示框,包括成功、警告、提示、错误等
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
Confirm提示框
主要用于各种提示,目前支持info/warning/error/success
使用方法:
①安装vuex、lodash
npm install vuex -D
npm install lodash -D
②copy示例中components内容至项目中components
③copy示例中mixins,并在项目main.js引入,如:
import mixin from './mixins/index.js'
Vue.use(mixin)
④copy示例中store,并在项目main.js引入,如:
import store from './store/index.js'
Vue.prototype.$store = store
const app = new Vue({
...App,
store
})
template调用示例:
<confirm></confirm> //注意:一个page,只能写一个,多写点击时会弹出多次
js调用示例:
1、成功
this.confirm_({
name: "success",
type: "success",
message: "保存成功!"
})
2、警告
this.confirm_({
name: "warning",
type: "warning",
message: "保存警告!",
mask: true,
closed: true,
close: () => {this.returnClick = "保存警告close"}
})
3、错误
this.confirm_({
name: "error",
type: "error",
message: "保存失败!",
closed: true,
close: () => {this.returnClick = "保存失败close"}
})
4、信息提示
this.confirm_({
name: "info",
type: "info",
message: "保存信息!",
confirmText: "保存",
cancelText: "取消",
confirm: () => {this.returnClick = "保存信息confirmText"},
cancel: () => {this.returnClick = "保存信息cancelText"},
})
属性:
属性 | 类型 | 值 | |
---|---|---|---|
name | String | (必填)弹出框别名 | 取唯一名称,避免多次弹出 |
type | String | (必填)info/warning/error/success | |
mask | Boolean | 默认值:false | true时为透明遮罩,进行其他操作无效,只能操作确认框 |
message | String | "" | 提示内容 |
closed | Boolean | 默认值:false | type值为warning/error时使用,closed为true时点击右上角叉号,调用@close方法 |
confirmText | String | "" | type值为info时使用,更改确定按钮文字 |
cancelText | String | "" | type值为info时使用,更改取消按钮文字 |
方法:
名称 | |
---|---|
confirm | type='info',确认方法 |
cancel | type='info',取消方法 |
close | type='warning/error',关闭方法 |