Heim > Artikel > Web-Frontend > Wie verwende ich die globale Eingabeaufforderungsbox-Komponente in Vue?
In diesem Artikel wird hauptsächlich der Beispielcode der globalen Eingabeaufforderungsbox-Komponente von Vue vorgestellt.
Dieser Artikel stellt Ihnen eine globale Eingabeaufforderungsbox-Komponente von Vue vor.
<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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Über die Methode, die Router-Ansicht in vue2.0 nicht anzuzeigen (ausführliches Tutorial)
Das obige ist der detaillierte Inhalt vonWie verwende ich die globale Eingabeaufforderungsbox-Komponente in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!