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

更新時間：2017年12月26日 10:32:48 作者：冰揚

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

基于flexible.js 的 Vue 組件

前言：

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

Toast -- 顯示框

效果展示

代碼分析

div包含icon小圖標和文字說明，構(gòu)成簡單的dom結(jié)構(gòu)，利用props定義變量值，用computed計算屬性對傳入的值進行解構(gòu)，watch監(jiān)聽彈框顯示，并結(jié)合.sync修飾符達到雙向數(shù)據(jù)綁定，同時用$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: { // 定時器
 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達到雙向數(shù)據(jù)綁定
  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	定時器(毫秒)，控制彈框顯示時間，負數(shù)代表不執(zhí)行定時任務	Number		1500
position	彈框位置（距頂）	String		'50%'

$emit

$emit	說明	參數(shù)
toastClose	彈框關閉回調(diào)

示例

// 默認效果，只有提示信息
 <toast
 message = '默認信息'
 :toastShow.sync = 'isShow1' // 需添加.sync修飾符，才能達到自動關閉的效果，否則只能監(jiān)聽toastClose手動關閉
 ></toast>  // 關于sync的說明，請看官網(wǎng)（主要是為了達到雙向數(shù)據(jù)綁定，子組件修改父組件狀態(tài)）
 
 // 增加自帶小圖標
 <toast
 message = 'success'
 iconClass = 'success'
 :toastShow.sync = 'isShow2'
 ></toast>
// 自定義類型
 <toast
 message = '自定義'
 position = '70%'
 :duration = '-1' //負數(shù)代表不執(zhí)行定時任務，自己根據(jù)需要去關閉
 :iconImage='bg' // 自定義icon小圖標，在data中需require引入，看下面
 :toastShow = 'isShow5' // 因為需要手動關閉，所以不需要.sync了
 @toastClose = 'isClose5' // 監(jiān)聽回調(diào)，手動關閉，看下面
 ></toast>
 
 data() {
 return {
 this.isShow5 : true,
 bg: require('../assets/logo.png'), // 圖片必須用require進來
 }
 },
 isClose5() {
 setTimeout(()=>{
 this.isShow5 = false;
 }, 2000)
 }

總結(jié)

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

您可能感興趣的文章: