So implementieren Sie den Display-Box-Effekt in der Vue-Komponente Toast

In diesem Artikel wird hauptsächlich die auf flexible.js basierende Vue-Komponente vorgestellt: Toast - Display-Box-Effekt. Freunde, die ihn benötigen, können sich auf

auf flexible.js basierende Vue-Komponente

Vorwort:

• Das vorliegende mobile Vue-Projekt wurde von lib-flexible von Taobao angepasst und mit px2rem automatisch in rem konvertiert. Für die Konfiguration von lib-flexible und px2rem gehen Sie bitte zu vue-cli, um flexibel zu konfigurieren.

• Aufgrund der Verwendung von REM zur Anpassung können viele vorhandene mobile UI-Frameworks nicht gut mit ihnen zusammenarbeiten. Oft ist es erforderlich, große Anstrengungen zu unternehmen, um den Stil des UI-Frameworks zu ändern. Dies weicht von der Verwendung von UI-Frameworks ab, um die ursprüngliche Absicht einer schnellen Entwicklung zu erreichen.

• Um Komponenten in zukünftigen Projekten wiederzuverwenden und die Fähigkeit zur Entwicklung wiederverwendbarer Komponenten zu verbessern, haben wir die häufig verwendeten und einfachen Komponenten in täglichen Projekten isoliert.

• Dies ist die Arbeit eines Anfängers. In Bezug auf Codequalität, Schwierigkeitsgrad und Wiederverwendbarkeit ist es den Meisterwerken aller Meister weit unterlegen. Gleichzeitig lade ich Sie auch herzlich ein, Kommentare und Vorschläge abzugeben, worüber wir uns sehr freuen!

• GitHub-Adresse: vue-flexible-components

Toast – Anzeigefeld

Effektanzeige

Codeanalyse

p enthält kleine Symbole und Textbeschreibungen, Bilden einer einfachen DOM-Struktur, Verwenden von Requisiten zum Definieren von Variablenwerten, Verwenden berechneter Eigenschaften zum Dekonstruieren der eingehenden Werte, Überwachen der Popup-Anzeige und Kombinieren mit dem Modifikator .sync, um eine bidirektionale Datenbindung zu erreichen, und Verwenden von $ Senden Sie Ereignisse an die übergeordnete Komponente, sodass übergeordnete Komponenten auf Rückrufe warten können.

Dom-Struktur

<transition name="fade">
 <p class="Toast" v-if="toastShow">
 <p
 class="box"
 :style="positionTop"
 >
 <span
 :class="iconClass"
 :style="iconBg"
 v-if="iconIsShow"
 ></span>
 <p
 v-if="message"
 >{{message}}</p>
 </p>
 </p>
</transition>

Requisitendaten

props: {
 message: { // 提示内容
 type: String,
 },
 toastShow: { // 是否显示
 type: Boolean,
 default: false
 },
 iconClass: { // 背景图片
 type: String,
 },
 iconImage: { // 自定义背景图片
 },
 duration: { // 定时器
 type: Number,
 default: 1500
 },
 position: { // 弹出框位置
 type: String,
 default: '50%'
 }
},

berechnet

computed: {
 // 用于判断显示框位置
 positionTop() {
 return {
 top: this.position
 }
 },
 // 自定义父组件传过来的背景图片
 iconBg() {
 if (this.iconImage) {
 return {
 backgroundImage: `url(${this.iconImage})`
 }
 } else {
 return;
 }
 },
 // 用于判断icon是否显示
 iconIsShow() {
 if (this.iconClass == 'success') {
 return true;
 } else if (this.iconClass == 'close') {
 return true;
 } else if (this.iconClass == 'warning') {
 return true;
 } else if (this.iconImage) {
 return true;
 } else {
 return false;
 }
 }
},

ansehen

watch: {
 toastShow() {
 // 监听toast显示，向父组件派发事件
 if (this.toastShow) {
 if (this.duration < 0) {
 this.$emit(&#39;toastClose&#39;);
 } else {
 setTimeout(()=>{
  this.$emit(&#39;update:toastShow&#39;, false) // 利用了.sync达到双向数据绑定
  this.$emit(&#39;toastClose&#39;);
 }, this.duration)
 }
 }
 }
}

Gebrauchsanweisung

Komponentenadresse: src/components/Toast.vue (kann nicht npm sein, kann nur manuell heruntergeladen und verwendet werden )

Laden Sie es herunter und fügen Sie es in Ihr eigenes Projekt ein – importieren Sie die Komponente – registrieren Sie die Komponente in Komponenten – verwenden Sie

Requisiten

Requisiten	Beschreibung	Typ	Optionaler Wert	Standardwert
toastShow	Steuern Sie das Anzeigefeld zum Ein- und Ausblenden. Zum automatischen Schließen muss der Modifikator .sync hinzugefügt werden, siehe Beispiel	Boolean	false wahr	falsch
Nachricht	Eingabeaufforderung	String
iconClass	icon small icon	String	success Warnung schließen
iconImage	Benutzerdefiniertes kleines Symbol (Bild muss per Anforderung importiert werden)
Dauer	Timer (Millisekunden), steuert die Popup-Anzeigezeit, eine negative Zahl bedeutet, dass die geplante Aufgabe nicht ausgeführt wird	Nummer		1500
Position	Bombenposition (von oben)	String		'50%'

$emit

$emit	说明	参数
toastClose	弹框关闭回调

示例

// 默认效果，只有提示信息
 <toast
 message = &#39;默认信息&#39;
 :toastShow.sync = &#39;isShow1&#39; // 需添加.sync修饰符，才能达到自动关闭的效果，否则只能监听toastClose手动关闭
 ></toast>  // 关于sync的说明，请看官网（主要是为了达到双向数据绑定，子组件修改父组件状态）
 
 // 增加自带小图标
 <toast
 message = &#39;success&#39;
 iconClass = &#39;success&#39;
 :toastShow.sync = &#39;isShow2&#39;
 ></toast>
// 自定义类型
 <toast
 message = &#39;自定义&#39;
 position = &#39;70%&#39;
 :duration = &#39;-1&#39; //负数代表不执行定时任务，自己根据需要去关闭
 :iconImage=&#39;bg&#39; // 自定义icon小图标，在data中需require引入，看下面
 :toastShow = &#39;isShow5&#39; // 因为需要手动关闭，所以不需要.sync了
 @toastClose = &#39;isClose5&#39; // 监听回调，手动关闭，看下面
 ></toast>
 
 data() {
 return {
 this.isShow5 : true,
 bg: require(&#39;../assets/logo.png&#39;), // 图片必须用require进来
 }
 },
 isClose5() {
 setTimeout(()=>{
 this.isShow5 = false;
 }, 2000)
 }

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何解决Router跨模块跳转问题

详细解读react后端渲染模板

在React中有关高阶组件详细介绍

在Javascript中如何实现网页抢红包

在JS中如何实现网页自动秒杀点击（详细教程）

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Display-Box-Effekt in der Vue-Komponente Toast. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!