Modules

Module	Description
ActionSheet	ActionSheet框组件
Border1px	1像素边框样式
Button	按钮组件
Checkbox	勾选框
Alert	alert对话框组件
Confirm	confirm对话框组件
Dialog	对话框组件
Prompt	prompt对话框组件
Icon	icon图标组件
Loading	loading component with mask
Loadmore	加载更多组件
Mask	半透明遮罩层
Message	浮层提示信息组件
Progress	bee-progress
Spinner	spinner组件
Swipe	切换组件
ToastLoading	页面toastloading组件
Toast	Toast组件

Functions

enFormatNumberic(n): 千分位格式化
deFormatNumberic(n): 千分位化
cmpUnit(u): 计算单位
splitUnit(u)
validateUnit(u): 验证可用css单位

ActionSheet

ActionSheet框组件

See: 实例

Param	Type	Default	Description
actions	`Array`		动作菜单项
isShow	`Boolean`	`false`	是否显示
isRemove	`Boolean`	`false`	是否隐藏后删除
hide	`function`		隐藏
show	`function`		显示
show	`Event`		显示时触发
hide	`Event`		隐藏时触发
visiable-change	`Event`		显示隐藏时都会触发
slot	`Slot`		default - 组件slot

Example

import {ActionSheet} from 'bee/packages/action-sheet';

// 动态创建
ActionSheet.show({
 actions:[{
     text:'执行动作一',
     action(){
         console.log('执行动作一')
     }
 },{
     text:'执行动作二',
     action(){
         console.log('执行动作二')
     }
 }]
});

// 标签方式
vue.use(ActionSheet);

<w-action-sheet @visiable-change="visiableChange" :is-show="isShow" :actions="actions"></w-action-sheet>


new Vue({
     el:'#app',
     data:function(){
         return {
             isShow: false,
             actions:[{
                 text:'执行动作一',
                 action(){
                     console.log('执行动作一')
                 }
             },{
                 text:'执行动作二',
                 action(){
                     console.log('执行动作二')
                 }
             }]
         }
     },
     methods:{
         show: function(){
             this.isShow = true;
         },
         hide: function(){
             this.isShow = false;
         },
         visiableChange: function(visiable){
             this.isShow = visiable;
         },
         showActionSheet:function(){
             Bee.ActionSheet.show({
                actions: this.actions
             });
         }
    }
})

ActionSheet
- .show(opts) ⇒
- .hide()
- .isVisiable() ⇒ Boolean

ActionSheet.show(opts) ⇒

Kind: static method of ActionSheet
Returns: ActionSheetClass实例

Param	Type	Description
opts	`Object`	配置项, 参见

Example

Bee.ActionSheet.show({actions:{text:'执行动作', action: function(){console.log('do something')}}})

ActionSheet.hide()

Kind: static method of ActionSheet
Example

Bee.ActionSheet.hide()

ActionSheet.isVisiable() ⇒ `Boolean`

判断actionsheet是否显示

Kind: static method of ActionSheet
Returns: Boolean - - 是否显示
Example

if （Bee.ActionSheet.isVisiable(){
    console.log('done something')
  }

Border1px

1像素边框样式

See: 实例

Param	Type	Description
side	`String`	= '', 设置哪个边框, t=上,b=下,r=右,l=左, lr=左右,tb=上下,no-r=无右,no-l=无左,no-t=无上,no-b=无下

Example

<div class="bee-border-1px">四边框</div>

 <div class="bee-border-1px bee-border-t">上边框</div>

 <div class="bee-border-1px bee-border-b">下边框</div>

 <div class="bee-border-1px bee-border-tb">上下边框</div>

 <div class="bee-border-1px bee-border-l">左边框</div>

 <div class="bee-border-1px bee-border-r">右边框</div>

 <div class="bee-border-1px bee-border-lr">左右边框</div>

<div class="bee-border-1px bee-border-no-r">无右边框</div>

<div class="bee-border-1px bee-border-no-l">无左边框</div>

<div class="bee-border-1px bee-border-no-t">无上边框</div>

<div class="bee-border-1px bee-border-no-b">无下边框</div>

// 取值1~10px
<div class="bee-border-1px bee-border-radius-4px">圆角</div>

// 百分比圆角
<div class="bee-border-1px" style="border-radius: 50%;">圆角</div>

Button

按钮组件

See: 实例

