你的位置：塔燈網(wǎng)絡(luò) > HTML5 > 使用 Vue.js 實(shí)現(xiàn) Tooltip 氣泡提示框、用戶通知彈出框插件

借助 Vue.js 我們?cè)賮韺?shí)現(xiàn)一款彈出框、冒泡提示插件。效果類似于?Notifications，安卓吐司的形式。

整個(gè)插件的運(yùn)行效果如下：

整個(gè)實(shí)現(xiàn)的過程很簡(jiǎn)單，主要代碼如下：

<div class="container"><div class="notification"><a v-on:click="show = !show" class="tooltip-bell"><i class="far fa-2x fa-bell"></i><span id="circle"></span></a><transition name="fadeStart" v-cloak><div v-if="show" class="tooltip"><div id="heading"><div class="heading-left"><h6 class="heading-title">Notifications</h6></div><div class="heading-right"><a class="notification-link" href="#">See all</a></div></div><ul class="notification-list"><li class="notification-item" v-for="user of users"><div class="img-left"><img class="user-photo" alt="User Photo" v-bind:src="user.picture.thumbnail" /></div><div class="user-content"><p class="user-info"><span class="name">{{user.name.first | capitalize}} {{user.name.last | capitalize}}</span> left a comment.</p><p class="time">1 hour ago</p></div></li></ul></div></transition></div></div>

看起來很簡(jiǎn)單，所以其他的細(xì)節(jié)上的代碼我就不貼了。喜歡的朋友掃描下方的二維碼關(guān)注我的微信公眾號(hào)，回復(fù)“vue彈出框”進(jìn)行下載！

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/21344.html