Vue でカスタムグローバルコンポーネントを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

Vue でカスタムグローバルコンポーネントを作成するにはどうすればよいですか?

亚连

リリース： 2018-06-08 18:06:18

オリジナル

2468 人が閲覧しました

この記事では主に vue のカスタムグローバルコンポーネント (カスタムプラグイン) の使用方法を紹介し、参考にさせていただきます。

開発をしていると、自分でプラグインを書いて、自分で作ったプラグインを使いたいと思うことがあります。そうすることで強い達成感を得ることができます。ブロガーが最近 element-ui と axios を研究したところ、これらがカスタムコンポーネントであることがわかりました。しかし、唯一の違いは、element-ui を使用する場合は Vue.use() ステートメントを使用するのに対し、 axios を使用する場合は Vue.use() を使用しないことです。）、インポートするだけでインポートできるのはとても魔法のように感じます。よく調べてみると、axios にはインストールメソッドが記述されていないのに対し、element-ui にはこのインストールメソッドが記述されているためです。独自のプラグイン。

まず、このプラグインを作成する前に、プラグインを格納するディレクトリを生成します。ブロガーとして、私はコンポーネントの読み込みディレクトリにそれを置きます:

このディレクトリには、ブロガーの習慣に従って、index.js ファイルと、index に書かれたコンポーネントのloading.vueを書きます。 jsloading.vueのインストール方法についてです。コードは次のとおりです:

import LoadingComponent from &#39;./Loading.vue&#39;

const Loading={
  install:function (Vue) {
    Vue.component(&#39;Loading&#39;,LoadingComponent)
  }
}
export default Loading

ログイン後にコピー

install メソッドは main.js で表されます。Vue.use() メソッドが使用されている場合、このメソッドはデフォルトで install メソッドを呼び出します。コンポーネントはインストールメソッドにも登録されます。ここでの「Loading」は外部の App.vue で使用されるコンポーネント名を指し、LoadingComponent は上で引用した Loading.vue を指します。次に、エクスポートのデフォルトの読み込みを介してエクスポートします。

その後、Loading.vue コードは次のようになります:

<template>
  <p class="loading-box">
    Loading...
  </p>
</template>
<script></script>

ログイン後にコピー

Loading.vue コードが記述された後、それはデフォルトの main.js ファイルにインポートされ、記述されたばかりの Index.js は Vue.use を使用してインポートされます。 () メソッド:

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import Loading from &#39;./components/loading&#39;
Vue.use(Loading)
new Vue({
 el: &#39;#app&#39;,
 render: h => h(App)
})

ログイン後にコピー

次に、App.vue メソッドでテンプレートを使用するだけです:

<template>
 <p id="app">
  <Loading></Loading>
 </p>
</template>

ログイン後にコピー

また、カレンダープラグイン、ボタンの作成など、loading.vue ファイルに独自のコードをいくつか記述することもできます。プラグインなどたとえば、これ:

<template>
  <p class="loader">
    <p class="loader-inner ball-spin-fade-loader">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </p>
  </p>
</template>
<style scoped>
  .loader{
    width:80px;
    height: 80px;
    margin:50px auto;
  }
  @keyframes ball-spin-fade-loader {
    50% {
      opacity: 0.3;
      -webkit-transform: scale(0.4);
      transform: scale(0.4); }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); } }

  .ball-spin-fade-loader {
    position: relative; }
  .ball-spin-fade-loader > p:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
    animation: ball-spin-fade-loader 1s 0s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
    animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
    animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
    animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
    animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
    animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
    animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
    animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
  .ball-spin-fade-loader > p {
    background-color: #399;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute; }
</style>

ログイン後にコピー

効果はローリングサークルです: