1. Expand the eslintConfig configuration

{
    "eslintConfig": {..."parserOptions": {..."ecmaFeatures": {
        "legacyDecorators": true}}... }}Copy the code

2. Close Vetur prompt (project level)

{
    "vetur.validation.script": false,}Copy the code

3. Create a new decorator function: 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);
        // Save the decorated function
        const fn = descriptor.value
        // Overwrite functions to extend functionalitydescriptor.value = function (... reset) { const result = window.confirm(`${title}\n\n${message}`) if (result) {// Execute the original function
                fn.apply(this, reset)
            } else {
                // Execute the cancel function and bind this for later use
                cancel && cancel.apply(this, [])
            }
        }
    }
}
Copy the code

4. Use decorators to complete features

<script>
import { confirm } from "./decorators";
export default {
  name: "App",
  methods: {
    @confirm("Sure you want to delete it?"."Tip", function() {
        // Change this by using apply in the decorator function so that the defined cancel function can be used
        this.cancel();
    })
    // Simplify the double confirmation in the delete function
    deleteItem(id) {
      console.log("Deleted successfully", id);
    },
    cancel() {
      console.log("Cancelled."); ,}}}; </script>Copy the code