11 vue 自定义全局方法
2024-08-24 13:54:57
//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 页面标签中使用。
最新文章
- dede channel 增加limit(属性)功能
- uva147 Dollars ——完全背包
- 【Reporting Services 报表开发】— 矩阵的使用
- HDAO one error
- Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能
- android studio class org.bouncycastle.asn1.asn1primitive overrides final method equals
- TCP/IP 三次握手和四次握手
- php基础之 ->， =>，@，&,::，%符号
- GameUnity 2.0 文档（二） 纸片人系统
- JAVA的18条BASE
- python 操作SQLAlchemy
- JVM学习资料
- Pycharm 自定义快捷键
- keepalived + glusterfs实现高可用
- mysql数据库建立的数据库在哪个文件夹？
- iuplua test failure
- PHP中redis的使用
- CF600E:Lomsat gelral(线段树合并)
- catch(…) vs catch(CException *)？
- Git----远程仓库之添加远程库02