lighting ui 是一个基于 Weex 的富交互、轻量级、高性能、三端统一的 金融 UI 组件库。

安装

当工程需要使用 UI 组件时，首先需要对 lib 目录下的 package.json 文件进行设置，引入依赖：

{
  "dependencies": {
    "lighting-ui": "*"
  }
}

然后在 lib 目录下执行 npm install 完成安装。

npm install

使用

在需要使用组件的视图中引入 UI 组件，建议大家使用时按需引入，可以节省打包资源。例如当需要使用 button 按钮，步骤如下：

1. 引入组件：

import LcButton from 'lighting-ui/packages/lc-button'

2. 注册组件：

components: { LcButton }

3. 使用组件：

<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

1. mask等组件兼容折叠屏

v0.3.115

1. #131269 lc-passwordfield切换时数据不丢失。
2. #143549 jsn项目中页面跳转地址前面加上index.html时，页面引入lc-dialog组件，Android手机上必现点透，iOS手机上偶现点透。
3. #143971 lc-overlay组件点击阴影层关闭H5下会点透

v0.3.110

1.input组件当type为date时兼容min小于max的情况。