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 吸顶或吸底 | 点击查看 |