怎樣使用vue的toast彈跳窗組件
這次帶給大家怎樣使用vue的toast彈窗組件，使用vue的toast彈窗組件的注意事項有哪些，下面就是實戰案例，一起來看一下。
首先,我們來分析一下彈窗組件的特性(需求):
0. 輕量--一個元件小於1Kib (實際打包完不到0.8k)
1.一般都是多處使用--需要解決每個頁面重複引用註冊
#1.一般都是跟js交互的--無需在 裡面寫 < toast :show="true" text="彈出窗口訊息"></toast>
今天,我們就抱著上面2個需求點,來實現一個基於vue的toast彈視窗元件,下圖是最終完成的效果圖.
#一. 先寫一個普通的vue元件
##檔案位置/src/toast/toast.vue
<template>
<p class="wrap">我是弹窗</p>
</template>
<style scoped>
.wrap{
position: fixed;
left: 50%;
top:50%;
background: rgba(0,0,0,.35);
padding: 10px;
border-radius: 5px;
transform: translate(-50%,-50%);
color:#fff;
}
</style>#二. 在我們需要使用的頁面中引入元件,方便看效果和錯誤
<template>
<p id="app">
<toast></toast>
</p>
</template>
<script>
import toast from './toast/toast'
export default {
components: {toast},
}
</script>三.實作動態載入元件
可以看到,已經顯示出一個靜態的彈出層了,接下來我們就來看看如何實現動態彈出.我們先在/src/toast/ 目錄下面,新建一個index.js , 然後在index.js裡面,敲入以下程式碼(由於程式碼耦合比較嚴重,所以就不拆開一行一行講解了,改成行內註解)
檔案位置/src/toast/index.js
import vue from 'vue'
// 这里就是我们刚刚创建的那个静态组件
import toastComponent from './toast.vue'
// 返回一个 扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)
// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
function showToast(text, duration = 2000) {
// 实例化一个 toast.vue
const toastDom = new ToastConstructor({
el: document.createElement('p'),
data() {
return {
text:text,
show:true
}
}
})
// 把 实例化的 toast.vue 添加到 body 里
document.body.appendChild(toastDom.$el)
// 过了 duration 时间后隐藏
setTimeout(() => {toastDom.show = false} ,duration)
}
// 注册为全局组件的函数
function registryToast() {
// 将组件注册到 vue 的 原型链里去,
// 这样就可以在所有 vue 的实例里面使用 this.$toast()
vue.prototype.$toast = showToast
}export default registryToast
四.試用
到這裡,我們已經初步完成了一個可以全域註冊和動態載入的toast元件,接下來我們來試試看看在vue的入口檔案
(腳手架產生的話是./src/main.js ) 註冊一下元件檔案位置/src/main.js
import toastRegistry from './toast/index'
// 这里也可以直接执行 toastRegistry()
Vue.use(toastRegistry)
我们稍微修改一下使用方式,把 第二步 的引用静态组件的代码,改成如下
<template>
<p id="app">
<input type="button" value="显示弹窗" @click="showToast">
</p>
</template>
<script>
export default {
methods: {
showToast () {
this.$toast('我是弹出消息')
}
}
}
</script>五. 優化
#現在我們已經初步實現了一個彈窗.不過離成功還差一點點,缺少一個動畫,現在的彈出和隱藏都很生硬.我們再對toast/index.js 裡的showToast 函數稍微做一下修改(有註解的地方是有改動的)
- #檔案位置/src/toast/index.js
-
function showToast(text, duration = 2000) { const toastDom = new ToastConstructor({ el: document.createElement('p'), data() { return { text:text, showWrap:true, // 是否显示组件 showContent:true // 作用:在隐藏组件之前,显示隐藏动画 } } }) document.body.appendChild(toastDom.$el) // 提前 250ms 执行淡出动画(因为我们再css里面设置的隐藏动画持续是250ms) setTimeout(() => {toastDom.showContent = false} ,duration - 1250) // 过了 duration 时间后隐藏整个组件 setTimeout(() => {toastDom.showWrap = false} ,duration) }登入後複製然後,再修改一下toast.vue的樣式
檔案位置/src/toast/toast.vue -
<template> <p class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</p> </template> <style scoped> .wrap{ position: fixed; left: 50%; top:50%; background: rgba(0,0,0,.35); padding: 10px; border-radius: 5px; transform: translate(-50%,-50%); color:#fff; } .fadein { animation: animate_in 0.25s; } .fadeout { animation: animate_out 0.25s; opacity: 0; } @keyframes animate_in { 0% { opacity: 0; } 100%{ opacity: 1; } } @keyframes animate_out { 0% { opacity: 1; } 100%{ opacity: 0; } } </style>登入後複製大功告成,一個toast元件初步完成
- #總結
- vue. extend 函式可以產生一個元件建構器可以用這個函式建構出一個vue元件實例
- 可以用document.body.appendChild() 動態的把元件加到body裡面去
顯示動畫比較簡單,隱藏動畫必須在隱藏之前預留足夠的動畫執行時間
以上是怎樣使用vue的toast彈跳窗組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用磁力鏈接
Feb 18, 2024 am 10:02 AM
磁力連結是一種用於下載資源的連結方式，相較於傳統的下載方式更為便利和有效率。使用磁力連結可以透過點對點的方式下載資源，而不需要依賴中介伺服器。本文將介紹磁力連結的使用方法及注意事項。一、什麼是磁力連結磁力連結是一種基於P2P（Peer-to-Peer）協定的下載方式。透過磁力鏈接，使用者可以直接連接到資源的發布者，從而完成資源的共享和下載。與傳統的下載方式相比，磁
如何使用mdf和mds文件
Feb 19, 2024 pm 05:36 PM
mdf檔案和mds檔案怎麼用隨著電腦科技的不斷進步，我們可以透過多種方式來儲存和共享資料。在數位媒體領域，我們經常會遇到一些特殊的文件格式。在這篇文章中，我們將討論一種常見的文件格式—mdf和mds文件，並介紹它們的使用方法。首先，我們需要了解mdf檔案和mds檔案的含義。 mdf是CD/DVD鏡像檔的副檔名，而mds檔則是mdf檔的元資料檔。
crystaldiskmark是什麼軟體？ -crystaldiskmark如何使用？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具，可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark，以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具，用於評估機械硬碟和固態硬碟（SSD）的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序，並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面，並被廣泛用於硬體評
foobar2000怎麼下載？ -foobar2000怎麼使用
Mar 18, 2024 am 10:58 AM
foobar2000是一款能隨時收聽音樂資源的軟體，各種音樂無損音質帶給你，增強版本的音樂播放器，讓你得到更全更舒適的音樂體驗，它的設計理念是將電腦端的高級音頻播放器移植到手機上，提供更便捷高效的音樂播放體驗，介面設計簡潔明了易於使用它採用了極簡的設計風格，沒有過多的裝飾和繁瑣的操作能夠快速上手，同時還支持多種皮膚和主題，根據自己的喜好進行個性化設置，打造專屬的音樂播放器支援多種音訊格式的播放，它還支援音訊增益功能根據自己的聽力情況調整音量大小，避免過大的音量對聽力造成損害。接下來就讓小編為大
如何安裝Win10舊版元件DirectPlay
Dec 28, 2023 pm 03:43 PM
不少用戶在玩win10的的一些遊戲的時候總是會遇到一些問題，比如說卡屏和花屏等等情況，這個時候我們是可以採用打開directplay這個功能來解決的，而且功能的操作方法也很簡單。 win10舊版元件directplay怎麼安裝1、在搜尋框裡面輸入「控制台」然後開啟2、檢視方式選擇大圖示3、找到「程式與功能」4、點選左側的啟用或關閉win功能5、選擇舊版這裡的勾選上就可以了
pip鏡像來源簡易指南：輕鬆掌握使用方法
Jan 16, 2024 am 10:18 AM
輕鬆上手：如何使用pip鏡像來源隨著Python在全球的普及，pip成為了Python套件管理的標準工具。然而，許多開發者在使用pip安裝套件時面臨的常見問題是速度慢。這是因為預設情況下，pip從Python官方來源或其他外部來源下載包，而這些來源可能位於海外伺服器，導致下載速度緩慢。為了提高下載速度，我們可以使用pip鏡像來源。什麼是pip鏡像來源？簡單來說，就
百度網盤app怎麼用
Mar 27, 2024 pm 06:46 PM
在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一，憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗，贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料，還是在線上觀看影片、聽取音樂，百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解，那麼這篇教學就將為大家詳細介紹百度網盤app如何使用，還有疑惑的用戶們就快來跟著本文詳細了解一下吧！百度雲網盤怎麼用：一、安裝首先，下載並安裝百度雲軟體時，請選擇自訂安裝選
網易信箱大師怎麼用
Mar 27, 2024 pm 05:32 PM
網易郵箱，作為中國網友廣泛使用的一種電子郵箱，一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師，則是專為手機使用者打造的信箱軟體，它大大簡化了郵件的收發流程，讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用，具體又有哪些功能呢，下文中本站小編將為大家帶來詳細的內容介紹，希望能幫助到大家！首先，您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”，然後按照提示進行安裝即可。下載安裝完成後，我們打開網易郵箱帳號並進行登錄，登入介面如下圖所示
