0.0.1-5 • Published 7 years ago
@beisen/popup v0.0.1-5
@beisen/popup
mobile html5 popup modal overlay
运行
# install dependencies
npm install
# 运行开发环境
npm run dev
# 编译tag版本
npm run build外部引入
npm install --save @beisen/popup 安装命令
import {
ActionList,
Overlay,
Popup,
Modal,
RichTextPop,
Snaker
} from '@beisen／popup';参数说明
组件 popup
弹层类组件
| 参数名称 | 数据类型 | 参数含义 | 枚举值 |
|---|---|---|---|
| ｀open｀ | Boolean | 是否显示弹窗 | |
| ｀custom-class｀ | String | 自定义class名称 | |
| ｀append-body｀ | Boolean | 是否直接将节点插入body上 | |
| ｀full｀ | Boolean | 是否全屏显示 | |
| ｀direction｀ | String | 弹窗显示的方向和位置 | ｀left，right，top，bottom｀ |
| ｀show-overlay｀ | Boolean | 是否显示地步遮罩 | |
| ｀fast-close｀ | Boolean | 是否马上关闭 | |
| ｀close｀ | Function | 关闭的方法及回调 |
<popup open='false' :direction='left' :on-close='closePop'>
<div style='width: 280px;'/>
</popup>组件 action-list
显示操作列表
| 参数名称 | 数据类型 | 参数含义 | 枚举值 |
|---|---|---|---|
| ｀open｀ | Boolean | 是否显示 | |
| ｀actions｀ | Array | 操作的数据列表 | |
| ｀close｀ | Function | 关闭的方法及回调 |
actions 内部结构
| 参数名称 | 数据类型 | 参数含义 | 枚举值 |
|---|---|---|---|
| ｀text｀ | String | 操作显示文字 | |
| ｀visible｀ | Boolean | 是否显示 | |
| ｀handler｀ | Function | 点击的回调 | |
| ｀key｀ | String | 唯一标识 |
var actionData = [{
text: "编辑任务",
handler: ()=>{},
key: 'edit',
visible: true
}, {
text: "删除任务",
handler: ()=>{},
key: 'delete',
visible: true
}];
<action-list open='false' :actions='actionData' :close='closePop'/>组件 snaker
系统提示
| 参数名称 | 数据类型 | 参数含义 | 枚举值 |
|---|---|---|---|
| ｀open｀ | Boolean | 是否显示 | |
| ｀type｀ | String | 提示类型 | error warning success info |
| ｀message｀ | String | 提示内容 | |
| ｀auto-close｀ | Boolean | 是否自动关闭 | |
| ｀delay｀ | Number | 延迟关闭时间 | |
| ｀close｀ | Function | 关闭的方法及回调 |
<snaker open='false' message='删除成功！' type='error' :close='closePop'/>组件 rich-text-pop
用于显示富文本的弹层
| 参数名称 | 数据类型 | 参数含义 |
|---|---|---|
| ｀open｀ | Boolean | 是否显示 |
| ｀title｀ | String | 弹层标题 |
| ｀content｀ | String | 弹层内容 |
| ｀close｀ | Function | 关闭的方法及回调 |
<rich-text-pop :content='richContent' :title="'描述'" :open='richTextPop' :close="closePop"/>组件 modal
确认弹层
| 参数名称 | 数据类型 | 参数含义 |
|---|---|---|
| ｀open｀ | Boolean | 是否显示 |
| ｀title｀ | String | 弹层标题 |
| ｀message｀ | String | 提示内容 |
| ｀submi-text｀ | String | 确认按钮文字 |
| ｀cancel-text｀ | String | 取消按钮文字 |
| ｀submit｀ | Function | 确定的方法及回调 |
| ｀cancel｀ | Function | 取消的方法及回调 |
<modal :open="modal" title='确认' message='确定要删除吗？删除之后操作不可恢复' :submit='closePop' :cancel='closePop'/>