基于flexible.js 的 Vue 組件
前言：
Toast -- 顯示框
效果展示
代碼分析
div包含icon小圖標和文字說明，構成簡單的dom結構，利用props定義變量值，用computed計算屬性對傳入的值進行解構，watch監聽彈框顯示，并結合.sync修飾符達到雙向數據綁定，同時用$emit向父組件派發事件，方便父組件監聽回調。
dom結構
<transition name="fade"> <div class="Toast" v-if="toastShow"> <div class="box" :style="positionTop" > <span :class="iconClass" :style="iconBg" 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 -- 顯示框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
