基于 flexible 的 Vue 組件:Toast -- 顯示框效果
基于flexible.js 的 Vue 組件
前言:
- 目前手頭的移動(dòng)端Vue項(xiàng)目是用手淘的 lib-flexible 作適配的,并用px2rem 來(lái)自動(dòng)轉(zhuǎn)換成rem。關(guān)于lib-flexible和px2rem的配置,請(qǐng)移步 vue-cli 配置 flexible 。
- 由于使用rem作適配,導(dǎo)致現(xiàn)有的很多移動(dòng)端UI框架不能與之很好的配合,往往需要大動(dòng)干戈更改UI框架的樣式,背離了使用UI框架達(dá)到快速開(kāi)發(fā)的初衷。
- 為了以后項(xiàng)目的組件復(fù)用,以及提高開(kāi)發(fā)可復(fù)用組件的能力,特把平時(shí)項(xiàng)目中 常用的、簡(jiǎn)單的 組件單獨(dú)拎出來(lái)。
- 此為小白之作,論代碼質(zhì)量、難易程度、復(fù)用度,遠(yuǎn)不及各位大佬之杰作,求輕噴。同時(shí),也懇請(qǐng)各位,提出意見(jiàn)和建議,不勝感激!
- GitHub地址:vue-flexible-components
Toast -- 顯示框
效果展示
代碼分析
div包含icon小圖標(biāo)和文字說(shuō)明,構(gòu)成簡(jiǎn)單的dom結(jié)構(gòu),利用props定義變量值,用computed計(jì)算屬性對(duì)傳入的值進(jìn)行解構(gòu),watch監(jiān)聽(tīng)彈框顯示,并結(jié)合.sync修飾符達(dá)到雙向數(shù)據(jù)綁定,同時(shí)用$emit向父組件派發(fā)事件,方便父組件監(jiān)聽(tīng)回調(diào)。
dom結(jié)構(gòu)
<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數(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
| props | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| toastShow | 控制顯示框顯示、隱藏。需添加.sync修飾符才能自動(dòng)關(guān)閉,詳見(jiàn)例子 | Boolean | false true |
false |
| message | 提示信息 | String | ||
| iconClass | icon小圖標(biāo) | String | success warning close |
|
| iconImage | 自定義小圖標(biāo)(圖片需require引入) | |||
| duration | 定時(shí)器(毫秒),控制彈框顯示時(shí)間,負(fù)數(shù)代表不執(zhí)行定時(shí)任務(wù) | Number | 1500 | |
| position | 彈框位置(距頂) | String | '50%' |
$emit
| $emit | 說(shuō)明 | 參數(shù) |
|---|---|---|
| toastClose | 彈框關(guān)閉回調(diào) |
示例
// 默認(rèn)效果,只有提示信息
<toast
message = '默認(rèn)信息'
:toastShow.sync = 'isShow1' // 需添加.sync修飾符,才能達(dá)到自動(dòng)關(guān)閉的效果,否則只能監(jiān)聽(tīng)toastClose手動(dòng)關(guān)閉
></toast> // 關(guān)于sync的說(shuō)明,請(qǐng)看官網(wǎng)(主要是為了達(dá)到雙向數(shù)據(jù)綁定,子組件修改父組件狀態(tài))
// 增加自帶小圖標(biāo)
<toast
message = 'success'
iconClass = 'success'
:toastShow.sync = 'isShow2'
></toast>
// 自定義類(lèi)型
<toast
message = '自定義'
position = '70%'
:duration = '-1' //負(fù)數(shù)代表不執(zhí)行定時(shí)任務(wù),自己根據(jù)需要去關(guān)閉
:iconImage='bg' // 自定義icon小圖標(biāo),在data中需require引入,看下面
:toastShow = 'isShow5' // 因?yàn)樾枰謩?dòng)關(guān)閉,所以不需要.sync了
@toastClose = 'isClose5' // 監(jiān)聽(tīng)回調(diào),手動(dòng)關(guān)閉,看下面
></toast>
data() {
return {
this.isShow5 : true,
bg: require('../assets/logo.png'), // 圖片必須用require進(jìn)來(lái)
}
},
isClose5() {
setTimeout(()=>{
this.isShow5 = false;
}, 2000)
}
總結(jié)
以上所述是小編給大家介紹的基于 flexible 的 Vue 組件:Toast -- 顯示框,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Vue移動(dòng)端用淘寶彈性布局lib-flexible插件做適配的方法
- flexible.js實(shí)現(xiàn)移動(dòng)端rem適配方案
- vue-cli配置flexible過(guò)程詳解
- 詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)
- 基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動(dòng)端自適應(yīng)
- H5移動(dòng)端適配 Flexible方案
- js中flexible.js實(shí)現(xiàn)淘寶彈性布局方案
- 同步文件備份工具 Super Flexible File Synchronizer Pro v4
- Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解
相關(guān)文章
詳解Vue如何進(jìn)行表單聯(lián)動(dòng)與級(jí)聯(lián)選擇
表單聯(lián)動(dòng)和級(jí)聯(lián)選擇是Vue.js中常見(jiàn)的功能,在下面的文章中,我們將討論如何在Vue.js中實(shí)現(xiàn)表單聯(lián)動(dòng)和級(jí)聯(lián)選擇,感興趣的小伙伴可以了解一下2023-06-06
Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue項(xiàng)目中數(shù)據(jù)的深度監(jiān)聽(tīng)或?qū)ο髮傩缘谋O(jiān)聽(tīng)實(shí)例
這篇文章主要介紹了Vue項(xiàng)目中數(shù)據(jù)的深度監(jiān)聽(tīng)或?qū)ο髮傩缘谋O(jiān)聽(tīng)實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue3?setup中父組件通過(guò)Ref調(diào)用子組件的方法(實(shí)例代碼)
這篇文章主要介紹了vue3?setup中父組件通過(guò)Ref調(diào)用子組件的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06

