基于 flexible 的 Vue 組件：Toast -- 顯示框效果

更新時(shí)間：2017年12月26日 10:32:48 作者：冰揚(yáng)

這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下

基于flexible.js 的 Vue 組件

前言：

目前手頭的移動(dòng)端Vue項(xiàng)目是用手淘的 lib-flexible 作適配的，并用px2rem 來自動(dòng)轉(zhuǎn)換成rem。關(guān)于lib-flexible和px2rem的配置，請移步 vue-cli 配置 flexible 。
由于使用rem作適配，導(dǎo)致現(xiàn)有的很多移動(dòng)端UI框架不能與之很好的配合，往往需要大動(dòng)干戈更改UI框架的樣式，背離了使用UI框架達(dá)到快速開發(fā)的初衷。
為了以后項(xiàng)目的組件復(fù)用，以及提高開發(fā)可復(fù)用組件的能力，特把平時(shí)項(xiàng)目中常用的、簡單的組件單獨(dú)拎出來。
此為小白之作，論代碼質(zhì)量、難易程度、復(fù)用度，遠(yuǎn)不及各位大佬之杰作，求輕噴。同時(shí)，也懇請各位，提出意見和建議，不勝感激！
GitHub地址：vue-flexible-components

Toast -- 顯示框

效果展示

代碼分析

div包含icon小圖標(biāo)和文字說明，構(gòu)成簡單的dom結(jié)構(gòu)，利用props定義變量值，用computed計(jì)算屬性對(duì)傳入的值進(jìn)行解構(gòu)，watch監(jiān)聽彈框顯示，并結(jié)合.sync修飾符達(dá)到雙向數(shù)據(jù)綁定，同時(shí)用$emit向父組件派發(fā)事件，方便父組件監(jiān)聽回調(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
 }
 },
 // 自定義父組件傳過來的背景圖片
 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達(dá)到雙向數(shù)據(jù)綁定
  this.$emit('toastClose');
 }, this.duration)
 }
 }
 }
}

使用說明

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

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

props

props	說明	類型	可選值	默認(rèn)值
toastShow	控制顯示框顯示、隱藏。需添加.sync修飾符才能自動(dòng)關(guā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	說明	參數(shù)
toastClose	彈框關(guān)閉回調(diào)

示例

// 默認(rèn)效果，只有提示信息
 <toast
 message = '默認(rèn)信息'
 :toastShow.sync = 'isShow1' // 需添加.sync修飾符，才能達(dá)到自動(dòng)關(guān)閉的效果，否則只能監(jiān)聽toastClose手動(dòng)關(guān)閉
 ></toast>  // 關(guān)于sync的說明，請看官網(wǎng)（主要是為了達(dá)到雙向數(shù)據(jù)綁定，子組件修改父組件狀態(tài)）
 
 // 增加自帶小圖標(biāo)
 <toast
 message = 'success'
 iconClass = 'success'
 :toastShow.sync = 'isShow2'
 ></toast>
// 自定義類型
 <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)聽回調(diào)，手動(dòng)關(guān)閉，看下面
 ></toast>
 
 data() {
 return {
 this.isShow5 : true,
 bg: require('../assets/logo.png'), // 圖片必須用require進(jìn)來
 }
 },
 isClose5() {
 setTimeout(()=>{
 this.isShow5 = false;
 }, 2000)
 }

總結(jié)

以上所述是小編給大家介紹的基于 flexible 的 Vue 組件：Toast -- 顯示框，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: