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 中陸續更新，敬請關注。