【uniapp】确认框（confirm）组件_uniapp confirm

近期，将会把以前帖子的uniapp组件封装好上传至uniapp插件市场。确认框已经弄好，这里给呈现给大家。
插件地址：添加链接描述

这个提示会展现在右下角，点击快时会一个个向上顶。

Confirm提示框

主要用于各种提示，目前支持info/warning/error/success

---

使用方法：

①安装vuex、lodash

npm install vuex -D
npm install lodash -D
1
2

②copy示例中components内容至项目中components

③copy示例中mixins，并在项目main.js引入，如：

import mixin from './mixins/index.js'
Vue.use(mixin)
1
2

④copy示例中store，并在项目main.js引入，如：

import store from './store/index.js'
Vue.prototype.$store = store
const app = new Vue({
    ...App,
	store
})
1
2
3
4
5
6

template调用示例：

<confirm></confirm> //注意：一个page，只能写一个，多写点击时会弹出多次
1

js调用示例：

1、成功

this.confirm_({
    name: "success",
    type: "success",
    message: "保存成功！"
})
1
2
3
4
5

2、警告

this.confirm_({
    name: "warning",
    type: "warning",
    message: "保存警告！",
    mask: true,
    closed: true,
    close: () => {this.returnClick = "保存警告close"}
})
1
2
3
4
5
6
7
8

3、错误

this.confirm_({
    name: "error",
    type: "error",
    message: "保存失败！",
    closed: true,
    close: () => {this.returnClick = "保存失败close"}
})
1
2
3
4
5
6
7

4、信息提示

this.confirm_({
    name: "info",
    type: "info",
    message: "保存信息！",
    confirmText: "保存", 
    cancelText: "取消",  
    confirm: () => {this.returnClick = "保存信息confirmText"},
    cancel: () => {this.returnClick = "保存信息cancelText"}, 
})
1
2
3
4
5
6
7
8
9

属性：

方法：