帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue.js(vue-final-modal)弹出模态窗口组件

帝国模板之家 2020-12-28 网页特效 评论

描述:

Final Modal是适用于Vue.js 2/3,功能丰富的模态窗口组件,兼容移动端。

使用方法

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">
  Modal Content Here
</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: '' },
  overlayClass: { type: [String, Object, Array], default: '' },
  contentClass: { type: [String, Object, Array], default: '' },
  styles: { type: [String, Object, Array], default: '' },
  overlayStyle: { type: [String, Object, Array], default: '' },
  contentStyle: { type: [String, Object, Array], default: '' },
  lockScroll: { type: Boolean, default: true },
  hideOverlay: { type: Boolean, default: false },
  clickToClose: { type: Boolean, default: true },
  escToClose: { type: Boolean, default: false },
  preventClick: { type: Boolean, default: false },
  attach: { type: null, default: false, validator: validateAttachTarget },
  transition: { type: String, default: 'vfm' },
  overlayTransition: { type: String, default: 'vfm' },
  zIndexAuto: { type: Boolean, default: true },
  zIndexBase: { type: [String, Number], default: 1000 },
  zIndex: { type: [Boolean, String, Number], default: false },
  focusRetain: { type: Boolean, default: true },
  focusTrap: { type: Boolean, default: false }
}

5. 事件。

@before-open: Before open
@opened: When opened
@before-close: Before close
@closed: After closed
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言