基於手淘 flexible 的 Vue 組件：Toast -- 顯示框

vue-flexible-components

基於手淘 flexible.js 的 Vue 組件

前言：

• 目前手頭的移動端Vue項目是用手淘的 lib-flexible 做適配的，並用 px2rem 來自動轉換成rem。關於lib-flexible和px2rem的配置，請移步 vue-cli 配置 flexible。
• 因爲使用rem做適配，致使現有的不少移動端UI框架不能與之很好的配合，每每須要大動干戈更改UI框架的樣式，背離了使用UI框架達到快速開發的初衷。
• 爲了之後項目的組件複用，以及提升開發可複用組件的能力，特把平時項目中經常使用的、簡單的 組件單獨拎出來。
• 此爲小白之做，論代碼質量、難易程度、複用度，遠不及各位大佬之傑做，求輕噴。同時，也懇請各位，提出意見和建議，不勝感激！
• GitHub地址：vue-flexible-components

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)
        }
    複製代碼

   

• 結束語

第一次封裝Vue組件，戰戰兢兢,雖然說是很簡單的組件，到我手中也是問題不斷。可是，我卻很享受這個過程，由於我始終堅信，能力就是在不斷探索中提升的，沒有挫折，哪能進步！

同時,也懇請各位大佬，對上述問題，提出意見和建議，祝我一臂之力，不勝感激！

其它組件也將會在GitHub vue-flexible-components 中陸續更新，敬請關注。