0.0.5 • Published 6 years ago
gz-popup v0.0.5
gz-popup
一个简单自用的弹窗插件
经过上一个弹窗插件在项目中的应用,我发现我的插件有一个很致命的问题————应用场景过窄,只能用于选择确认和取消的情况。假如需要弹窗中显示表单或者特定内容,则无法完成。因此在新项目中改用新的方法。
1.下载
npm install --save-dev gz-popup
2.组件使用
需使用js.use()
引入
import GzPopup from 'gz-popup'
Vue.use(GzPopup,{
limitWidth:980,
smWidth:70
})
在组件中使用
<gz-popup v-model="isShow" w="800" h="200">
<button type="button" name="button" @click="openMaskLayer">取消</button>
</gz-popup>
3.参数设置
全局设置
(1) limitWidth:
边界宽度(小于此宽度算作移动端),默认值为750(px)
(2) smWidth:
移动端弹窗宽度(注意此处为百分比),默认值为80(%)。如果所设置的弹窗宽度比移动端界面宽度小,则按原尺寸显示,并不会按照此数值显示
组件中设置
(1) show:
是否显示,只能传入Boolean类型。
(2) w:
弹窗宽度,默认值为200(px),窗口宽度在750px以下时变为80%
(3) h:
弹窗高度,默认值为200(px)