vueはカスタムjsファイルをロードするメソッド

以下のエディターは、Vue でカスタム js ファイルをロードする方法を共有します。これは、非常に参考になるので、皆さんのお役に立てれば幸いです。エディターをフォローして見てみましょう

プロジェクト中にポップアップ ボックスをカスタマイズする必要があります。私も自分で書いたばかりです。

レンダリング

発生した問題

カスタムjsファイルの読み込み方法

vue-pluginこれは必見です。それから私は自分でそれを書きました。

export default{
 install(Vue){
  var tpl;
  // 弹出框
  Vue.prototype.showAlter = (title,msg) =>{
   var alterTpl = Vue.extend({  // 1、创建构造器，定义好提示信息的模板
     template: &#39;<p id="bg">&#39;
       + &#39;<p class="jfalter">&#39;
       + &#39;<p class="jfalter-title" id="title">&#39;+ title +&#39;</p>&#39;
       + &#39;<p class="jfalter-msg" id="message">&#39;+ msg +&#39;</p>&#39;
       + &#39;<p class="jfalter-btn" id="sureBtn" v-on:click="hideAlter">确定</p>&#39;
       + &#39;</p></p>&#39;
   });
   tpl = new alterTpl().$mount().$el; // 2、创建实例，挂载到文档以后的地方
   document.body.appendChild(tpl); 
  }
  Vue.mixin({
   methods: {
   hideAlter: function () {
    document.body.removeChild(tpl);
   }
   }
  })
 }
}

Use

import jFAltre from '../../assets/jfAletr.js';
import Vue from 'vue';
Vue.use(jFAltre);

this.showAlter('提示','服务器请求失败');

以上は、皆さんの参考になれば幸いです。

関連記事:

Angularが操作イベントコマンドng-clickを使用して複数のパラメータを渡す例

Angularが大文字/小文字フィルターを使用して大文字小文字変換関数を実装する例

applyとMath in js .max() 関数の問題点と違いの紹介

以上がvueはカスタムjsファイルをロードするメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。