更新记录

1.3.1（2023-08-23） 下载此版本

• 模版生成器更新

1.3.0（2023-08-21） 下载此版本

• 新增组件

1.2.8（2023-07-10） 下载此版本

• 优化分享

平台兼容性

leadingtek-activity-components组件库

目录结构

|- components // 组件库
  |- vb-xxx // 组件大类目录
    |- interface
      |- index.json // 该类组件的公共配置
      |- mixin.js // 该类组件的公共汇入
    |- comp-name // 单个组件
      |- static // 图片
        |- index.js // 图片汇总入口
      |- index.vue // 组件入口文件
      |- setting.json // 组件配置
      |- props.vue // 组件props配置文件
|- extends // 扩展组件
|- mixin // 混入
  |- index.js // 所有组件的公共混入
|- utils // 工具集
  |- px.js // 所有组件的公共方法
|- comps.vue // 小程序端组件入口文件
|- dataComment.md // 组件数据模型
|- package.json // 组件包配置

组件大类配置字段

• title: <String>，组件大类名称
• compType：<String>，组件大类
• desc：<String>，组件大类描述
• independent：<Boolean>，是否是独立组件【数据独立传入组件中，而不是保存在整个模版里】
• data：<Object>，组件的数据对象格式
• dataMockk：<Object>，组件的mock数据【会自动填充，不用手动去添加】
• hooks：<Array>，组件的钩子函数集合
• actions：<Object>，组件关联的动作集合

组件自定义配置字段

• name：<String>，组件名称【不用配置，会自动生成】
• version：<Number>，组件版本号
• baseConfig：<Object>，组件基本配置
  • width：<Number>，组件宽度
  • height：<Number>，组件高度
  • maxNum：<Number>，组件的最大添加数量
  • desc：<String>，组件描述
  • resizable：<Boolean>，组件可以改变大小
  • resizeX: <Boolean>，组件只允许改变宽度
  • resizeY: <Boolean>，组件只允许改变高度
  • resizeRatio：<Number>，组件的宽高比例【resizable为true时生效。如果没有此配置，则组件大小可以是任意比例】
• props：<Object>，组件props参数

注意事项

1、关于组件大类的定义

• 大类名称采用驼峰命名方式，避免_.等特殊字符
• 大类配置interface/index.json
  • compType：组件大类名称，须跟大类目录名称一致【除去开头vb-】
  • data：定义大类组件所需的数据字段，需要和数据模型的字段相一致
  • dataMock：组件所需的mock数据，置为空对象即可，会从mock数据集dataMock.json中根据data定义的数据字段自动获取
• 大类的混入interface/mixin.js：提炼封装该类组件的公共属性和方法，供组件使用

2、关于组件的定义

• 组件放置在对应的大类目录下，组件名称遵循vue组件的命名规则
• 组件的配置setting.json：定义组件的版本号、基本配置和props配置
• 组件的props通过compProps属性接收、组件的数据通过compData属性接收

3、关于组件的图片引用方式

• 组件的图片统一放在static目录，并通过static/index.js统一暴露
• 图片名称须和图片暴露名称相一致
• 图片在组件里通过compProps对象获取
• 如果图片需要可配置，在props.vue里添加对应的图片设置项即可