Vue.js 플러그인 개발에 대한 자세한 설명

머리말

Vue.js가 점점 인기를 끌면서 Vue.js 관련 플러그인이 셀 수 없을 정도로 꾸준히 기여되고 있습니다. 예를 들어 공식적으로 권장되는 vue-router, vuex 등은 모두 매우 뛰어난 플러그인입니다. 그러나 우리 중 더 많은 사람들이 아직 그것을 사용하는 단계에 있으며 스스로 개발하는 경우는 거의 없습니다. 그럼 다음에는 간단한 vue-toast 플러그인을 통해 플러그인 개발 및 사용법에 대해 알아보도록 하겠습니다.

플러그인 알아보기

플러그인을 개발하려면 먼저 플러그인이 어떻게 생겼는지 알아야 합니다.

Vue.js 플러그인에는 공개 방법으로 설치해야 합니다. 이 메소드의 첫 번째 매개변수는 Vue 생성자이고, 두 번째 매개변수는 선택적 옵션 객체입니다:

MyPlugin.install = function (Vue, options) {
  Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如: vue-custom-element
    // 逻辑...
  }
  Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  Vue.mixin({
    created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
      // 逻辑...
    }
    ...
  })
  Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
    // 逻辑...
  }
}

다음에 설명할 vue-toast 플러그인은 인스턴스 메소드를 추가하여 구현합니다. 먼저 작은 예를 살펴보겠습니다. 먼저 새 js 파일을 만들어 플러그인을 작성하세요. toast.js

// toast.js
var Toast = {};
Toast.install = function (Vue, options) {
    Vue.prototype.$msg = 'Hello World';
}
module.exports = Toast;

main.js에서 toast.js를 가져와서 전역 메서드 Vue.use()를 통해 플러그인을 사용해야 합니다. :

// main.js
import Vue from 'vue';
import Toast from './toast.js';
Vue.use(Toast);

그런 다음 구성 요소의 플러그인에서 정의한 $msg 속성을 가져옵니다.

// App.vue
export default {
    mounted(){
        console.log(this.$msg);         // Hello World
    }
}

보시다시피 콘솔은 성공적으로 Hello World를 인쇄했습니다. 이제 $msg를 얻을 수 있으므로 vue-toast 플러그인을 구현할 수 있습니다.

vue-toast 개발

요구 사항: 구성 요소에서 this.$toast('Network request failed')를 호출하면 기본적으로 하단에 표시되는 프롬프트가 표시됩니다. this.$toast.top(), this.$toast.center() 등의 메소드를 호출하여 다양한 위치에 표시할 수 있습니다.

생각을 정리하려면 프롬프트가 나타날 때 본문에 p를 추가하여 프롬프트 정보를 표시할 수 있으며, 다른 클래스 이름을 추가하여 다른 위치를 찾은 다음 글쓰기를 시작할 수 있습니다.

// toast.js
var Toast = {};
Toast.install = function (Vue, options) {
    Vue.prototype.$toast = (tips) => {
        let toastTpl = Vue.extend({     // 1、创建构造器，定义好提示信息的模板
            template: &#39;<p class="vue-toast">&#39; + tips + &#39;</p>&#39;
        });
        let tpl = new toastTpl().$mount().$el;  // 2、创建实例，挂载到文档以后的地方
        document.body.appendChild(tpl);     // 3、把创建的实例添加到body中
        setTimeout(function () {        // 4、延迟2.5秒后移除该提示
            document.body.removeChild(tpl);
        }, 2500)
    }
}
module.exports = Toast;

매우 간단해 보입니다. this.$toast()를 구현한 후 다른 위치를 표시했습니다.

<p style="margin-bottom: 7px;">// toast.js<br/>[&#39;bottom&#39;, &#39;center&#39;, &#39;top&#39;].forEach(type => {<br/>    Vue.prototype.$toast[type] = (tips) => {<br/>        return Vue.prototype.$toast(tips,type)<br/>    }<br/>})<br/></p>

여기서는 $toast에 유형을 전달하고 이 메서드의 여러 위치에서 처리를 수행합니다. 위에서 언급한 것처럼 이는 다양한 클래스 이름(toast-bottom, toast-top, toast-center)을 추가하여 수행됩니다. , $toast 메소드를 약간 수정해야 합니다.

아아아아

거의 다 된 것 같아요. 그런데 기본적으로 상단에 표시하고 싶다면 매번 this.$toast.top()을 호출해야 한다는 것이 좀 중복되는 것 같습니다. 그냥 원하는 위치에 this.$toast()를 직접 넣어도 될까요? 그리고 2.5초 후에 사라지는 걸 원하지 않나요? 이때 Toast.install(Vue,options)에 options 매개변수가 있음을 확인했습니다. Vue.use()의 options를 통해 원하는 매개변수를 전달할 수 있습니다. 최종 수정된 플러그인은 다음과 같습니다.

Vue.prototype.$toast = (tips,type) => {     // 添加 type 参数
    let toastTpl = Vue.extend({             // 模板添加位置类
        template: &#39;<p class="vue-toast toast-&#39;+ type +&#39;">&#39; + tips + &#39;</p>&#39;
    });
    ...
}

이렇게 하면 간단한 vue 플러그인이 구현되며, npm install을 통해 패키징하여 출시할 수 있습니다.

위 내용은 Vue.js 플러그인 개발에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!