在Vue中初次使用装饰器(Decorator)
2023-02-18 16:40:57 时间
1. 扩展eslintConfig配置
{
"eslintConfig": {
...
"parserOptions": {
...
"ecmaFeatures": {
"legacyDecorators": true
}
}
...
}
}
2. 关闭Vetur提示(项目级别)
{
"vetur.validation.script": false,
}
3. 新建装饰器函数: src\decorators\index.js
export function confirm(message, title, cancel) {
return (target, name, descriptor) => {
console.log('name ', name);
console.log('target ', target);
console.log('descriptor ', descriptor);
// 保存被装饰的函数
const fn = descriptor.value
// 重写函数扩展功能
descriptor.value = function (...reset) {
const result = window.confirm(`${title}\n\n${message}`)
if (result) {
// 执行原函数
fn.apply(this, reset)
} else {
// 执行取消函数并绑定this便于后续使用
cancel && cancel.apply(this, [])
}
}
}
}
4. 使用装饰器完成功能
<script>
import { confirm } from "./decorators";
export default {
name: "App",
methods: {
@confirm("确定要删除吗?", "提示", function() {
// 通过在装饰器函数中使用apply改变this,使得此处可以使用定义的cancel函数
this.cancel();
})
// 简化在删除功能中的二次确认部分
deleteItem(id) {
console.log("删除成功", id);
},
cancel() {
console.log("取消了");
},
},
};
</script>
相关文章
- 大数据必学Java基础(九十八):JDBC API总结
- 大数据必学Java基础(九十九):DAO模式介绍
- 大数据必学Java基础(一百):员工管理系统开发
- 大数据必学Java基础(一百零一):BaseDAO抽取
- JixiPix Premium Pack for Mac(照片特效软件套装) v1.2.7中文版
- WEB开发--html 02html的标签
- 如何用六西格玛设计最佳目标?
- 大数据必学Java基础(一百零二):连接池的使用
- 大数据必学Java基础(一百零三): log4j日志框架
- 想要让客户更满意?VOC,你值得拥有
- 马斯克疯狂裁员背后 硬核管理该怎样才行之有效
- 原创 | 利用BERT 训练推特上COVID-19数据
- 独家 | 四个提升数据管道的最佳软件工程策略
- Docker Desktop 向大公司宣告收费,网友大呼:是时候弃用了
- Set A Light 3D Studio for Mac(3D摄影棚布光软件) v2.00.15汉化版
- Spring官宣新家族成员:Spring Authorization Server
- Java程序员怎样才能拿到年薪40万以上,从而告别重复的CRUD?
- 原创 | 一文读懂K均值(K-Means)聚类算法
- 高效大数据开发之数据倾斜的实践
- JAVA springboot 添加全局异常的处理