ホームページ > 記事 > ウェブフロントエンド > 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 プラグインを実装できます。
要件: コンポーネント内で 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: '<p class="vue-toast">' + tips + '</p>' }); 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/>['bottom', 'center', 'top'].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: '<p class="vue-toast toast-'+ type +'">' + tips + '</p>' }); ... }
このようにして、単純な vue プラグインが実装され、npm を通じてパッケージ化してリリースできます。次回は npm install を使用してインストールできます
。以上がVue.jsプラグイン開発の詳しい解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。