Param	Type	Default	Description
type	`string`	`"default"`	显示类型，接受 default, primary, warning
nativeType	`string`	`"button"`	按钮类型， button, reset, submit
disabled	`boolean`	`false`	禁用
plain	`boolean`	`false`	镂空按钮
ghost	`ghost`	`false`	幽灵按钮
block	`boolean`	`false`	是否100%宽
size	`string`	`"normal"`	尺寸，接受 normal, small, large
sharp	`Boolean`	`false`	是否尖角
height	`Number`		高度
width	`Number`		宽度
slot	`String`		显示文本
bgColor	`String`		按钮背景色
fontColor	`String`		字体颜色

Example

<bee-button size="large" type="primary">按钮</bee-button>

 <bee-button size="small" type="warning">删除</bee-button>

Checkbox

勾选框

See: 实例

Param	Type	Description
label	`string`	显示在右侧的内容
disabled	`boolean`	是否禁用

Example

<bee-checkbox v-model="checked" label="这个位置是标签1"></bee-checkbox>
<bee-checkbox v-model="disable" label="是否禁用下面的按钮"></bee-checkbox>

Alert

alert对话框组件

See: 实例

Param	Type	Default	Description
content	`String`		显示信息
height	`Number`	`140`	组件高度
width	`Number`	`240`	组件高度

Example

// use it in html
<script src="bee.min.js"><\/script>
<link rel="stylesheet" href="bee.min.css" />

Bee.Alert.show('提交申请成功');

// use it in webpack or browserify, rollup
import {Alert} from 'bee/packages/dialog';
// var Aler = require('bee/packages/dialog/alert.js');

Alert.show('提交申请成功');

Alert.show(text, opts) ⇒

显示Alert对话框

Kind: static method of Alert
Returns: AlertClass实例

Param	Type	Description
text	`String`	内容信息
opts	`Object`	配置项, 参见

Example

Bee.Alert.show('提交申请成功');

Confirm

confirm对话框组件

See: 实例

Param	Type	Default	Description
content	`String`		显示信息
height	`Number`	`140`	组件高度
width	`Number`	`260`	组件高度

Example

// use it in html
<script src="bee.min.js"><\/script>
<link rel="stylesheet" href="bee.min.css" />

Bee.Confirm.show('确定要提交吗？', (result)=>{if (result) {console.log('提交')}});

// use it in webpack or browserify, rollup
import {Confirm} from 'bee/packages/dialog';
// var Confirm = require('bee/packages/dialog/confirm.js');

Confirm.show('确定要提交吗？', (result)=>{if (result) {console.log('提交')}});

Confirm.show(text, opts, callback) ⇒

显示Confirm对话框

Kind: static method of Confirm
Returns: ConfirmClass实例

Param	Type	Description
text	`String`	内容信息
opts	`Object`	配置项, 参见
callback	`function`	回调函数, 用户选择结果将传参给第一个参数: true of false

Example

const confirm = bee.Confirm.show('确认要提交吗？', (rst)=>{if (rs) console.log('确认提交')});
confirm.doClose();

Dialog

对话框组件

See: 实例

Param	Type	Default	Description
width	`Number`	`240`	对话框宽度
height	`Number`	`160`	对话框高度
content	`String`		对话框内容, 必填
title＝''	`String`		对话框标题
show	`function`		对话框标题
hide	`function`		对话框标题
buttons	`Array.<Object>`	`[{text:'确定'},{text:'取消'}`	对话框标题
contentStyle	`Object`		对话框内容样式
showClose	`Boolean`	`false`	是否显示关闭按钮

Example

import {Dialog} from 'bee/packages/dialog';

Dialog.show({
     title: '提交信息',
     content: '确定要提交吗？', 
     buttons:[{text:'确定', action:function(){
         // 确认提交
     }},{text:'取消', action: function(){
         // 不提交
     }}]
});

Dialog.show(opts) ⇒

显示对话框Dialog

Kind: static method of Dialog
Returns: DialogClass实例

Param	Type	Description
opts	`Object`	配置项, 参见

Example

Bee.Dialog.show({content:'红包来了!',title:'发红包了'})

Prompt

prompt对话框组件

See: 实例

Param	Type	Default	Description
placeholder	`String`		提示信息
height	`Number`	`140`	组件高度
width	`Number`	`260`	组件高度

Example

// use it in html
<script src="bee.min.js"><\/script>
<link rel="stylesheet" href="bee.min.css" />

