//global.js
// 定义vu
e 全局方
// 定义vue 全局方法 建议自定义的全局方法加_ 以示区分
export default {
install(Vue, options = {}) {
// 全局方法1
Vue.prototype._fn1 = function () {
// console.log('f1')
}
// 全局方法2
Vue.prototype._fn2 = function () {
// console.log('fn2');
}
// 全局方法3 再次封装element.ui的$confirm的方法
Vue.prototype._confirm = function (cue, tip, handleConfirm) {
// 当第二个参数是回调函数
if (typeof tip !== 'string') {
handleConfirm = tip
tip = '提示'
}
(cue, tip, {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(handleConfirm)
.catch(() => {
this.$message.info("已取消");
});
}
}
}
//将then改写为async await模式
// 全局方法3 封装element.ui的$confirm方法
Vue.prototype._confirm = async function (cue, tip, handleConfirm) {
// 当第二个参数是回调函数
if (typeof tip !== "string") {
handleConfirm = tip;
tip = "提示";
}
let res = '' //try-catch有作用域范围如果 res定义在里面，等下if判断就拿不到res
try {
res = await this.$confirm(cue, tip, {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
} catch (error) {
this.$message.info('已取消')
}
if (res === 'confirm') handleConfirm()
2.main.js文件注入
// 定义全局方法
import global from './utils/global'
Vue.use(global)
3.use
在vue实例对象methods使用。
//例子1
deleteSelected() {
this._confirm(
"批量删除数据不可恢复，是否继续?",
this.deleteSelectedComfirm
);
},
deleteSelectedComfirm() {
console.log(this.multipleSelection);
}
//例子2 接受原始处理函数的参数
handleDelete(index, row) {
this._confirm("删除此条数据不可恢复，是否继续?", () => {
this.handleDeleteConfirm(index, row);
});
},
handleDeleteConfirm(index, row) {
console.log("row: ", row);
console.log("index: ", index);
}
2 在vue 页面标签中使用。
