VUEカスタム組立工程（2の1）

定義は、プラグインが書き込みに使用されるページVue.user（）の後、グローバルの成分elementuiと同様でした。

Vue.use（プラグイン）

パラメータ：
- {Object | Function} plugin
使用法：

Vue.jsは、プラグインのインストール。プラグがオブジェクトである場合、それが提供しなければならない install 方法。プラグが関数であれば、それは、インストール方法のようになります。インストールメソッドが呼び出されると、パラメータとしてVUEます。

このメソッドは、呼び出しする必要が new Vue() 前に呼び出されます。

インストール方法は、プラグイン、プラグインは一度だけインストールされると、複数回呼び出された場合。
参考：プラグイン

JSファイル内のオブジェクトを定義VUEアセンブリテンプレート書かれた（1）、（2）とは、main.jsにVueの内のオブジェクト上）（{Vue.component（成分テンプレート）}、（3）をインストールする方法がなければなりません.USE（物体）

ステップ：2つのファイルindex.jsとtoast.vueを建てたトーストのフォルダ構成でファイルフォルダを作成します

次のようにtoast.vueコードがあります

  1 <テンプレート>
   2    <DIV クラス = " errToast " V- なら = " ショー" >
   3      <DIV クラス = " マスク" >
   4        <DIV クラス = " contentBox " >
   5          <H3：スタイル= " {色：GETCOLOR（ ）} " > {{タイトル}} </ H3>
   6          <P：スタイル= " {色：GETCOLOR（）} " > {{テキスト}} </ P>
  7          <フッタV-IF = " hasConfirmBtn " >
   8            <ボタンクラス = " BTN "をクリックします@ = " NOSHOW " >決定</ボタン>
   9          </フッタ>
 10        </ div>
 11      </ DIV>
 12である    </ DIV>
 13である </テンプレート>
 14  
15 <SCRIPT>
 16エクスポートデフォルト{
 17。   小道具：{
 18は、     タイプ：{
 19        // 型の種類に応じて、色変更することができる
20       バリ：関数（値）{
 21          リターン [ " ERR "、" デフォルト"、" 成功"、" 警告"！] .indexOf（値）== - 1 。
22        }
 23      }
 24      ショー：ブール、
 25      タイトル：文字列、
 26      テキスト：文字列、
 27      hasConfirmBtn：ブール
 28    }、
 29個の   データ（）{
 30      リターン{
 31        色データ：{
 32         ERR：" ＃FF0000 " 、
 33は          警告：" ＃FF9900 " 、
 34          デフォルト：" 白" 、
 35          成功：" ＃33FF00 " 
36        }
 37      }。
38    }、
 39    の方法：{
 40      GETCOLOR（）{
 41        はconsole.log（この.TYPE）。
42        リターン この .colorData [ この.TYPE]。
43      }、
 44     NOSHOW（）{
 45        この EMIT（$。" dispairを" ）。
46      }
 47    }
 48  }。
49 </スクリプト>
 50  
51 <スタイルのlang =スコープ" 少ない" >
 52  .errToast {
 53    の高さ：100％と;
54    幅：100％。
55    位置：固定。
56は    左：0 。
57    トップ：0 ;
58   右：0 ;
59    底：0 。
60    .mask {
 61      の高さ：100％。
62      幅：100％。
63      位置：絶対。
64は      左：0 ;
65      トップ：0 ;
66      背景色：RGBA（0、0、0、0.3 ）。
67      Zインデックス：99 ;
68      .contentBox {
 69       位置：絶対;
70        高さ：30％。
71        幅：30％。
72        上部：50％。
73は        左：50重量％。
74        変換：移動X（ - 50％）、移動Y（ - 50％）。
75        背景：#CCC;
76        ディスプレイ：フレックス。
77        フレックス方向：カラム。
78        H3 {
 79          フレックス：1 。
80         表示：フレックス。
81件の          ALIGN- アイテム：センター;
82は          正当化コンテンツを：省スペースの周りを、
83        }
 84        P {
 85          フレックス：1 。
86          テキストベース整列：センター;
87        }
 88        フッタ{
 89          位置：絶対。
90          下：10pxの;
91          高さ：30px;
92          幅：100％。
93  
94          .btn {
 95            位置：絶対。
96            右：30px;
97            パディング：10pxの20ピクセル;
98            背景：#FFF！重要;
99            色：＃000 。
100            BORDER- 半径：5pxの。
101            レター間隔：3px。
102            カーソル：デフォルト。
103            ＆：ホバー{
 104              背景：＃4dd52b！重要;
105              色：#FFF。
106            }
 107          }
 108        }
 109      }
110    }
 111  }
 112 </スタイル>

次のようにindex.jsコードは次のとおりです。

1インポートToastCom から ' ./Toast.vue ' 
2  
3。 CONSTトースト= {
 4      インストール：機能（ヴュ）{
 5。          Vue.component（' トースト' 、ToastCom）アセンブリ//グローバルレジスタ
 6。     }
 7。 }
 8。エクスポートデフォルトトースト

マスターファイルに導入さMain.js

。1インポートトーストから「./components/Toast 」// カスタムメッセージボックス

2 Vue.use（トースト）

アプリケーション：

 <トースト
      V-IF = "showErr"
      ：タイプ=「タイプ」
      ：ショー= "showErr"
      ：タイトル=「タイトル」
      ：テキスト=「テキスト」
      ：hasConformBtn = "hasConfirmBtn"
      @ dispair = "dispairToast"
    > </トースト>

VUEカスタム組立工程（2の1）

Vue.use（プラグイン）

おすすめ