Explication détaillée du développement du plug-in Vue.js

Avant-propos

Alors que Vue.js devient de plus en plus populaire, les plug-ins liés à Vue.js sont constamment contribués, d'innombrables. Par exemple, les vues-router, vuex, etc. officiellement recommandés sont tous d'excellents plug-ins. Mais nous sommes encore plus nombreux à en être à l’étape de l’utilisation et à le développer rarement nous-mêmes. Nous découvrirons donc ensuite le développement et l'utilisation du plug-in via un simple plug-in vue-toast.

Découvrez les plug-ins

Si vous souhaitez développer un plug-in, vous devez d'abord savoir à quoi ressemble un plug-in.

Les plug-ins Vue.js doivent avoir une méthode d'installation publique. Le premier paramètre de cette méthode est le constructeur Vue, et le deuxième paramètre est un objet d'options facultatif :

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

Le plug-in vue-toast dont nous parlerons ensuite est implémenté en ajoutant une méthode d'instance. de. Regardons d'abord un petit exemple. Créez d'abord un nouveau fichier js pour écrire le plug-in : toast.js

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

Dans main.js, vous devez importer toast.js et utiliser le plug-in via la méthode globale Vue.use () :

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

Ensuite, on obtient l'attribut $msg défini par le plug-in dans le composant.

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

Comme vous pouvez le voir, la console a imprimé avec succès Hello World. Maintenant que $msg peut être obtenu, nous pouvons implémenter notre plug-in vue-toast.

Développer vue-toast

Exigences : dans le composant, appelez this.$toast('Network request failed') pour faire apparaître une invite, qui est affichée en bas par défaut. Vous pouvez l'afficher dans différentes positions en appelant des méthodes telles que this.$toast.top() ou this.$toast.center().

Pour trier mes pensées, lorsqu'une invite apparaît, je peux ajouter un p dans le corps pour afficher les informations de l'invite. Je peux localiser différentes positions en ajoutant différents noms de classe, puis je peux commencer à écrire.

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

Cela semble très simple. Nous avons implémenté this.$toast() puis affiché différentes positions.

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

Ici, transmettez le type à $toast et traitez différentes positions dans cette méthode. Comme mentionné ci-dessus, cela est réalisé en ajoutant différents noms de classe (toast-bottom, toast-top, toast-center). , alors la méthode $toast doit être légèrement modifiée.

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

Cela semble presque terminé. Mais si je veux l'afficher en haut par défaut, il semble un peu redondant de devoir appeler this.$toast.top() à chaque fois. Puis-je simplement mettre this.$toast() directement là où je le veux ? Et je ne veux pas qu’il disparaisse au bout de 2,5 secondes ? À ce stade, nous avons remarqué le paramètre options dans Toast.install(Vue,options). Nous pouvons transmettre les paramètres souhaités via les options dans Vue.use(). Le plug-in final modifié est le suivant :

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;

De cette façon, un simple plug-in vue est implémenté et peut être empaqueté et publié via npm. Vous pouvez utiliser npm install pour l'installer ensuite. heure

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!