js使用装饰器实现操作前二次确认询问
引言
相信大家平常在开发过程中，经常会遇到此类需求。危险操作（如删除，退出登录）往往需要弹框提示给用户二次确认一下。本文介绍的是，如何使用js方法装饰器，封装二次确认弹框操作，增加小伙伴的开发效率。
装饰器介绍
装饰器是对类、函数、属性之类的一种装饰，可以针对其添加一些额外的行为。详细使用，自行百度！
常规手段
view
<div class="bg-white flex justify-center">
<div class="btn-primary" @click="clickMe">点我</div>
</div>
js
clickMe() {
uni.showModal({
title: "点击提示",
content: "你确定要点我？",
success: (res) => {
if (res.confirm) {
console.log("点我干啥");
}
},
});
}
效果展示
装饰器写法
confirm.js
function confirm(message: string, title: string, cancelFn = function() {}) {
return function(target: any, name: string, descriptor: any) {
const originFn = descriptor.value;
descriptor.value = function(rest: any) {
uni.showModal({
title: title,
content: message,
success: (res) => {
if (res.confirm) {
originFn.apply(this, rest);
}
},
});
};
};
}
main.js
@confirm("你确定要点我？","点击提示")
clickMe() {
// uni.showModal({
// title: "点击提示",
// content: "你确定要点我？",
// success: (res) => {
// if (res.confirm) {
// console.log("点我干啥");
// }
// },
// });
console.log("点我干啥");
}
效果展示
版权声明: 本文首发于 指尖魔法屋-js使用装饰器实现操作前二次确认询问（https://blog.thinkmoon.cn/post/900_js%E4%BD%BF%E7%94%A8%E8%A3%85%E9%A5%B0%E5%99%A8%E5%AE%9E%E7%8E%B0%E6%93%8D%E4%BD%9C%E5%89%8D%E4%BA%8C%E6%AC%A1%E7%A1%AE%E8%AE%A4%E8%AF%A2%E9%97%AE/） 转载或引用必须申明原指尖魔法屋来源及源地址！