在Vue框架中制作弹出窗

因为公司项目需要,在页面表格中很多地方的数字需要制作弹出窗口,由于弹出层非常多,弹出层中还需要展示弹出层,并且希望弹出层互相不影响.虽然有不少弹出层开源框架,但是都不支持动态创建弹出层(不在template模板中写),并且能够通过插槽的方式插入其他组件.主要原因是vue中想要使用组件,必须在components中有定义过或者组件是全局组件,这就导致了不好开发类似jquery形式的创建弹出层中传入插槽组件.
考虑到弹出层过多,如果在模板里定义弹出层过于繁琐,针对自己项目写了个弹出层组件.

首先是弹出层样式(这个基本差不多,按照各自项目的样式来写

<template>
  <transition enter-active-class="dialog-showIn" leave-active-class="dialog-showOut" @after-enter="afterEnter" @after-leave="afterLeave">

    <div v-show="visible" ref="popup" class="popup popup-bground animated" :style="popupStyle()">
      <div ref="title" class="title" :style="{cursor:cursor}">
        <div class="name" :style="titleStyle">{{ title || '标题' }}</div>
        <div @click.stop="close()" class="close">
          <i class="iconfont icon-guanbi2"></i>
        </div>
      </div>
      <div ref="main" class="main" :class="mainClassName">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>
<script>
import initDrag from '@/assets/js/drag'
export default {
  name: 'GridDialog',
  props: {
    show: Boolean,
    mainClassName: {
      type: String,
      default: ''
    },
    title: {
      default: '',
      type: String
    },
    titleStyle: {
      default: ''
    },
    top: {
      default: '',
      type: String
    },
    left: {
      default: '',
      type: String
    },
    right: {
      default: '',
      type: String
    },
    bottom: {
      default: '',
      type: String
    },
    width: {
      type: String,
      default: '4rem'
    },
    height: {
      type: String,
      default: '3rem'
    },
    fullPage: {
      type: Boolean,
      default: false
    },
    fullWindow: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: Number,
      default: 101
    }
  },
  data() {
    return {
      y: '',
      x: '',
      r: '',
      b: '',
      visible: false
    }
  },
  computed: {
    cursor() {
      return this.fullPage || this.fullWindow ? 'default' : 'move'
    },
    popupWidth() {
      return this.fullWindow ? '90%' : this.width
    },
    popupHeight() {
      return this.fullWindow ? '90%' : this.height
    }
  },
  created() {
    // console.log('right:' + this.right)
    if (this.fullPage) {
      this.y = '0px'
      this.x = '0px'
    } else if (this.fullWindow) {
      this.x = '5%'
      this.y = '5%'
    } else {
      this.y = this.top
      this.x = this.left
      this.r = this.right
      this.b = this.bottom
    }
    this.visible = this.show
  },
  mounted() {
    if (this.b) {
      this.$refs.popup.style.bottom = this.b
    } else if (this.y) {
      this.$refs.popup.style.top = this.y
    } else {
      let height = $(window).height()
      this.$refs.popup.style.top =
        (height - $(this.$refs.popup).height()) / 2 + 'px'
    }

    if (this.r) {
      this.$refs.popup.style.right = this.r
    } else if (this.x) {
      this.$refs.popup.style.left = this.x
    } else {
      let width = $(window).width()
      this.$refs.popup.style.left =
        (width - $(this.$refs.popup).width()) / 2 + 'px'
    }

    this.$nextTick(() => {
      if (!this.fullPage && !this.fullWindow) {
        initDrag(this.$refs.title, this.$refs.popup, data => {
          // this.y = data.y + 'px';
          // this.x = data.x + 'px';
        })
      }
    })
  },
  methods: {
    close() {
      this.$emit('close', false)
    },
    afterLeave() {
      this.$emit('closed')
    },
    afterEnter() {
      this.$emit('opened')
    },
    popupStyle() {
      if (this.fullPage) {
        return {
          width: '100vw',
          height: '100vh',
          'z-index': this.zIndex
        }
      } else {
        return {
          width: this.popupWidth,
          height: this.popupHeight,
          'z-index': this.zIndex
        }
      }
    }
  },
  watch: {
    show(val) {
      this.visible = val
    }
  }
}
</script>

上面的弹出层就是普通的弹出层,可以在其他的template模板中引用显示,下面是为jquery形式js代码弹出所写:

import GridDialog from './GridDialog.vue'
import components from './components'
const props = GridDialog.props

