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) {
// 删除文件操作
}

以上。。

在 Vue 中使用 装饰器 Decorator的更多相关文章

  1. python中的装饰器decorator

    python中的装饰器 装饰器是为了解决以下描述的问题而产生的方法 我们在已有的函数代码的基础上,想要动态的为这个函数增加功能而又不改变原函数的代码 例如有三个函数: def f1(x): retur ...

  2. 浅析python中的装饰器decorator

    最近学习python,其中decorator比较难理解,遂写一篇来总结供后续查阅. 定义一个函数,想在运行时动态的改变函数的功能,又不想改变函数本身的代码,可以使用高阶函数(可以使用函数作为参数) 装 ...

  3. [转] Python中的装饰器(decorator)

    想理解Python的decorator首先要知道在Python中函数也是一个对象,所以你可以 将函数复制给变量 将函数当做参数 返回一个函数 函数在Python中和变量的用法一样也是一等公民,也就是高 ...

  4. python 装饰器(decorator)

    装饰器(decorator) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 装饰器(decorator)是一种高级Python语 ...

  5. 就谈个py 的装饰器 decorator

    很早很早就知道有这么个 装饰器的东西,叫的非常神秘. 包括c#  和 java 中都有这个东西, c#中叫做attribut 特性,java中叫做Annotation 注解,在偷偷学习c#教程的时候, ...

  6. 简单说明Python中的装饰器的用法

    简单说明Python中的装饰器的用法 这篇文章主要简单说明了Python中的装饰器的用法,装饰器在Python的进阶学习中非常重要,示例代码基于Python2.x,需要的朋友可以参考下   装饰器对与 ...

  7. 【Angular专题】 (3)装饰器decorator,一块语法糖

    目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...

  8. python语法32[装饰器decorator](转)

    一 装饰器decorator decorator设计模式允许动态地对现有的对象或函数包装以至于修改现有的职责和行为,简单地讲用来动态地扩展现有的功能.其实也就是其他语言中的AOP的概念,将对象或函数的 ...

  9. 写python中的装饰器

    python中的装饰器主要用于在已有函数实现功能前附加需要输出的信息,下面将用实例展示我如何写装饰器. 首先分别尝试写装饰器装饰一个无参函数和一个有参函数(被装饰函数仅输出,无返回值情况下) def ...

随机推荐

  1. 微软宣布.NET Native预览版 C#可编译为本地机器码【转】

    英文原文:Announcing .NET Native Preview 微软在 MSDN 博客上宣布了 .NET Native 的开发者预览版..NET Native 可以将 C# 代码编译成本地机器 ...

  2. mysql的sql调优: slow_query_log_file

    mysql有一个功能就是可以log下来运行的比较慢的sql语句,默认是没有这个log的,为了开启这个功能,要修改my.cnf或者在mysql启动的时候加入一些参数.如果在my.cnf里面修改,需增加如 ...

  3. WebApi生成文档

    本文包括两个部分: webapi中使用swagger 修改webapi的路由和默认参数 WebApi中使用swagger 项目打开之后,选择 引用,右键,管理NuGet程序包 浏览,搜索swagger ...

  4. Python - 面向对象 - 第二十天

    Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...

  5. CSS 基础面试题

    1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽 ...

  6. 回忆C++

    内联函数 内联函数适用于函数较为短小的情况. 内联函数存在的意义是:提高程序运行效率. 内联函数的缺点:如果一个内联函数太长且频繁调用,会导致生成的可执行程序较大. 静态链接库会被嵌入到生成的可执行程 ...

  7. maven 学习---Maven构建自动化-Hudson

    建立自动化定义场景,依赖项目建设过程中被启动,一旦项目生成成功完成,以确保相关的项目是稳定的. 实例 考虑一个团队正在开发一个项目总线核心API上的其他两个项目的应用程序,网页UI和应用程序的桌面UI ...

  8. linux用户和权限 setuid

    uid_t getuid(void); uid_t geteuid(void); int setuid(uid_t uid); int seteuid(uid_t euid); int setegid ...

  9. ubuntu下编译android jni到so库的mk文件配置

    项目根目录下的Android.mk文件 LOCAL_PATH:= $(call my-dir)include $(CLEAR_VARS) LOCAL_MODULE_TAGS := optional L ...

  10. Spring框架完全掌握(上)

    引言 前面我写了一篇关于Spring的快速入门,旨在帮助大家能够快速地了解和使用Spring.既然是快速入门,讲解的肯定只是一些比较泛的知识,那么对于Spring的一些深入内容,我决定将其分为上.下两 ...