更新记录

1.3.1(2023-08-23)

  • 模版生成器更新

1.3.0(2023-08-21)

  • 新增组件

1.2.8(2023-07-10)

  • 优化分享
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.2.10 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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里添加对应的图片设置项即可

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问