在Vue中初次使用装饰器(Decorator)

前端小鑫同学

发布于 2022-12-25 11:01:29

1.7K00

代码可运行

文章被收录于专栏：小鑫同学编程历险记小鑫同学编程历险记

运行总次数：0

代码可运行

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 &amp;&amp; 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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-05-24，如有侵权请联系 cloudcommunity@tencent.com 删除

eslint