您现在的位置是:首页 > Javascript
当前栏目
在 Vue 中使用 装饰器 Decorator
2023-03-14 09:46:20 时间
Decorator 的语法还没有通过提案,所以项目中很少用。不过最近刚好有一个需求用到了。
装饰器的语法 http://es6.ruanyifeng.com/#docs/decorator
需求是,有很多操作都需要二次确认,因为用到的是 element ui 组件,所以就需要在每个函数中都加一个确认操作。
deleteFile(data) { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).then(() => { // 删除文件操作 }).catch(() => {}); }
每个函数都加一遍。。感觉有点冗余。。于是想到了使用注释器将 confirm 提出去。
import { MessageBox } from 'element-ui'; function confirmation(target, name, descriptor) { let oldValue = descriptor.value; descriptor.value = function(...args) { MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示') .then(oldValue.bind(this, ...args)) .catch(() => {}); }; return descriptor; } @confirmation deleteFile(data) { // 删除文件操作 }
这样只需要在需要二次确认的函数上加一个 @confirmation 即可。
不过不同的操作需要的提示往往不一样,那就在注释器上加一个参数。
import { MessageBox } from 'element-ui'; export function confirmation(message) { return function(target, name, descriptor) { let oldValue = descriptor.value; descriptor.value = function(...args) { MessageBox.confirm(message, '提示') .then(oldValue.bind(this, ...args)) .catch(() => {}); }; return descriptor; } } @confirmation('此操作将永久删除该文件, 是否继续?') deleteFile(data) { // 删除文件操作 }
以上。。
相关文章
- 一篇讲明白对称的二叉树
- 你能给前端工程化下个定义么?
- 如何让别人看不懂你的 JS 代码?
- 六款流行Web大前端框架以及特性
- 搭建前端监控,采集用户行为的 N 种姿势
- 聊聊 C++ 右值引用 和 移动构造函数
- 你还在直接用 localStorage 么?该提升下了
- 16个实用的背景生成器工具
- TypeScript 终极初学者指南
- 25个有用的JavaScript代码
- 携程活动搭建平台的前端“开放性”建设探索
- 使用 CSS 构建强大且酷炫的粒子动画
- Vue3 中如何加载动态菜单?
- 列表页常见的 Hook 封装,你知道几个?
- 来自NPM联合创始人的预言:前端未来会这样
- 我常用的几个 VueUse 组合,推荐给你们!
- 妙用 CSS 构建花式透视背景效果
- 如何使用 React Hooks 重构类组件?
- 使用React-Cropper-Pro实现图片裁切压缩上传
- 一种高效的唯一标识符