@beisen/popup
mobile html5 popup modal overlay
Last updated a year ago by beisencorp .
Original npm · Tarball · package.json
$ cnpm install @beisen/popup 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.0.1-5                                ...           latest (a year ago)

4 Versions

  • 0.0.1-5                                ...           a year ago
  • 0.0.1-4                                ...           a year ago
  • 0.0.1-3                                ...           2 years ago
  • 0.0.1-1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 14
Dependencies (1)
Dev Dependencies (13)

Copyright 2014 - 2017 © taobao.org |