Vue 移动友好模态弹出库-vue-final-modal

Vue 移动友好模态弹出库-vue-final-modal
插件名称 vue-final-modal
版本号 v2.3.1
发布时间 2020年8月28日
插件作者 hunterliu1003

Final Modal是Vue.js的纤巧,优雅,无渲染,易于移动且功能丰富的模态窗口组件。

更多功能:

  • SSR支持
  • 可堆叠
  • 可拆卸
  • 可卷动
  • 平稳过渡

基本用法:

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

import { VueFinalModal } from 'vue-final-modal'
export default {
  components: {
    VueFinalModal
  }
}

// or
import { VueFinalModal } from 'vue-final-modal'
Vue.component('VueFinalModal', VueFinalModal)

2.将模态组件添加到模板。

<vue-final-modal v-model="showModal">
  模态内容
</vue-final-modal>

3.创建一个按钮以切换模态。

<base-button @click="showModal = true">
  Launch
</base-button>

4.所有默认道具。

value: { type: Boolean, default: false },
ssr: { type: Boolean, default: true },
classes: { type: [String, Object, Array], default: '' },
contentClass: { type: [String, Object, Array], default: '' },
lockScroll: { type: Boolean, default: true },
hideOverlay: { type: Boolean, default: false },
clickToClose: { type: Boolean, default: true },
preventClick: { type: Boolean, default: false },
overlayClass: { type: String, default: '' },
attach: { type: null, default: 'body', validator: validateAttachTarget },
transition: { type: String, default: 'vfm' },
overlayTransition: { type: String, default: 'vfm' },
zIndex: { type: [String, Number], default: 1000 }

5.活动。

  • @ before-open:打开之前
  • @opened:打开时
  • @ before-close:关闭之前
  • @closed:关闭后

变更日志:

v2.3.1(05/24/2021)

  • 修复了在nuxt中使用调整大小并导航时无法读取未定义的属性’removeEventListener’的问题

v2.3(05/16/2021)

  • 使模态可拖动和可调整大小

v2.2(05/05/2021)

  • 更新

v2.1(03/22/2021)

  • 壮举:添加了自定义过渡对象支持
  • 重构:将keydown事件重构为更通用的用法

v3.0.1(03/09/2021)

  • 动态模式插槽的支持字符串类型

v2.0 / 3.0(03/07/2021)

  • 动态模态

v1.8.8(03/04/2021)

  • 错误修正

v1.8.6(02/09/2021)

  • 修复:手机浏览器不滚动

v1.8.5(01/21/2021)

  • 修复:滚动阻止不适用于iOS(Safari)

v1.8.3(12/28/2020)

  • 修复:$ vfm.openedModals不应引用$ vfm.modals

v1.8.2(12/28/2020)

  • 为vue-final-modal @ next修复类型名称拼写错误

v1.8.1(12/16/2020)

  • 错误修正

v1.8.0(2020年12月15日)

  • 支持道具zIndexAuto
  • 支持$ vfm.get API
  • 支持智能感知
  • 重构锁定滚动道具
  • 错误修正

v1.7.1(12/08/2020)

  • 修复:beforeDestroy不应该发出关闭前事件

v1.7.0(12/08/2020)

  • 开前,闭前可停
  • 在show方法中传递参数

v1.6.3(12/03/2020)

v1.6.2(12/01/2020)

  • 修复了模式打开时背景移动的问题(如果背景具有滚动条)

v1.6.0(11/13/2020)

  • 支持Esc键以关闭Vue 3的模式

v1.5.2(11/12/2020)

  • 删除叠加层上的光标指针。

v1.5.0(11/09/2020)

  • 支持自定义配置,包括key和componentName。
  • 错误修正:仅当所有模态都关闭时,滚动条才会重新出现。

v1.4.2(11/02/2020)

  • 销毁组件时,不会删除修订模式实例。

v1.4.1(10/26/2020)

  • 模态离开后删除lockScroll

v1.3.0(10/16/2020)

  • 内置用于a11y的focusTrap

v1.14(2020年1月1日)

  • A11y支持
  • 新事件@ click-outside
  • 删除无用的插槽content-before,content,-after

v1.0.1(10/01/2020)

  • 支持Vue 3.0

v0.13.4(09/24/2020)

  • 固定的CSS过渡
  • 仅当值为true时才调用handleLockScroll

v1.0.0beta(09/22/2020)

  • 支持Vue 3.0

v0.13.3(09/16/2020)

  • 在手机上固定身体滚动锁

v0.13.1(09/02/2020)

  • 修正:模态DOM元素应在beforeDestroy钩子处删除

v0.13.0(09/01/2020)

  • 添加新的道具zIndexBase。
  • 支持将zIndex与modalStackIndex自动绑定。
  • 固定计算的isComponentReadyToBeDestroyed。
  • 重构VueFinalModal样式。
  • 将prop attach default从body设置为false。