如何使用flexible的Vue組件Toast顯示框-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關(guān)如何使用flexible的Vue組件Toast顯示框，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注于貢嘎網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供貢嘎營銷型網(wǎng)站建設(shè)，貢嘎網(wǎng)站制作、貢嘎網(wǎng)頁設(shè)計、貢嘎網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造貢嘎網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供貢嘎網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

Toast -- 顯示框

效果展示

 

代碼分析

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

dom結(jié)構(gòu)

<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數(shù)據(jù)

props: {
 message: { // 提示內(nèi)容
 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() {
 // 監(jiān)聽toast顯示，向父組件派發(fā)事件
 if (this.toastShow) {
 if (this.duration < 0) {
 this.$emit('toastClose');
 } else {
 setTimeout(()=>{
  this.$emit('update:toastShow', false) // 利用了.sync達到雙向數(shù)據(jù)綁定
  this.$emit('toastClose');
 }, this.duration)
 }
 }
 }
}

使用說明

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

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

props

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

$emit

$emit	說明	參數(shù)
toastClose	彈框關(guān)閉回調(diào)

示例

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

關(guān)于“如何使用flexible的Vue組件Toast顯示框”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：如何使用flexible的Vue組件Toast顯示框-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://muchs.cn/article2/dchsic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

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