【技术实现步骤摘要】
本专利技术涉及ui设计开发；具体而言，涉及一种sigma-ui组件库的ui组件优化方法及系统。
技术介绍
1、目前国内的前端项目开发中使用到的ui（用户界面user interface）组件库很多，常用的ui组件库有ant design和element ui等类型，前端页面的开发通常使用相应的ui组件库中的组件进行实现。
2、目前，大部分企业直接使用上述ui组件库来进行项目的开发，少数企业会建立内部的ui设计规范，开发出新的ui组件库，在企业内部进行使用。
3、然而，现有的ui设计开发技术存在以下缺点：
4、1）支持定制化的功能相较弱，不同的项目使用同一个ui组件库，会出现重复造轮子的情况。
5、2）组件维护成本高，每一次版本升级都需要去维护样式，修复由升级导致的样式错乱等问题。
6、3）企业内部项目多，使用同一个ui组件库，对于不同项目中的风格有差异，同一个企业的多个产品的样式风格得不到统一。
7、4）开源ui组件库与项目业务往往不一致，定制化内容需要在每一个项目都进行实现，也会出现重复造轮子的情况。
技术实现思路
1、鉴于此，本专利技术的目的在于提出一种sigma-ui组件库的ui组件优化方法及系统，在已有开源的ui组件库的基础上定制开发sigma-ui项目组件，新增一些定制化的组件，实现sigma-ui组件样式以及对应的组件交互，能够在多个项目中对sigma-ui组件库进行使用，从而节省大量人力，提高ui
2、本专利技术提供一种sigma-ui组件库的ui组件优化方法，包括以下步骤：
3、s1、在sigma-ui项目的组件库设计中引入ant design组件库的对应文件，对antdesign组件库中的组件进行主题定制，使各类组件具有初始样式；
4、如引入ant design库的默认样式文件@import "antd/es/style/default.less";按钮组件的样式文件引入：@import "antd/es/button/style/index.less";等。
5、s2、在组件样式初始化的基础上，基于ant design组件库定义的一系列全局/组件的样式变量，根据sigma-ui项目的组件库需求，调整各类组件的样式属性；
6、s3、在sigma-ui组件库中修改ant design组件库中已有的组件，减少组件的配置参数，新增ant design组件库中没有的组件属性，新增ant design组件库中没有的组件。
7、ant design的组件库中可配置的参数比较多，可以自如地实现大多数场景。但是，考虑到使用环境中部分参数使用的场景并不多，如果将所有的参数都支持，会增加组件使用的学习成本，这些参数会让组件的使用情况变得复杂且后续也不好维护。期望的内部组件库sigma ui是一个简单易上手的组件库，能用尽可能少的参数配置就能实现预期的效果。
8、进一步地，所述s2步骤的调整各类组件的样式属性的方法包括：
9、设置按钮的默认背景色；具体地，用@btn-default-bg: #01afc9;来设置。
10、设置按钮的默认字体颜色；具体地，用@btn-default-color: #fff;来设置。
11、根据ui界面的实际显示情况，使用支持的颜色变量实现预期的效果。
12、进一步地，所述s3步骤的修改ant design组件库中已有的组件方法包括：
13、配置button按钮组件的属性参数，所述属性参数包括：block、classname、danger、disabled、htmltype、icon、primary、style、onclock。
14、block属性为：将按钮宽度调整为其父宽度的选项；
15、classname属性为：容器；
16、danger属性为：设置危险按钮；
17、disabled属性为：禁用状态；
18、htmltype属性为：设置按钮类型，一般用于表单联动；
19、icon属性为：设置按钮的图标组件；
20、primary属性为：主按钮；
21、style属性为：内联样式；
22、onclock属性为：点击按钮时的回调。
23、进一步地，所述s3步骤的新增ant design组件库中没有的组件属性的方法包括：
24、在button组件中新增block属性参数，支持将按钮宽度调整为父宽度；新增参数block后，在button组件中根据block参数值的有无，控制button组件的样式，如有block参数，则设置按钮的样式为：宽度调整为其父组件的样式；如没有block参数，则显示默认情况的样式。
25、block参数就是ant design组件库中button的参数并没有支持的，但是这种按钮出现的场景很多，例如通常的登录、注册、忘记密码页面的按钮，基本上都是这种样式，通过兼容业务情况新增属性，可以更方便地实现预期的效果。
26、进一步地，所述s3步骤的新增ant design组件库中没有的组件属性的方法还包括：
27、popover组件新增showarrow属性参数，支持隐藏箭头。
28、一些场景下，显示提示时希望页面足够简洁，不希望有箭头的显示，使用showarrow参数实现对应的配置，实现对应的页面效果。不需要在每一个使用到该页面效果的项目中都对已有组件进行样式覆盖。
29、新增showarrow参数后，在popover组件中根据showarrow参数值的有无，控制popover组件的箭头样式，如有showarrow参数，则正常显示popover组件的箭头；如没有showarrow参数，则显示popover组件没有箭头的样式。
30、新增showarrow参数具有以下优点：
31、（1）支持简洁化的显示，符合当前组件显示越来越简约的趋势。例如很多网站的提示都没有箭头的显示；类似的word软件的批注功能显示，也没有箭头显示，观看简洁舒适。
32、（2）遇到此类的业务处理，能够兼容处理提示没有箭头的情况，不需要在每一个有类似的业务的项目中多次深入组件内部进行处理，提高了开发效率。
33、进一步地，所述s3步骤的新增ant design组件库中没有的组件的方法包括：
34、新增copy复制组件、可选表格组件selectabletable。
35、copy复制组件为常用的复制，在页面显示为一股复制的图表，鼠标单击后，可获取配置的复制内容，用于复制id等信息，在项目详情页中被使用，取得了良好的交互效果。
36、selectabletable组件为可选表格组件。现有的ant design组件库只是支本文档来自技高网...
【技术保护点】
1.一种Sigma-UI组件库的UI组件优化方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的Sigma-UI组件库的UI组件优化方法，其特征在于，所述S2步骤的调整各类组件的样式属性的方法包括：
3. 根据权利要求1所述的Sigma-UI组件库的UI组件优化方法，其特征在于，所述S3步骤的修改Ant Design组件库中已有的组件方法包括：
4. 根据权利要求1所述的Sigma-UI组件库的UI组件优化方法，其特征在于，所述S3步骤的新增Ant Design组件库中没有的组件属性的方法包括：
5. 根据权利要求1所述的Sigma-UI组件库的UI组件优化方法，其特征在于，所述S3步骤的新增Ant Design组件库中没有的组件属性的方法还包括：
6. 根据权利要求1所述的Sigma-UI组件库的UI组件优化方法，其特征在于，所述S3步骤的新增Ant Design组件库中没有的组件的方法包括：
7.一种Sigma-UI组件库的UI组件优化系统，执行如权利要求1-6任一项所述的Sigma-UI组件库的U
8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1-6任一项所述的Sigma-UI组件库的UI组件优化方法的步骤。
9.一种计算机设备，所述计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-6任一项所述的Sigma-UI组件库的UI组件优化方法的步骤。
...【技术特征摘要】
1.一种sigma-ui组件库的ui组件优化方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的sigma-ui组件库的ui组件优化方法，其特征在于，所述s2步骤的调整各类组件的样式属性的方法包括：
3. 根据权利要求1所述的sigma-ui组件库的ui组件优化方法，其特征在于，所述s3步骤的修改ant design组件库中已有的组件方法包括：
4. 根据权利要求1所述的sigma-ui组件库的ui组件优化方法，其特征在于，所述s3步骤的新增ant design组件库中没有的组件属性的方法包括：
5. 根据权利要求1所述的sigma-ui组件库的ui组件优化方法，其特征在于，所述s3步骤的新增ant design组件库中没有的组件属性的方法还包括：
...【专利技术属性】
技术研发人员：冯颖，姚宁，黄志伟，崔志荣，
申请(专利权)人：同方有云北京科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。