export default {
  components: components, // 这段是单独一个js引入所有需要加载插槽的组件,如果没有定义,外部弹出会报错
  props: {
    ...props,
    slotName: {
      type: String,
      default: null
    },
    slotProps: {
      type: Object,
      default: null
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      isOpened: false
    }
  },
  render(h) {
    var child = null
    if (this.slotName != null) {
      child = h(this.slotName, {
        props: { ...this.slotProps, isVisible: this.isOpened }
      })
    }

    return (
      <GridDialog
        title={this.title}
        show={this.visible}
        mainClassName={this.mainClassName}
        titleStyle={this.titleStyle}
        top={this.top}
        left={this.left}
        right={this.right}
        bottom={this.bottom}
        width={this.width}
        height={this.height}
        fullWindow={this.fullWindow}
        fullPage={this.fullPage}
        zIndex={this.zIndex}
        on-close={() => this.close()}
        on-closed={() => this.closed()}
        on-opened={() => this.opened()}
      >
        {child}
      </GridDialog>
    )
  },
  methods: {
    close() {
      this.visible = false
      this.isOpened = false
    },
    closed() {
      this.$emit('closed')
    },
    opened() {
      this.isOpened = true
    }
  }
}

然后专门写一个弹出层池,用来管理弹出框

import Vue from 'vue'
import Component from './fun-griddialog.jsx'
import router from '@/router'
import store from '@/store/index'

const Constructor = Vue.extend(Component)

let instances = []
let numbers = 0
let zindexNumbers = 9999999
const removeInstance = instance => {
  const index = instances.findIndex(t => instance.id == t.id)
  if (index != -1) {
    instances.splice(index, 1)
  }
}

const getInstanceById = id => {
  const instance = instances.find(t => t.id == id);
  return instance;
}

const popup = options => {
  const props = options.props || {};
  const slotName = options.slotName || null;
  const slotProps = options.slotProps || {};
  // 这里需要把router和store传入,否则的话自定义插槽如果用到了store,这个组件是不在总App组件下,无法使用store的
  const instance = new Constructor({
    router,
    store,
    propsData: {
      ...props,
      slotName,
      slotProps,
      zIndex: ++zindexNumbers,
      show: false
    }
  })

  if (options.id) {
    let ins = getInstanceById(options.id);
    if (ins) {
      ins.vm.visible = true;
      return;
    }
  }

  instance.id = options.id || `__popup_dialog__${++numbers}`
  if (options.id) {
    instance.__cache = true;
  }
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  instance.vm.visible = true

  instances.push(instance)

  instance.vm.$on('close', () => {
    instance.vm.visible = false
  })
  // 有些弹出层希望能缓存起来,不要点关闭后关闭,约定在外部传入id则不销毁.
  instance.vm.$on('closed', () => {
    if (!instance.__cache) {
      removeInstance(instance)
      document.body.removeChild(instance.vm.$el)
    }
  })
// 对弹出层添加鼠标按下事件,改变他的zIndex,从而让弹出层放到最上层
  instance.vm.$el.addEventListener('mousedown', e => {
    // console.log('mousedown')
    instance.vm.zIndex = ++zindexNumbers;
  })

  return instance.vm
}

export default popup

这样就基本上写好了针对我们项目的弹出层,但是这种弹出层确实很难做到通用(2个问题: 1:Vue组件必须在components中定义才能使用,如果都是全局注册也不太好. 2: 这类组件基本上不在App(根组件)的下面,如果想在根组件下面,仍然会有很多耦合代码,所以基本也要用硬编码去引入类似vuex和vue-router组件)基于上面两点,实在想不到怎么做通用框架,本身的vue组件库确实也没有看到能有这样的的弹出层功能,(只能是基本功能,不能引用自定义组件)
最后使用就很简单,

import GridDialog from './GridDialog.vue'
import popup from './function'
export default (Vue) => {
  Vue.component(GridDialog.name, GridDialog)
  Vue.prototype.$popup = popup;
}
// 在main入口里面写入
// import xxx from './...js'
// Vue.use(xxx)

// 在需要弹出的地方直接写:
      this.$popup({
        props: {
          title:'标题',
          // fullPage: true
          //width: '1000px',
          //height: '500px'
          fullWindow: true
        },
        slotName: 'UnitContainer',   //组件名称(必须在上面的component中引用)
        slotProps: {                //组件需要传入的参数
          areaId: item.areaId,
          deviceType: this.activeDeviceType.value
        }
      })

记录一下,下次需要用到时有地方可以查阅