Skip to content

xunleif2e/vue-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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 赵兵