0.3.0 • Published 4 years ago
vue-popup-manage v0.3.0
vue-popup-manage
弹窗组件状态管理和组件传值
Installation
$ yarn add vue-popup-manage
$ npm install vue-popup-manage
Usage
import Popup from 'vue-popup-manage';
const popupPath = 'components';
// Configure the popup path globally, The full path is 'src/components'
Vue.use(Popup, popupPath);
API
Show or hide current popup and hide other popup
this.$popup.closeToggle({
NAME: 'popup', // 弹窗组件的文件名称
SHOW: true, // true 显示弹窗组件,false 隐藏弹窗组件
SELECTED: iconName, // 页面图标选中
// PATH:'components', // 可单独配置 弹窗组件的文件路径,默认用全局配置的路径
data: item.data, // 弹窗组件传值
});
Show or hide current popup
this.$popup.toggle({
NAME: 'popup', // 弹窗组件的文件名称
SHOW: true, // true 显示弹窗组件,false 隐藏弹窗组件
SELECTED: iconName, // 页面图标选中
// PATH:'components', // 可单独配置 弹窗组件的文件路径,默认用全局配置的路径
data: item.data, // 弹窗组件传值
});
Hide popups
// popup1 弹窗组件的文件名称
// 一个参数
this.$popup.close('popup1');
// 多个参数
this.$popup.close(['popup1','popup2'...]);
Hide all popups exclude popup1...
// popup1 弹窗组件的文件名称
// 不传参数
this.$popup.closeAll()
// 一个参数
this.$popup.closeAll('popup1');
// 多个参数
this.$popup.closeAll(['popup1','popup2'...]);
Icon selected status
// iconName 图标的key 对应弹窗弹出配置的 SELECTED: iconName,
this.$popup.selected('iconName');
// html 中的用法
<div :class="{'active': $popup.selected('iconName')}"></div>
Component received value
// 组件中监听值的变化 this.popupKey 组件的名称 对应动态组件的 :popup-key
this.$popup.data(this.popupKey)
// 返回值的类型是对象包含弹窗弹出配置的所有值
The currently loaded component
// 当前页面中弹出的所有组件
this.$popup.components()
// html 用法 循环所有组件
<component :is="componentItem.component" :popup-key="componentItem.name" :popup-index="index" v-for="componentItem in $popup.components()" :key="componentItem.name"></component>
Demo
1.引入组件 参考:Usage
2.在需要显示弹窗的主页面例如(App.vue),创建动态组件模板 参考 The currently loaded component
3.调用弹窗的api 显示或者隐藏弹窗