@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'/>