lighting-ui

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	数据输入	输入框组件 支持8种基本类型，可自定义样式
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	用户操作	外部链接
lc-slider-menu	用户操作	联动菜单

了解更多 lighting-ui 的信息，请点击这里。

更新记录

v0.3.130

• mask等组件兼容折叠屏

v0.3.116

• #145501 新增lc-slider-menu组件。

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的情况。