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

創新互聯專注于貢嘎網站建設服務及定制，我們擁有豐富的企業做網站經驗。 熱誠為您提供貢嘎營銷型網站建設，貢嘎網站制作、貢嘎網頁設計、貢嘎網站官網定制、成都微信小程序服務，打造貢嘎網絡公司原創品牌,更為您提供貢嘎網站排名全網營銷落地服務。

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顯示框”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

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

網頁名稱：如何使用flexible的Vue組件Toast顯示框-創新互聯
文章轉載：http://vcdvsql.cn/article2/dchsic.html

成都網站建設公司_創新互聯，為您提供靜態網站、自適應網站、移動網站建設、電子商務、網站建設、面包屑導航

廣告

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