使用lighting-ui控件库

安装依赖

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

{
  "dependencies": {
    "lighting-ui": "*",
    "validator": "^6.2.1"
  }
}

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

npm install

使用UI控件

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

1. 在 <script> 中加入

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

2. 对组件进行注册

   components: { LcButton }

3. 最后在 template 内使用

   <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>

其他控件使用方法类似，改为相对应的控件名即可。

UI控件使用API

更多完整控件参考UI控件API参考

改造UI控件

在实际项目开发过程中，难免会碰到设计师效果图与UI控件相差较大的情况。此时如果UI控件没有提供所需配置项，或者配置项过于复杂，而且控件多处引用，就会无法满足需求，或造成代码冗余。此时可以考虑自行对UI控件进行改造。可在node_modules/lighting-ui/packages/文件夹下找到对应控件的.vue文件，复制到项目文件夹内进行代码修改，使用时只要直接引入修改后的控件即可。可以点击此处下载demo