Detaillierte Erläuterung der Plug-In-Entwicklung von Vue.js

Vorwort

Da Vue.js immer beliebter wird, werden ständig unzählige Vue.js-bezogene Plug-ins beigesteuert. Beispielsweise sind der offiziell empfohlene Vue-Router, Vuex usw. allesamt sehr hervorragende Plug-Ins. Aber immer mehr von uns nutzen es noch und entwickeln es nur selten selbst. Als nächstes lernen wir die Entwicklung und Verwendung des Plug-Ins anhand eines einfachen Vue-Toast-Plug-Ins kennen.

Plug-Ins kennenlernen

Wenn Sie ein Plug-In entwickeln möchten, müssen Sie zunächst wissen, wie ein Plug-In aussieht.

Vue.js-Plugins sollten über eine öffentliche Installationsmethode verfügen. Der erste Parameter dieser Methode ist der Vue-Konstruktor und der zweite Parameter ist ein optionales Optionsobjekt:

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 上实现
    // 逻辑...
  }
}

Das als nächstes besprochene Vue-Toast-Plug-In wird durch Hinzufügen einer Instanzmethode implementiert. von. Schauen wir uns zunächst ein kleines Beispiel an. Erstellen Sie zunächst eine neue js-Datei, um das Plug-in zu schreiben: toast.js

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

In main.js müssen Sie toast.js importieren und das Plug-in über die globale Methode Vue.use verwenden ():

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

Dann erhalten wir das $msg-Attribut, das vom Plug-in in der Komponente definiert wird.

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

Wie Sie sehen können, hat die Konsole Hello World erfolgreich gedruckt. Nachdem $msg nun abgerufen werden kann, können wir unser Vue-Toast-Plug-In implementieren.

Vue-Toast entwickeln

Anforderungen: Rufen Sie in der Komponente this.$toast('Network request failed') auf, um eine Eingabeaufforderung anzuzeigen, die standardmäßig unten angezeigt wird. Sie können es an verschiedenen Positionen anzeigen, indem Sie Methoden wie this.$toast.top() oder this.$toast.center() aufrufen.

Um meine Gedanken zu ordnen, kann ich, wenn eine Eingabeaufforderung erscheint, ein p in den Textkörper einfügen, um die Eingabeaufforderungsinformationen anzuzeigen. Ich kann verschiedene Positionen finden, indem ich verschiedene Klassennamen hinzufüge, und dann kann ich mit dem Schreiben beginnen.

// 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;

Es scheint sehr einfach zu sein, wir haben this.$toast() implementiert und zeigen dann verschiedene Positionen an.

<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>

Übergeben Sie hier den Typ an $toast und verarbeiten Sie verschiedene Positionen in dieser Methode. Wie oben erwähnt, wird dies durch das Hinzufügen verschiedener Klassennamen (toast-bottom, toast-top, toast-center) erreicht. , dann muss die Methode $toast leicht geändert werden.

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;
    });
    ...
}

Es scheint fast fertig zu sein. Aber wenn ich es standardmäßig oben anzeigen möchte, erscheint es etwas überflüssig, dass ich this.$toast.top() jedes Mal aufrufen muss. Kann ich this.$toast() einfach direkt dort platzieren, wo ich es haben möchte? Und ich möchte nicht, dass es nach 2,5 Sekunden verschwindet? Zu diesem Zeitpunkt ist uns der Optionsparameter in Toast.install(Vue,options) aufgefallen. Wir können die gewünschten Parameter über Optionen in Vue.use() übergeben. Das endgültige geänderte Plug-In lautet wie folgt:

var Toast = {};
Toast.install = function (Vue, options) {
    let opt = {
        defaultType:'bottom',   // 默认显示位置
        duration:'2500'         // 持续时间
    }
    for(let property in options){
        opt[property] = options[property];  // 使用 options 的配置
    }
    Vue.prototype.$toast = (tips,type) => {
        if(type){
            opt.defaultType = type;         // 如果有传type，位置则设为该type
        }
        if(document.getElementsByClassName('vue-toast').length){
            // 如果toast还在，则不再执行
            return;
        }
        let toastTpl = Vue.extend({
            template: &#39;<p class="vue-toast toast-&#39;+opt.defaultType+&#39;">&#39; + tips + &#39;</p>&#39;
        });
        let tpl = new toastTpl().$mount().$el;
        document.body.appendChild(tpl);
        setTimeout(function () {
            document.body.removeChild(tpl);
        }, opt.duration)
    }
    [&#39;bottom&#39;, &#39;center&#39;, &#39;top&#39;].forEach(type => {
        Vue.prototype.$toast[type] = (tips) => {
            return Vue.prototype.$toast(tips,type)
        }
    })
}
module.exports = Toast;

Auf diese Weise wird ein einfaches Vue-Plug-In implementiert und kann über npm gepackt und veröffentlicht werden. Sie können es als nächstes mit npm install installieren Zeit

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Plug-In-Entwicklung von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!