popup-animation

popup-animation 组件使用

安装

$npm install popup-animation -S

1. 全局安装插件

   // 在 vue 入口函数中安装插件
   import Vue from 'vue';
   import Popup from 'popup-animation';
   Vue.use(Popup);

2. 单个组件中使用

   import { popup } from 'popup-animation';
   popup(component,options);

使用

this.$popup(component,options);

参数

1. component

   需要弹出的组件

2. options

   key	Description	Require	default
   positon	自定义弹出位置，如果 target存在，则首先从target 中获取数据	—
   props	弹出组件中自定义属性对象	—	{}
   on	弹出组件自定义事件监听对象	—	{}
   target	从目标元素中弹出	—	{}
   isClose	是否可以通过点击遮罩层关闭弹窗	—	True
   transition	自定义弹出动画和时间	—	0.3s cubic-bezier(.61,.59,.63,1.6)

返回值

popup 实例，注意：popup实例并非是传入的自组件实例

popup 实例方法

例子

<templete>
	<button @click="test">
    测试
  </button>
  <h1 ref="h1">
    我是被弹出的组件
  </h1>
</templete>
<script>
	export default {
    methods:{
      test(el){
        this.$popup(this.$refs.h1);
      }
    }
  }
</script>

注意事项：

1. 弹出层和app不属于同一个 上下文，目前版本，请不要在弹出层中使用 this.$router，this.$store等，如有需要，请使用eventBus