Vue移動端組件庫之彈框組件

彈框是移動端上比較經常使用的一類組件了，用於提示消息、與用戶交互等

效果展現

彈框種類

常見的彈框能夠分爲三種吧：

• 一種就是單純的提示框，用於傳遞消息，好比提示請求出錯等；
• 另外一種是確認框，在進行一些不可撤銷的操做時，提示用戶是否繼續，能夠避免誤操做；
• 最後一種就是帶有輸入框的提示框，功能就沒必要再說了吧

組件設計

考慮到彈框組件與通常的組件的調用方式不一致，因此沒有使用Vue.component的方式注入組件，而是使用將組件的調用設置成一個全局方法，指望調用的方式就是：

this.$Message({
  type: '',
  message: '消息',
  duration: 3000
})

這樣的方式就要考慮到組件的插件建立方式，經過使用Vue.extend建立一個組件構造器，調用的時候纔會建立一個具體的組件實例

核心代碼

組件模板

message.vue文件

<template>
<div class="eve-message">
  <overlay v-model="visible"></overlay>
  <transition name="eve-scale-in">
    <component
      :is="dialogType"
      :content="content"
      v-show="visible"
      @dialog-click="dialogClick"
    ></component>
  </transition>
</div>
</template>
<script>
import Overlay from '../overlay/overlay'
import maskMixin from '../../mixins/mask'
import Alert from './alert'
import Confirm from './confirm'
export default {
  mixins: [maskMixin],
  data () {
    return {
      content: '',
      dialogType: 'Alert'
    }
  },
  components: { Overlay, Alert, Confirm },
  methods: {
    dialogClick (type) {
      this.visible = false
    }
  }
}
</script>

在message的組件中，使用了一個component實現動態組件功能，這樣就能將不一樣的組件類型分離開來，並且拓展也比較方便

JavaScript

import Message from './message.vue'
import { type } from '../../common/helpers/utils.js' // 判斷類型
import { singleton } from '../../common/helpers/mode.js' // 建立單例

Message.install = function (Vue) {
  // 建立一個Message組件的構造器
  const MessageConstructor = Vue.extend(Message)
  // 使用單例模式，建立一個返回單一實例的方法
  const getInstance = singleton(MessageConstructor)
  Vue.prototype.$Message = function (options) {
    if (type(options) === 'string') {
      options = { message: options, type: 'alert' }
    }
    // 獲取同一個組件實例
    const instance = getInstance()
    // 組件實例未掛載
    if (!instance.$el) {
      instance.$mount(document.createElement('div'))
      document.body.appendChild(instance.$el)
    }
    instance.content = options.message
    instance.dialogType = options.type
    instance.visible = true
    if (options.duration) {
      setTimeout(() => {
        instance.visible = false
      }, options.duration)
    }
  }
}

export default Message

考慮到這種插件式的調用，組件實例掛載後不會清除，因此就使用單例模式，獲取同一個實例

在組件掛載以後就不會再建立一個一樣的組件實例，每次調用就會根據傳遞的參數動態都更新彈框的類型

感受須要注意的就是JavaScript文件內的內容，對於組件實例的建立與複用，單例模式如何使用，如何判斷組件已掛載

TODO

基本的彈框組件結構已經完成，不過尚有一些不足之處，後續會更新在該文章中

• 確認框尚未徹底實現，缺乏交互
• 帶有輸入框的彈框