Vue組件Toast顯示框怎么用

本篇內容介紹了“Vue組件Toast顯示框怎么用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

效果展示

代碼分析

div包含icon小圖標和文字說明，構成簡單的dom結構，利用props定義變量值，用computed計算屬性對傳入的值進行解構，watch監聽彈框顯示，并結合.sync修飾符達到雙向數據綁定，同時用$emit向父組件派發事件，方便父組件監聽回調。

dom結構

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

props數據

props: {
 message: { // 提示內容
 type: String,
 },
 toastShow: { // 是否顯示
 type: Boolean,
 default: false
 },
 iconClass: { // 背景圖片
 type: String,
 },
 iconImage: { // 自定義背景圖片
 },
 duration: { // 定時器
 type: Number,
 default: 1500
 },
 position: { // 彈出框位置
 type: String,
 default: '50%'
 }
},

computed

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;
 }
 }
},

watch

watch: {
 toastShow() {
 // 監聽toast顯示，向父組件派發事件
 if (this.toastShow) {
 if (this.duration < 0) {
 this.$emit('toastClose');
 } else {
 setTimeout(()=>{
  this.$emit('update:toastShow', false) // 利用了.sync達到雙向數據綁定
  this.$emit('toastClose');
 }, this.duration)
 }
 }
 }
}

使用說明

組件地址： src/components/Toast.vue （不能npm，只能手動下載使用）

下載并放入自己項目中 —— import 引入組件 —— components中注冊組件 —— 使用

props

$emit

示例

// 默認效果，只有提示信息
 <toast
 message = '默認信息'
 :toastShow.sync = 'isShow1' // 需添加.sync修飾符，才能達到自動關閉的效果，否則只能監聽toastClose手動關閉
 ></toast>  // 關于sync的說明，請看官網（主要是為了達到雙向數據綁定，子組件修改父組件狀態）
 
 // 增加自帶小圖標
 <toast
 message = 'success'
 iconClass = 'success'
 :toastShow.sync = 'isShow2'
 ></toast>
// 自定義類型
 <toast
 message = '自定義'
 position = '70%'
 :duration = '-1' //負數代表不執行定時任務，自己根據需要去關閉
 :iconImage='bg' // 自定義icon小圖標，在data中需require引入，看下面
 :toastShow = 'isShow5' // 因為需要手動關閉，所以不需要.sync了
 @toastClose = 'isClose5' // 監聽回調，手動關閉，看下面
 ></toast>
 
 data() {
 return {
 this.isShow5 : true,
 bg: require('../assets/logo.png'), // 圖片必須用require進來
 }
 },
 isClose5() {
 setTimeout(()=>{
 this.isShow5 = false;
 }, 2000)
 }

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

“Vue組件Toast顯示框怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！