npm i -S vodal
用法
<button @click=“togglebox”>点击弹出
<vodal :show=“show” animation=“rotate” @hide=“show = false”>
效果
道具 (Props )
| Property | Type | Default | Description |
| — | — | — | — |
| width | number | 400 | width of dialog |
| height | number | 240 | height of dialog |
| measure | string | px | measure of width and height |
| show | bool | false | whether to show dialog |
| mask | bool | true | whether to show mask |
| closeButton | bool | true | whether to show close button |
| closeOnEsc | bool | false | whether close dialog when esc pressed |
| closeOnClickMask | bool | true | whether close dialog when mask clicked |
| animation | string | zoom | animation type |
| duration | number | 300 | animation duration |
| className | string | / | className for the container |
| customStyles | object | / | custom dialog styles |
| customMaskStyles | object | / | custom mask styles |
| 属性 | 类型 | 默认 | 描述 |
| — | — | — | — |
| 宽度 | 数 | 400 | 对话宽度 |
| 高度 | 数 | 240 | 对话高度 |
| 测量 | 串 | 像素 | 宽度和高度的度量 |
| 表演 | 布尔 | 假 | 是否显示对话框 |
| 面具 | 布尔 | 真正 | 是否戴面具 |
| closeButton | 布尔 | 真正 | 是否显示关闭按钮 |
| closeOnEsc | 布尔 | 假 | 按下esc时是否关闭对话框 |
| closeOnClickMask | 布尔 | 真正 | 单击蒙版时是否关闭对话框 |
| 动画 | 串 | 放大 | 动画类型 |
| 持续时间 | 数 | 300 | 动画时长 |
| 班级名称 | 串 | / | 容器的className |
| customStyles | 目的 | / | 自定义对话框样式 |
| customMaskStyles | 目的 | / | 自定义蒙版样式 |
事件 (Event)
最后
编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。