這篇文章主要介紹了怎么使用flexible的Vue組件Toast顯示框的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么使用flexible的Vue組件Toast顯示框文章都會有所收獲，下面我們一起來看看吧。

成都創新互聯公司是專業的尤溪網站建設公司，尤溪接單;提供成都做網站、網站制作、成都外貿網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行尤溪網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

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

props	說明	類型	可選值	默認值
toastShow	控制顯示框顯示、隱藏。需添加.sync修飾符才能自動關閉，詳見例子	Boolean	false   true	false
message	提示信息	String
iconClass	icon小圖標	String	success   warning   close
iconImage	自定義小圖標(圖片需require引入)
duration	定時器(毫秒)，控制彈框顯示時間，負數代表不執行定時任務	Number		1500
position	彈框位置（距頂）	String		'50%'

$emit

$emit	說明	參數
toastClose	彈框關閉回調

示例

// 默認效果，只有提示信息
 <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)
 }

關于“怎么使用flexible的Vue組件Toast顯示框”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么使用flexible的Vue組件Toast顯示框”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道。

文章標題：怎么使用flexible的Vue組件Toast顯示框
文章轉載：http://vcdvsql.cn/article28/gjehcp.html

成都網站建設公司_創新互聯，為您提供面包屑導航、營銷型網站建設、靜態網站、電子商務、、搜索引擎優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