Vue.jsプラグイン開発の詳しい解説

前書き

Vue.js の人気が高まるにつれて、Vue.js 関連のプラグインが数え切れないほど常に提供されています。例えば、公式が推奨している vue-router や vuex などは、どれも非常に優れたプラグインです。しかし、私たちの多くはまだそれを使用している段階にあり、自分で開発することはほとんどありません。次に、単純な vue-toast プラグインを通じてプラグインの開発と使用について学びます。

プラグインについて知る

プラグインを開発したい場合は、まずプラグインがどのようなものかを知る必要があります。

Vue.js プラグインにはパブリック メソッドのインストールが必要です。このメソッドの最初のパラメーターは Vue コンストラクターで、2 番目のパラメーターはオプションのオプション オブジェクトです:

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 ファイルを作成します:トースト.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 メソッドを追加することで実現されます。少し変更する必要があります。

rreee

ほぼ完成したようです。しかし、デフォルトで一番上に表示したい場合、毎回 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 を通じてパッケージ化してリリースできます。次回は npm install を使用してインストールできます

。

以上がVue.jsプラグイン開発の詳しい解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。