bianla_npm

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