如何使用flexible的Vue組件Toast顯示框

 
 

 
 
{{message}}
 
 

props數(shù)據(jù)

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

computed

computed: {
 // 用于判斷顯示框位置
 positionTop() {
 return {
 top: this.position
 }
 },
 // 自定義父組件傳過(guò)來(lái)的背景圖片
 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)聽(tīng)toast顯示，向父組件派發(fā)事件
 if (this.toastShow) {
 if (this.duration < 0) {
 this.$emit('toastClose');
 } else {
 setTimeout(()=>{
  this.$emit('update:toastShow', false) // 利用了.sync達(dá)到雙向數(shù)據(jù)綁定
  this.$emit('toastClose');
 }, this.duration)
 }
 }
 }
}

使用說(shuō)明

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

下載并放入自己項(xiàng)目中 —— import 引入組件 —— components中注冊(cè)組件 —— 使用

props

$emit

示例

// 默認(rèn)效果，只有提示信息
   // 關(guān)于sync的說(shuō)明，請(qǐng)看官網(wǎng)（主要是為了達(dá)到雙向數(shù)據(jù)綁定，子組件修改父組件狀態(tài)）
 
 // 增加自帶小圖標(biāo)
 
// 自定義類(lèi)型
 
 
 data() {
 return {
 this.isShow5 : true,
 bg: require('../assets/logo.png'), // 圖片必須用require進(jìn)來(lái)
 }
 },
 isClose5() {
 setTimeout(()=>{
 this.isShow5 = false;
 }, 2000)
 }

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