Maison > interface Web > js tutoriel > Explication détaillée du développement du plug-in Vue.js

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

怪我咯
Libérer: 2017-04-05 13:43:52
original
1491 Les gens l'ont consulté

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 上实现
    // 逻辑...
  }
}
Copier après la connexion

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;
Copier après la connexion

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);
Copier après la connexion

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
    }
}
Copier après la connexion

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;
Copier après la connexion

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>
Copier après la connexion

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;
    });
    ...
}
Copier après la connexion

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:&#39;bottom&#39;,   // 默认显示位置
        duration:&#39;2500&#39;         // 持续时间
    }
    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(&#39;vue-toast&#39;).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;
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal