lighting ui 是一个基于 Weex 的富交互、轻量级、高性能、三端统一的 金融 UI 组件库。
安装
当工程需要使用 UI 组件时，首先需要对 lib 目录下的 package.json 文件进行设置，引入依赖：
{
"dependencies": {
"lighting-ui": "*"
}
}
然后在 lib 目录下执行 npm install 完成安装。
npm install
使用
在需要使用组件的视图中引入 UI 组件，建议大家使用时按需引入，可以节省打包资源。例如当需要使用 button 按钮，步骤如下：
- 引入组件：
import LcButton from 'lighting-ui/packages/lc-button'- 注册组件：
components: { LcButton }- 使用组件：
<lc-button text="确定" type="normal"></lc-button>完整代码为：
<template>
<div>
<lc-button text="确定" type="normal"></lc-button>
</div>
</template>
<script>
import LcButton from 'lighting-ui/packages/lc-button';
export default {
components: { LcButton },
data(){
return {};
}
}
</script>
<style scoped>
</style>其他组件使用方法类似，改为相对应的组件名即可。
文档
| 组件名称 | 分类 | 描述 |
|---|---|---|
| lc-button | 布局 | 基础按钮组件 |
| lc-cell | 布局 | 单元格组件 展示表单、列表 |
| lc-grid | 布局 | 网格 |
| lc-grid-select | 布局 | 网格选择 |
| lc-lightbox | 布局 | 轮播图 |
| lc-lightbox-full | 布局 | 幻灯片 图片全屏预览 |
| lc-mask | 布局 | 遮罩弹层 可定制内容 |
| lc-overlay | 布局 | 蒙层 常用于 lc-mask、lc-dialog、lc-popup 等的基础蒙层组件 |
| lc-popup | 布局 | 弹出层 支持上下左右四个方向面板弹出 |
| lc-switch | 布局 | 开关组件 用作三端统一的开关显示 |
| lc-minibar | 导航 | 顶部导航栏组件 |
| lc-tab-bar | 导航 | 底部页面切换组件 |
| lc-tab-page | 导航 | 页面滑动切换组件 |
| lc-captchafield | 数据输入 | 带有发送验证码的输入框 |
| lc-checkbox | 数据输入 | 复选列表 |
| lc-countdown | 数据输入 | 倒计时 |
| lc-ep-slider | 数据输入 | 表达式绑定效果的 slider |
| lc-form | 数据输入 | 表单 |
| lc-input | 数据输入 | 单行输入 |
| lc-keyboard | 数据输入 | 密码键盘 |
| lc-numberfield | 数据输入 | 货币或数量输入框 |
| lc-passwordfield | 数据输入 | 密码输入框 |
| lc-radio | 数据输入 | 单选列表 |
| lc-rater | 数据输入 | 星级评分 |
| lc-searchbar | 数据输入 | 搜索条 |
| lc-slider-bar | 数据输入 | 滑动选择条 |
| lc-stepper | 数据输入 | 计数器 |
| lc-textarea | 数据输入 | 多行文本输入 |
| lc-textfield | 数据输入 | 普通输入框 |
| lc-badge | 数据展示 | 徽标 |
| lc-calendar-row | 数据展示 | 横向日历 |
| lc-indexlist | 数据展示 | 索引列表 |
| lc-icon | 数据展示 | 图标 |
| lc-fold-list | 数据展示 | 折叠列表 |
| lc-info-list | 数据展示 | 信息列表 |
| lc-lazy-render | 数据展示 | 懒加载 |
| lc-loading | 数据展示 | 加载提示 |
| lc-marquee | 数据展示 | 跑马灯条 |
| lc-page-calendar | 数据展示 | 日历 |
| lc-progress | 数据展示 | 进度条 |
| lc-process | 数据展示 | 流程条 |
| lc-process-row | 数据展示 | 横向流程条 |
| lc-result | 数据展示 | 结果页 |
| lc-rich-text | 数据展示 | 富文本 |
| lc-simple-flow | 数据展示 | 简易流程 |
| lc-tag | 数据展示 | 标签 |
| lc-tag-wall | 数据展示 | 标签墙 |
| lc-bank | 数据展示 | 银行列表 |
| lc-actionsheet | 用户操作 | 操作栏 |
| lc-button-group | 用户操作 | 按钮组 |
| lc-date-picker | 用户操作 | 日期选择器 |
| lc-dialog | 用户操作 | 对话框 |
| lc-map | 用户操作 | 地图 |
| lc-noticebar | 用户操作 | 提醒条 |
| lc-popover | 用户操作 | 气泡弹层 |
| lc-picker | 用户操作 | 选择器 |
| lc-swipe-cell | 用户操作 | 滑动菜单 |
| lc-tab-group | 用户操作 | 页签组 |
| lc-tip | 用户操作 | 提示 |
| lc-web | 用户操作 | 外部链接 |
了解更多 lighting-ui 的信息，请点击这里。
更新记录
v0.3.130
- mask等组件兼容折叠屏
v0.3.115
- #131269 lc-passwordfield切换时数据不丢失。
- #143549 jsn项目中页面跳转地址前面加上index.html时，页面引入lc-dialog组件，Android手机上必现点透，iOS手机上偶现点透。
- #143971 lc-overlay组件点击阴影层关闭H5下会点透
v0.3.110
1.input组件当type为date时兼容min小于max的情况。