Detaillierte Erläuterung der Verwendung der globalen Eingabeaufforderungsbox-Komponente von vue

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung der globalen Vue-Eingabeaufforderungsbox-Komponente geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung der globalen Vue-Eingabeaufforderungsbox-Komponente? . Das Folgende ist ein praktischer Fall.

Dieser Artikel stellt Ihnen eine globale Eingabeaufforderungsbox-Komponente von Vue vor. Der spezifische Code lautet wie folgt:

<template>
   <!-- 全局提示框 -->
   <p v-show="visible" class="dialog-tips dialog-center">
     <p>{{message}}</p>
   </p>
</template>
<script>
export default {
 data() {
  return {
   visible: false,
   message: ""
  };
 }
};
</script>
<style lang="scss">
.dialog-tips{
  position: fixed;
  z-index: 100;
  min-width: 220px;
  padding: 40px 22px;
  white-space: nowrap;
  background-color: #fff;
  box-shadow: 0px 8px 15px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  .dialog-tips-icon{
    width: 54px;
    height: 54px;
    @extend %bg-contain;
    display: inline-block;
    margin-bottom: 13px;
  }
}
.dialog-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
</style>

toast.js

import ToastComponent from './toast.vue'
const Toast = {};
// 注册Toast
Toast.install = function (Vue) {
  // 生成一个Vue的子类
  // 同时这个子类也就是组件
  const ToastConstructor = Vue.extend(ToastComponent)
  // 生成一个该子类的实例
  const instance = new ToastConstructor();
  // 将这个实例挂载在我创建的p上
  // 并将此p加入全局挂载点内部
  instance.$mount(document.createElement('p'))
  document.body.appendChild(instance.$el)
  // 通过Vue的原型注册一个方法
  // 让所有实例共享这个方法 
  Vue.prototype.$toast = (msg, duration = 1500) => {
    instance.message = msg;
    instance.visible = true;
    setTimeout(() => {
      instance.visible = false;
    }, duration);
  }
}
export default Toast

Wie benutzt man?

 In main.js

 import Vue from 'vue'
  import Toast from './toast' 
  Vue.use(Toast);

In der Komponente

this.$toast("XXXXXXXXX");

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln zu php Chinesisch Webseite!

Empfohlene Lektüre:

vue ermittelt den Eingabeinhalt Gibt es Leerzeichen?

Wie gehe ich mit der Kompatibilität des Easyui-Datums- und Zeitfelds im IE um?

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der globalen Eingabeaufforderungsbox-Komponente von vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!