elemefe/vue-popup

A popup mixin for vue.js

Overview

vue-popup is a popup mixin for vue.js

Installation

First, install vue-popup from npm:

$ npm install vue-popup

Then import it:

import Popup from 'vue-popup';
require('vue-popup/lib/popup.css');

Usage

In a vue instance, define its mixins:

mixins: [Popup]

Then vue-popup's APIs(see below) are accessible via the vue instance's props attribute.

Example

Goal: on your page you have a button. When it's clicked, an alert pops up.

First let's deal with the alert component in alert.vue:

<template>
  <div v-if="rendered" v-show="visible" class="alert">
    <p>Alert!</p>
  </div>
</template>
<style>
  .alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<script>
  import Popup from 'vue-popup';
  require('vue-popup/lib/popup.css');
  export default {
      mixins: [Popup],
      props: {
        modal: {
          default: true
        },
        closeOnClickModal: {
          default: true
        }
      }
    };
</script>

As you can see, v-if="rendered" and v-show="visible" should be added on the outermost tag of the component. Its props attribute has two keys: modal and closeOnClickModal, please refer to API below for detailed information.

That's it for the alert component. Let's move on to the main page:

<template>
  <button @click="alertVisible = true">Open Dialog</button>
  <alert :visible.sync="alertVisible"></alert>
</template>
<script>
  const Alert = require('./alert.vue');
  export default {
    components: { Alert },
    data() {
      return {
        alertVisible: false
      };
    }
  };
</script>

Note that the main page's alertVisible syncs with the component's visible, so when the button is clicked, alertVisible becomes true thus the alert component pops up.

API

Option	Description	Value	Default
visible	visibility of the popup element	Boolean	'false'
openDelay	time before the popup element opens	Number, in millisecond
closeDelay	time before the popup element closes	Number, in millisecond
zIndex	z-index of the popup element	Number
modal	determines if a modal pops with the popup element	Boolean	'false'
modalClass	class name of the modal	String
closeOnPressEscape	determines if the popup element closes when escape is clicked	Boolean	'false'
closeOnClickModal	determines if the popup element closes when the modal is clicked	Boolean	'false'

vue-popup's Issues

显示隐藏动画的顺序问题

vue-2.0 下侧弹出popup的时候，mint-popup内容区 消失了 v-modal背景 才开始消失，建议 mint-popup 向下滑动消失的时候，v-modal背景 同步淡出。参考vue-1.0的版本。

手动调用close()时会重复执行willClose()的bug

运行demo时，总是会遇到Attribute ":visible.sync" is ignored on component

按照文档上的代码，运行时，总是出现以下代码
Vue warn]: Attribute ":visible.sync" is ignored on component because the component is a fragment instance

把alert中的v-if="rendered"去掉就没有这个提示，请问是什么原因呢，谢谢了

建议加一个Demo页

没有呆毛大家不敢用的，不利于项目的推广啊 😹

failed in opening the popup

I write according to what the markdown says, and when the button clicked, the pop up didn't show up.

And i checked the index.js in vue-popup/lib/index.js, it seems it lost one variable visible in the props definition?

How come that? Any solution to that?

bug

vue.config.debug = true的时候

doclose中的settimeout恢复overflow的bug

当关闭的时候为什么要延迟200ms恢复overflow？

我使用的时候是这个场景
在一个编辑页面，编辑页面需要配置跳转前提示是否保存修改，我在全局的beforeRouterEnter的时候设置弹出框提示，当点确定的时候执行路由跳转，这时候执行路由跳转会销毁当前的vue的实例this，因为this.modal的判断延后了200ms，所以这时候this.modal没有了，必然就无法执行恢复overflow

是我使用的姿势不对？

import MessageBox from 'components/message-box'
 
// ...

router.beforeEach((route, redirect, next) => {
  if (route.matched.some(m => m.meta.needGuard)) {
    // console.log(router.path + '需要进行权限验证')
    authInterceptor(route, redirect, next)
  } else if (redirect.matched.some(m => m.meta.needConfirm) && !route.query.ignoreConfirm) {
    MessageBox.confirm(
      '页面未保存，确定离开此页面吗?',
      '提示',
      {
        type: 'warning',
        cancelButtonText: '留在该页面',
        confirmButtonText: '确定离开'
      }
    )
    .then(() => {
      next()
    })
    .catch(() => {
      next(false)
    })
  } else {
    next()
  }
})

zIndex prop seems not working

vue-msgbox/src/msgbox.vue

export default {
    mixins: [ Popup ],

    props: {
      modal: {
        default: true
      },
      closeOnPressEscape: {
        default: true
      },
      zIndex: {
        default: 1040
      }
    }
}

我尝试过，其他 props 倒是起作用了

建议

0.2.x 迭代得太快了吧,
我建议先把测试用例弄好,我看代码感觉你思路还不是很清晰
还有padding-right: 17px; 这加得我真措手不及