Simple steps to write custom instructions in Vue3.0

Preface

Vue provides a wealth of built-in directives, such as v-if, v-bind, v-on... In addition, we can also define directives through Vue.directive({}) or directives:{}

Before we start learning, we should understand the application scenarios of custom instructions. The development of any function is to solve specific problems.

Through custom instructions, we can perform more low-level operations on the DOM, which not only provides us with ideas for quick problem solving in some scenarios, but also gives us a further understanding of the underlying Vue.

first step

In main.js

The folder corresponding to the resume under src

import Directives from "@/Directives/index"; // Custom directive (@ represents src)
const app = createApp(App);
app.use(Directives);
app.mount("#app");

Step 2

import copy from "./copy"; // Import the required instructions const directivesList = {
  copy // mount};

const directives = {
  install: function (app) {
    Object.keys(directivesList).forEach((key) => {
      app.directive(key, directivesList[key]); // register });
  }
};

export default directives; // throws

Step 3

Write our directive content in copy.js Vue2 and Vue3 only modify some life cycle functions

import { ElMessage } from "element-plus";
const copy = {
  mounted (el, { value }) {
    el.$value = value;
    el.handler = () => {
      if (!el.$value) {
        // When the value is empty, give a prompt ElMessage.warning({
          message: "Hello, the copied value cannot be empty.",
          type: "warning"
        });
        return;
      }
      if (window.clipboardData) {
        window.clipboardData.setData("text", el.$value);
      } else {
        (function (content) {
          document.oncopy = function (e) {
            e.clipboardData.setData("text", content);
            e.preventDefault();
            document.oncopy = null;
          };
        })(el.$value);
        document.execCommand("Copy");
      }

      ElMessage.success("Copy successful");
    };
    // Bind click event el.addEventListener("click", el.handler);
  },
  beforeUpdate (el, {
    value
  }) {
    el.$value = value;
  },
  unmounted (el) {
    el.removeEventListener("click", el.handler);
  }
};

export default copy;

Summarize

This is the end of this article about writing custom instructions for Vue3.0. For more relevant Vue3.0 custom instructions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: