bianLa-UI

目录：

介绍 快速上手 组件 button

一、介绍

bianla UI是统一本公司UI,快速搭建应用为初衷而诞生的前端UI组件库,此库只针对移动端UI。

二、快速上手

1.安装 npm install bianla_npm --save-dev 2.引入组件 安装babel-plugin-component插件，配置.bable文件配置如下：

 "plugins": ["transform-vue-jsx", "transform-runtime",["component",
    {
    "libraryName": "bianla_npm",
    "styleLibrary": {
      "name": "theme",
      "base": false
    }
    }
    ]]

1)导入所有组件 import {bianlaUI} from 'bianla_npm'; Vue.use(bianlaUI);

2）按需引入 import {bianlaButton} from 'bianla_npm'; Vue.component(bianlaButton.name, bianlaButton); 注：使用先配置

三、组件

button

(1).引入 import {bianlaButton} from 'bianla_npm'; Vue.component(bianlaButton.name, bianlaButton);

(2).代码演示

<bl-button type="default" title="default"></bl-button>
<bl-button type="primary" title="primary"></bl-button>

(3).API: 参数|说明|类型|默认值|备注 :----------:|:----------------------:|:-----------:|:--------:|:----------------: type|按钮样式:default,primary|String|default|- size|按钮大小：XXlarge,Xlarge,large,normal,small|String|large|- title|按钮文字|String|-|- tips|按钮文字下方的文字|String|""|tisp不为空时，显示按钮tips disabled|禁止:false,true|Boolean|false|- radius|按钮弧度:normal,large,middle,small|String|normal|- loading|按钮加载动画：false,true|Boolean|false|启用tips后此功能不会生效；此功能如果自定义按钮样式不建议使用 (4).Events 事件名|说明|回调参数 :-----:|:--------------------------------:|:--------------------------: click|触发点击事件|event: Event