von-ui组件库文档

文章目录

为什么要建立自己的组件库
名称由来
如何使用
代码地址
基本规范
扩展说明
- 一、template
- 二、script
- 三、style
- 四、最后，附上视频讲解：

记录学习的轨迹：2022-6-21（之前写在wiki里，移植记录，具体时间忘记了）
故事背景：由本人主导的组件库 von-ui 的建立

为什么要建立自己的组件库

1.统一公司前端标准样式：
从产品设计到开发，从而反向去标准产品和设计，做成统一标准，为开发节省大量改动和沟通成本。
2.增加团队学习研究氛围：
让大家从复杂繁琐的业务中抽取归纳经验，形成自己的全局观，解决问题的方法论，共同提高。
3.为今后功能扩展和重构做支持：
之前公司使用的都是有赞的组件库，但是因为引入等一些原因，导致版本无法更新，同时也无法兼容其他的组件库，只能使用老版本的组件库，于是项目里就还存在很多问题：功能落后，样式落伍等等。然而新的组件库就可以改善这个问题，将做到兼容新老版本，优化升级内容，使用统一且美观的组件，使得整体使用感上述一个档次。

名称由来

取公司的第一个字希：希望，读音和“one”类似，有第一的意思，寓意完美，nice！

如何使用

内置了版本号切换
组件使用文档：https://h5.jubaozan.cn/library/von-ui/

代码地址

README.md 有安装说明和配置教程
git地址：http://git.jubaozan.com/library/von-ui.git

基本规范

其实在《组件使用文档：@jbz/von-ui》的 VonExample 中已有说明
【von-ui】组件库规范用例的styleguide使用注意事项：https://blog.csdn.net/Loobub_Kala/article/details/124254108

扩展说明

当需要向 已存在的组件 增加功能时，需要给 对应的增加模块 写明【@author】
重点是 复用性 要强
以 VonCell 为例，进行组件研发的扩展说明

一、template

THEME_CLASS_NAME：当需要使用 样式参数 时（如：主题色等），需要在最外层 div 上挂载：【:class=“THEME_CLASS_NAME”】
trigger：最外层或最基础的点击事件，取名：【@click=“$emit(‘trigger’)”】
插槽：
1. 基础组件：大部分 可自定义 的部分 都 需要配备插槽 ，且插槽slot优先于props，尽量插槽名和参数名保持一致，好找
2. 业务组件：专注于业务需要，适当配备插槽即可
filters：【component-mixin.js】引入后，可以直接将【src\filter\common.js】里面的方法用作 filters
units：filters 中的一个，这是单位换算的方法，可以使用数字或者 数字数组 型数据，比如使用【mp-weixin】的换算规则
1. “10 | units” → “20rpx”
2. “[10, 14, 12, 14] | units” → “20rpx 28rpx 24rpx 28rpx”

二、script

import { compMixin } from ‘…/…/src/mixins/component-mixin.js’ ，mixins: [compMixin]
1. 需要在 ** !16 第一行! ** 引入
2. 有许多基础内置方法和配置
3. 配合style里引入的【src/css/von-common.less】文件使用，同时使用this.calcClass()方法赋值
import { isStrEmpty, units, xxx… } from ‘…/…/src/filter/index.js’
1. isStrEmpty：判断是否是null或者空值，爱用不用，别漏判断报错就行
2. units：代码里的单位换算需要额外的引入，“units(12)” → “20rpx”，“units([13, 12])” → “26rpx 24rpx”
3. 其他的不做赘述了，写到哪是哪
import 其他的组件：所有的引用都需要使用相对路径，使用 ** /“…/…/xxx”/ **，禁止使用 " @/xxx/xxx "
【name: ‘VonXXX’】是必须写的
computed：有很多样式都需要配备和计算，开发组件前，请前研究一下 VonCell 组件和 VonExample 组件
props & methods：一些需要标注或者需要暴露出去的内容都需要标明清楚

三、style

lang=“less” scoped
<style lang="less" scoped>
1. 使用less，要求scoped，如果需要穿透，额外再写一个不带scoped的style
最外层类名格式：
1. 基础组件[Basic]：.von-xxx { &__wrapper {} }
2. 基础组件[Business]：.von-xxx { &__container {} }
3. 注意事项：
  - 必写内容：color: var(–color-text); font-size: var(–common-text);
  - line-height：默认 var(–common-line-height)，有时候是 var(–multi-line-height)，注意识别与区分，一定要互相对齐
  - 如果有长文本，加上：word-break: break-word;
  - 如果是内嵌组件，加上：display: inline-flex;
  - 如果有必要，定义组件内的参数使用，而不是一直写数值
  - 可以修改背景色的组件，注意是否需要设置初始背景色
内部类名格式：
1. 需要使用 & 来进行关联命名
2. 特殊情况下可以不使用 & ，比如：选择(&_selected) 和 不选择(&_unselect) 情况下 !16 图标! 除颜色不同其余都一致，但又不想写两个除开名字内容完全一致的，可以使用全类名设置样式 (.von-xxx_icon)
单位换算：

【~`units(number)`】
padding: ~`units(10)`;→padding: 20rpx;padding: ~`units(12) ` ~`units(14) `;→padding: 24rpx 28rpx;

使用参数：var(–xxx-xxx)
1. 具体可用参数，详见【src\style\themeMixin.less】的【.von-common】里的参数

四、最后，附上视频讲解：

https://www.bilibili.com/video/BV1ea41177T4/