rong-ui

基于Vue.js 2.0 UI组件库.

示例

链接

扫描二维码体验

使用说明

安装

npm install rong-ui --save

引入

引入单个组件

import Dialog from "rong-ui/components/dialog"
Vue.use(Dialog);

引用单个组件时babel-loader需配置include和exclude，即：
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('node_modules/rong-ui/components')],
exclude: [resolve('node_modules/rong-ui/components/rong-ui.js')]
}

引入多个组件

import "rong-ui/components/rong-ui.css"
import {Dialog, Toast} from "rong-ui"
let components = [Dialog, Toast];
components.map(cp => Vue.use(cp));

使用

Dialog提示框、Toast弹框、Loading加载中、Keyboard虚拟数字键盘均以挂载到Vue.prototype，引入后，直接使用$dialog(options),$toast(options),$loading(options),$keyboard(options)使用

其他组件未挂载到Vue.prototype上，组件名均已r开头的camelCase命名

如Title标题组件，html如下：

<rTitlebar theme="a" title="Title标题"></rTitlebar>

说明文档

各组件说明文档如下：

组件	文档地址
Dialog 弹框	点击查看
Toast 提示	点击查看
Loading 加载中	点击查看
Keyborad 数字虚拟键盘	点击查看
Titlebar 标题栏	点击查看
Button 按钮	点击查看
Icon 图标	点击查看
Tabs 标签页	点击查看
Range 滑动范围	点击查看
Input 输入框	点击查看
Vcode 图片验证码	点击查看
Email 邮箱	点击查看
Number 数字类型	点击查看
Int 整数	点击查看
Float 浮点数	点击查看
Telephone 手机号码	点击查看
Mvcode 短信验证码	点击查看
IDCard 身份证号码	点击查看
Select 下拉列表	点击查看
Datepicker 日期选择	点击查看
Hidden 隐藏域	点击查看
Fixed 吸顶或吸底	点击查看
FlexFixed 吸顶或吸底	点击查看

rong360/rong-ui