Vue移动端组件库之弹框组件

2019年9月16日 154次阅读 来源: 画船听雨眠

弹框是移动端上比较常用的一类组件了，用于提示消息、与用户交互等

效果展示

《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

基本的弹框组件结构已经完成，不过尚有一些不足之处，后续会更新在该文章中

  • 确认框还没有完全实现，缺少交互
  • 带有输入框的弹框
    原文作者：画船听雨眠
    原文地址: https://segmentfault.com/a/1190000020264951
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