Agile Popup
By HarryYin on 2018.08.01.
- 一款通用弹框组件基于 vue2.0+
- 两种模式生成弹框:调用函数 或 使用vue组件
Quick Start
- step1. 全局注册
Vue
- step2. 弹框配置
let popSetting = // 控制弹框显示 show: type: Boolean default: false // 控制弹框定位--默认true相对于浏览器定位,false相对于已定位的父元素 fixed: type: Boolean default: true // 弹框外壳 shell: type: Object { return style: {} // 可自定义行内样式覆盖 } // 弹框标题内容,可插入html内容 mainText: type: Object { return template: '' style: {} // 可自定义行内样式覆盖 show: true } // 叉字按钮配置 close: type: Object { return disabled: false show: true outerStyle: {} // 可自定义按钮外壳样式 innerStyle: {} // 可自定义按钮图标样式,通过fill属性可修改叉号填色 {} } // 按钮1配置 btn1: type: Object { return text: 'btn1' disabled: false show: true type: 'light' // 按钮的类型 style: {} // 可自定义行内样式覆盖 {} } // 按钮2配置 btn2: type: Object { return text: 'btn2' disabled: false show: true type: 'dark' // 按钮的类型 style: {} // 可自定义行内样式覆盖 {} }
- step3. 使用方式:function
// 在组件中通过调用函数可生成任意多个弹框this /* 参数说明: popSetting: 可参考step2 parentNode: 已定位的祖先元素(用户使用非fixed定位时,弹框将会相对于该祖先节点进行定位。) */
- step3. 使用方式:template
<!--一个模板只会生成一个弹框--> <!--可插入slot内容--> <!-- 相关属性可参考step2中的popSetting -->