Vue 移动设备优先全屏模式弹出库 - vue-fullpage-modal

Vue 移动设备优先全屏模式弹出库 - vue-fullpage-modal
插件名称 vue-fullpage-modal
版本号 v0.5.3
发布时间 2021年5月13日
插件作者 medistream-team

Vue.js的响应式,移动友好型全屏模式弹出库。

安装和下载:

# NPM
$ npm i vue-fullpage-modal

使用

1.导入并注册模态组件。

import FullpageModal from 'vue-fullpage-modal'
Vue.use(FullpageModal)

2.启用按钮以切换模式弹出窗口。

<template>
  <div>
    <button @click="openModal">open</button>
  </div>
</template>
export default {
  methods: {
    openModal() {
      this.$FModal.show(
        { 
          component: myComponent,
          // more options here
        }, 
        { 
          msg: "Modal Popup Content" 
        }
      )
    }
  }
}

3.隐藏模式弹出窗口。

this.$FModal.hide();

4.可用选项来自定义模态弹出窗口。

value: {
  type: Boolean,
  required: true
},
fpmId: {
  type: Number | String
},
maxHeight: {
  type: Number | String,
  default: '80%'
},
height: {
  type: Number | String
},
width: {
  type: Number | String,
  default: 800
},
backgroundColor: {
  type: String,
  default: '#fff'
},
clickToClose: {
  type: Boolean,
  default: true
},
escToClose: {
  type: Boolean,
  default: true
},
placement: {
  type: String,
  default: 'center bottom'
},
modalStyles: {
  type: String | Object | Array
},
overlayStyles: {
  type: String | Object | Array
},
contentStyles: {
  type: String | Object | Array
}

变更日志:

v0.5.3 (06/15/2021)

  • 专长:在意外破坏时恢复

v0.5.1 (06/07/2021)

  • 修复:未定义的事件处理程序

v0.5.0 (06/04/2021)

  • feat:添加 onClose 道具

v0.3.2 (05/26/2021)

  • 更新

v0.3.0(05/24/2021)

  • 壮举:添加动画道具

v0.2.3(05/22/2021)

  • 琐事:更改CSS声明顺序