グローバルトーストコンポーネントをカプセル化するVueの完全な例

序文

最近Vueを体験しました。Toastはフロントエンドでよく使われるコンポーネントです。この記事ではVueがグローバルトーストコンポーネントをカプセル化するプロセスを詳しく紹介します。詳しい紹介を見ていきましょう。

1. vue-cliを使う

1. Toastコンポーネントを定義する

// コンポーネント/トースト

<テンプレート>
  <トランジション名="フェード">
    <div v-show="visible">{{メッセージ}}</div>
  </トランジション>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      表示: 偽、
      メッセージ： ''
    }
  }
}
</スクリプト>

<スタイルスコープ>
div {
  位置: 固定;
  上位: 30%
  左: 50%;
  パディング: 5px 20px;
  色: #fff;
  背景色: #424242;
  境界線の半径: 5px;
  テキスト配置: 中央;
  変換: translate(-50%, -50%);
}
/* Vue アニメーション遷移効果設定 */
.フェード-エンター-アクティブ、
.フェードアウトアクティブ{
  遷移: 不透明度 .5 秒;
}
.fade-enter、.fade-leave-to {
  不透明度: 0;
}
</スタイル>

2. main.jsで設定する

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'./components/Toast' から Toast をインポートします。

// プラグインオブジェクトを定義する const ToastObj = {
  インストール: 関数 (Vue) {
    // Vue の「サブクラス」コンポーネントを作成する const ToastConstructor = Vue.extend(Toast)
    // このサブクラスのインスタンスを作成し、要素にアタッチします const instance = new ToastConstructor()
    console.log(インスタンス)
    // このインスタンスを動的に作成された要素にマウントし、要素をグローバル構造インスタンスに追加します。$mount(document.createElement('div'))
    document.body.appendChild(インスタンス.$el)

    // コンポーネントを制御するために、Vue のプロトタイプ チェーンにメソッドを登録します。Vue.prototype.$toast = (msg,duration = 1500) => {
      インスタンス.メッセージ = メッセージ
      インスタンス.visible = true
      タイムアウトを設定する(() => {
        インスタンス.visible = false
      }、 間隔）
    }
  }
}
Vue.use(ToastObj)

Vue.config.productionTip = false

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')

3. 他のコンポーネントでの使用

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'HelloWorld',
  データ: () => {
    戻る {
      メッセージ: 'HelloWord'
    }
  },
  マウントされた（）{
  	//トースト コンポーネントを使用します。this.$toast('コンポーネントが正常にマウントされました')
  }
}
</スクリプト>

2. vue-cliなし

vue-cli の助けを借りれば、コンポーネントのインポートとエクスポートは簡単ですが、ビルドツールの助けがなければ、他の方法が必要になります。

1. トーストコンポーネントを登録する

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <script src="./static/vue/vue.min.js"></script>
</head>
<本文>
  <div id="アプリ">
    <私のボタン></私のボタン>
  </div>
  <div id="トースト"></div>
  <スクリプト>
    // トーストのグローバルコンポーネントを定義する const Toast = Vue.component('toast', {
      データ（） {
        戻る {
          isShow: false、
          メッセージ: 'グローバルプロンプト'、
          ラッパースタイル: {
            位置: '固定'、
            上: '20%'、
            左: '50%'、
            zインデックス: 10000,
            パディング: '6px 12px',
            背景色: '#424242',
            境界線の半径: '5px',
            変換: 'translate(-50%, -50%)'
          },
          テキストスタイル: {
            色: '#fff',
            フォントサイズ: '14px'
          }
        }
      },
      テンプレート: `<div v-show="isShow" :style="wrapperStyle">
                  <span :style="textStyle">{{ メッセージ }}</span>
                </div>`
    })

2. トーストプラグインを登録する

// プラグインオブジェクトを定義する const ToastObj = {
  インストール: 関数 (Vue) {
    // トーストコンポーネントインスタンスを作成し、要素にアタッチします。const instance = new Toast()
    //このインスタンスをDOMインスタンスにマウントします。$mount('#toast')

    // コンポーネントを制御するために、Vue のプロトタイプ チェーンにメソッドを登録します。Vue.prototype.$toast = ({message,duration = 2000} = {}) => {
      インスタンス.メッセージ = メッセージ
      インスタンス.isShow = true

      タイムアウトを設定する(() => {
        インスタンス.isShow = false
      }、 間隔）
    }
  }
}
//トーストプラグインを登録する Vue.use(ToastObj)

3. 他のコンポーネントでの使用

    Vue.component('my-button', {
      データ（） {
        戻る {
          ラッパースタイル: {
            幅: '70px'、
            パディング: '20px',
            背景色: '緑'
          },
          テキストスタイル: {
            色: '#fff',
            フォントサイズ: '16px'
          }
        }
      },
      メソッド: {
        ハンドルクリック() {
          this.$トースト({
            メッセージ: 「クリックしました」
          })
        }
      },
      テンプレート: `<div :style="wrapperStyle" @click="handleClick">
                  <span :style="textStyle">プロンプトをクリック</span>
                </div>`
    })

    定数vm = 新しいVue({
      el: '#app'
    })
  </スクリプト>
</本文>
</html>

要約する

これで、グローバルトーストコンポーネントの Vue カプセル化に関するこの記事は終了です。グローバルトーストコンポーネントの Vue カプセル化に関するより関連性の高い記事については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: