基於手淘 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	falsetrue	false
    message	提示信息	String
    iconClass	icon小圖標	String	successwarningclose
    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 中陸續更新，敬請關注。