@xunlei/vue-modal

@xunlei/vue-modal

Vue 2.x 模态框组件

在线demo

https://xunleif2e.github.io/vue-modal/demo/dist/index.html

Installation

npm i @xunlei/vue-modal -S

使用

注册插件

1. 注册组件 / Registration

方式1 利用插件方式全局注册 / Use plugin to register a global component

import Vue from 'vue'
import VueModal from '@xunlei/vue-modal'

// import css
import '@xunlei/vue-modal/src/vue-modal.css'

Vue.use(VueModal)

方式2 局部注册 / Local Registration

import { component as VueModal } from '@xunlei/vue-modal'
// import css
import '@xunlei/vue-modal/src/vue-modal.css'

export default {
  // ...
  components: {
    'vue-modal': VueModal
  }
}

方式3 独立版本引入，自动全局注册 / Direct <script> Include

前提是 vue 也是独立版本通过script标签引入 / The premise is that Vue is also use direct <script> include.

<link type='text/css' rel="stylesheet" href="https://unpkg.com/@xunlei/vue-modal@latest/src/vue-modal.css">
<script src="https://unpkg.com/@xunlei/vue-modal@latest/dist/vue-modal.js"></script>

用法

<button
  @click="showModal = true"
>
  Show Modal
</button>

<vue-modal
  v-model="showModal"
  :backdrop="false"
>
  <!-- content here --> 
</vue-modal>

API

Props

参数	说明	类型	可选值	默认值
backdrop	是否需要背景蒙层，有背景蒙层时为模态，不能操作弹出层后方的UI界面	Boolean	Y	true
timeout	自动关闭弹出层的时间，单位为ms	Number	Y	-

Events

事件名	说明	事件参数
show	模态框显示事件	-
hide	模态框隐藏事件	-
after-leave	模态框离开动画执行完成事件	-

Style class

如果要定制一些外观和动画效果，可以覆盖以下的class

class	说明
.modal-mask	模态框背景蒙层
.modal-content	模态框内容盒子
.modal-mask.modal-transparent	失去模态的背景蒙层
.modal-enter-active	模态框进入活动状态
.modal-leave-active	模态框离开活动状态
.modal-mask-enter-active	模态框背景蒙层进入活动状态
.modal-mask-leave-active	模态框背景蒙层离开活动状态
.modal-mask-enter	模态框背景蒙层开始进入

开发命令

# install deps
npm install

# serve demo at localhost:8080
npm run dev

# build library and demo
npm run build

# build library
npm run build:library

# build demo
npm run build:demo

# commit use commitizen
npm run commit

# pre publish
npm run prepublish

# generate changelog
npm run changelog

License

MIT

Copyright (c) 2017 赵兵