vue main.js中引入js_超高效 Vue 模态弹出框组件Vue-Modal

今天给大家推荐一款超美观的pc端vue.js弹窗组件VueJsModal。

vue-js-modal 基于Vue构建的Modal对话框组件。单独组件，方便使用。支持拖拽、缩放、异步调用组件。

安装

$ npm i vue-js-modal -S

引入组件

// 在main.js中引入import Vue from 'vue'import VModal from 'vue-js-modal'import 'vue-js-modal/dist/styles.css'Vue.use(VModal)

调用方式

    Hello, VueModal!  

调用内部 show、hide 方法显示和隐藏弹窗

    This is my first modal  

另外还支持Modal动态调用组件

import MyComponent from './MyComponent.vue'this.$modal.show(  MyComponent,  { text: 'This text is passed as a property' },  { draggable: true })// orthis.$modal.show(  {    template: `      

This is created inline

{{ text }}

`, props: ['text'] }, { text: 'This text is passed as a property' }, { draggable: true, resizable: true }, { 'before-close': event => {} })

附上模态框示例及仓库地址

# demo地址http://vue-js-modal.yev.io/# 项目地址https://github.com/euvl/vue-js-modal

ok，这次就分享到这里。如果大家有其它Vue弹窗组件，欢迎留言讨论~