Bee.Prompt.show('请填写信息？', (val)=>{console.log(val)});

// use it in webpack or browserify, rollup
import {Prompt} from 'bee/packages/dialog';
// var Prompt = require('bee/packages/dialog/prompt.js');

Prompt.show('请填写信息？', (val)=>{console.log(val)});

Prompt.show(text, opts, callback) ⇒

显示Prompt对话框

Kind: static method of Prompt
Returns: PromptClass实例

Param	Type	Description
text	`String`	内容信息
opts	`Object`	配置项, 参见
callback	`function`	回调函数, 用户输入信息将传参给第一个参数

Example

const confirm = Bee.Prompt.show('请输入要跳转的网址', (url)=>{window.location = url});
prompt.doClose();

Icon

icon图标组件

See: 实例

Param	Type	Default	Description
type	`String`		icon名称
width	`Number`	`18`	组件宽度
height	`Number`	`18`	组件高度
fill	`String`	`'#fff'`	组件颜色,css color

Example

<bee-icon type="guanbi" fill="#8a8a8a"></bee-icon>

Loading

loading component with mask

See: 实例

Param	Type	Default	Description
spinnerSize	`Number`	`30`	spinner直径
spinnerStroke	`Number`	`3`	spinner描边宽度
spinnerType	`Number`	`6`	spinner类型 0-6
spinnerWidth	`Number`		spinner宽度
spinnerHeight	`Number`		spinner高度
color	`String`	`#478f05`	spinner以及text颜色
bgColor	`String`	`rgba(255,`	255, 255, 0.9) - spinner以及text颜色
text	`String`		加载文字提示
fullPage	`Boolean`	`false`	是否全屏显示
isShow	`Boolean`	`false`	显示隐藏
isRemove	`Boolean`	`false`	隐藏后是否清除

Example

<w-loading>正在加载...</w-loading>

Loadmore

加载更多组件

See: 实例

Param	Type	Description
topPullText	`String`	内容上方loading拖动时显示文字
topLoadingText	`String`	内容上方loading拖动释放开始加载数据显示文字
topDropText	`String`	内容上方loading拖动超出指定距离，释放可加载时显示文字
bottomPullText	`String`	内容下方loading拖动时显示文字
bottomLoadingText	`String`	内容下方loading拖动释放开始加载数据显示文字
bottomDropText	`String`	内容下方loading拖动超出指定距离，释放可加载时显示文字
onRefresh	`function`	内容上方loading加载数据方法
onInfinite	`function`	内容下方loading加载数据方法
topLimit	`Number`	内容上方拖动距离可加载临界值
bottomLimit	`function`	内容下方拖动距离可加载临界值
topStatus	`String`	内容上方组件状态
bottomStatus	`String`	内容下方组件状态
listenScroll	`Boolean`	是否监听scroll

Example

<w-loadmore>content list</w-loadmore>

Mask

半透明遮罩层

Param	Type	Default	Description
color	`String`	`rgba(0,0,0,`	0.6) - 遮罩颜色, css color
isRemove	`Boolean`	`false`	是否隐藏动画完成从dom中清除
isShow	`Boolean`	`false`	显示隐藏

Example

<bee-mask color="yellow"></bee-mask>

Message

浮层提示信息组件

See: 实例

Param	Type	Default	Description
pos	`String`	`'top'`	显示位置,可取值 'top', 'middle', 'bottom'
type	`String`	`'info'`	提示框类型, 可取值 'info', 'success', 'error', 'warning'
text	`String`		提示信息内容, 也可以slot方式传入
delay	`Number`	`3000`	显示多长时间，单位 ms<毫秒>
isRemove	`Boolean`	`false`	是否隐藏后移除dom
autoHide	`Boolean`	`false`	是否自动隐藏

Example

// use it in module tools
 import Message from '@bee/message';
 Message.show('有新信息了');
 Message.info('有新信息了');
 Message.success('信息提交成功');
 Message.warning('内容包含非法词');

 // use it in html
 <script src="bee.min.js"><\/script>
 <link rel="stylesheet" href="Bee.min.css">
 Bee.Message.show('有新信息了');
 Bee.Message.info('有新信息了');
 Bee.Message.success('信息提交成功');
 Bee.Message.warning('内容包含非法词');

Message
- .show(opts) ⇒
- .info(text, opts) ⇒
- .success(text, opts) ⇒
- .warning(text, opts) ⇒
- .error(text, opts) ⇒