Vue 3.0 사용자 정의 명령 을 작성 하 는 간단 한 절차 기록

머리말
vue 에 서 는 v-if,v-bind,v-on 등 다양한 내장 명령 을 제공 합 니 다.이 외 에 도 Vue.directive({})또는 directives:{}을 통 해 명령 을 정의 할 수 있 습 니 다.
학습 을 시작 하기 전에 우 리 는 사용자 정의 명령 의 응용 장면 을 이해 해 야 한다.모든 기능 의 개발 은 구체 적 인 문 제 를 해결 하기 위 한 것 이다.
사용자 정의 명령 을 통 해 우 리 는 DOM 에 대해 더 많은 바 텀 작업 을 할 수 있 습 니 다.그러면 특정한 장면 에서 우리 에 게 문 제 를 신속하게 해결 하 는 방향 을 제공 할 수 있 을 뿐만 아니 라 vue 의 바 텀 에 대해 더 많은 이 해 를 할 수 있 습 니 다.
첫걸음
main.js 에서
src 에서 이력서 에 대응 하 는 폴 더

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

두 번 째 단계

import copy from "./copy"; //        

const directivesList = {
  copy //   
};

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

export default directives;//   

세 번 째 단계
copy.js 에 우리 의 명령 내용 을 기록 합 니 다.Vue 2 와 Vue 3 는 생명주기 함수 수정 일 뿐 입 니 다.

import { ElMessage } from "element-plus";
const copy = {
  mounted (el, { value }) {
    el.$value = value;
    el.handler = () => {
      if (!el.$value) {
        //       ，    
        ElMessage.warning({
          message: "  ，        。",
          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("    ");
    };
    //       
    el.addEventListener("click", el.handler);
  },
  beforeUpdate (el, {
    value
  }) {
    el.$value = value;
  },
  unmounted (el) {
    el.removeEventListener("click", el.handler);
  }
};

export default copy;

총결산
여기에 Vue 3.0 사용자 정의 명령 을 쓰 는 글 이 소개 되 었 습 니 다.더 많은 Vue 3.0 사용자 정의 명령 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!