【开箱即用】商品多规格sku选择器组件豪华独立版【业务型数据驱动式组件】支持vue3 - 更新日志

1.7.2（2023-04-23）

【优化】组件内输入框样式和细节

1.7.1（2023-01-06）

【修复】百度小程序vue2版本无法正常弹窗的问题。

1.7.0（2022-08-05）

【新增】num-change 事件，可监听购买数量输入框内的值。
【优化】一些细节

1.6.2（2022-04-21）

【优化】内部细节

1.6.1（2022-03-14）

【新增】属性 safe-area-inset-bottom 是否开启底部安全区适配，默认true

1.6.0（2022-03-06）

优化演示页面

1.5.9（2021-12-01）

1、【优化】演示页面

快速上手 `uniCloud` 云开发Q群：`22466457` 如有插件问题或建议也可以在群内讨论。

你也可以在评论区发布留言交流心得。

1.5.8（2021-10-28）

1、【优化】演示页面
2、【优化】内部细节

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.7（2021-10-15）

【优化】演示页面示例

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.6（2021-10-13）

【优化】静态页面的示例

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.5（2021-10-13）

【优化】页面细节

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.4（2021-10-11）

1、【新增】属性 goodsThumbBackgroundColor 商品缩略图背景颜色，默认为透明

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.3（2021-09-16）

1、【新增】selectedInit 参数，若为true则每次选择完SKU后，购买数量归1，如果有最小购买数量，则设置为最小购买数量

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.2（2021-09-16）

1、【优化】vue版本默认调整为vue2（可在根目录的manifest.json调整为vue3）（当前版本同时支持vue2和vue3）

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.1（2021-08-16）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【优化】页面细节

你也可以在评论区发布留言交流心得。

1.5.0（2021-08-07）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【升级】同时兼容`vue2`和`vue3`（`vue3`需要`HBX3.2.0`及以上版本）

2、【优化】新增参数`amountType` 值为1：金额以分为单位值为0：金额以元为单位

你也可以在评论区发布留言交流心得。

1.4.1（2021-08-07）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【升级】同时兼容`vue2`和`vue3`（`vue3`需要`HBX3.2.0`及以上版本）

2、【优化】新增参数`amountType` 值为1：金额以分为单位值为0：金额以元为单位

你也可以在评论区发布留言交流心得。

1.4.0（2021-08-07）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【升级】同时兼容`vue2`和`vue3`（`vue3`需要`HBX3.2.0`及以上版本）

2、【优化】新增参数`amountType` 值为1：金额以分为单位值为0：金额以元为单位

你也可以在评论区发布留言交流心得。

1.3.1（2021-07-26）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【优化】细节和文档

你也可以在评论区发布留言交流心得。

1.3.0（2021-06-19）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【重要】新增`localdata`属性，可以直接绑定商品数据源，无需写`custom-action`（支付宝不支持`custom-action`）

2、【优化】示例`/pages/index/index-dynamic`和`/pages/index/index-static`均改成`localdata`模式

你也可以在评论区发布留言交流心得。

1.2.6（2021-05-24）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【新增】sku的小图点击可以预览图片。

2、【修复】小程序sku可能无法点击的bug。

你也可以在评论区发布留言交流心得。

1.2.5（2021-05-15）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【修复】默认价格区间显示在`skuIdName`不为`_id`时显示错误的问题

你也可以在评论区发布留言交流心得。

1.2.4（2021-04-22）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【优化】默认选择SKU的策略

你也可以在评论区发布留言交流心得。

1.2.3（2021-03-20）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【优化】更新文档点击查看

2、【优化】优化内部逻辑

重要说明

`skuArrName（sku_name_arr）`和`specListName（spec_list）`对应顺序

// 为了方便说明，这里只展示sku_name_arr和spec_list字段
{
    "_id":"001",
    "sku_list": [
        {
            "sku_name_arr": ["红色", "128G", "公开版"],
        }
    ],
    "spec_list": [
        {
            "name": "颜色",
            "list": [{"name": "红色"},{"name": "黑色"},{"name": "白色"}]
        },
        {
            "name": "内存",
            "list": [{"name": "128G"},{"name": "256G"}]
        },
        {
            "name": "版本",
            "list": [{"name": "公开版"},{"name": "非公开版"}]
        }
    ]
}

`sku_name_arr` 数组的第一个值`sku_name_arr[0]` = `spec_list[0].list`中的任意一个元素的`name`属性的值

`sku_name_arr` 数组的第二个值`sku_name_arr[1]` = `spec_list[1].list`中的任意一个元素的`name`属性的值

`sku_name_arr` 数组的第三个值`sku_name_arr[2]` = `spec_list[2].list`中的任意一个元素的`name`属性的值

如`sku_name_arr[0] = "红色"`，则`spec_list[0].list`中必须要`有且只有`一个元素的`name`属性的值为`"红色"`

你也可以在评论区发布留言交流心得。

1.2.2（2021-02-24）

【优化】内部逻辑

1.2.1（2021-02-18）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【优化】内部逻辑

1.2.0（2021-02-07）

升级为 `uni_modules` 版本

1.1.3（2021-01-29）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【新增】属性`useCache` 默认为true，当值为false时，会禁止对商品数据进行缓存。

2、【修复】修复当页面多次跳转和返回后可能会造成组件无法正常使用的问题。

3、【优化】为了使新手更易上手组件的使用，示例项目中`pages/index/index-static.vue`进行了简化

你也可以在评论区发布留言交流心得。

1.1.2（2021-01-23）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【新增】属性：`defaultSelect` 设置默认选择的SKU

2、【新增】方法 `selectSku()` 主动选择SKU

3、【优化】当未选择SKU时，默认显示商品价格区间（之前显示0）

4、【优化】当未选择SKU时，默认显示商品库存区间（之前显示0）

// 设置默认SKU
// :default-select="defaultSelect"
defaultSelect:{
  sku:["红色","256G","公开版"],
  num:5
}
// 主动选择SKU
that.$refs.skuPopup.selectSku({
  sku:["红色","256G","公开版"],
  num:5
});

你也可以在评论区发布留言交流心得。

1.1.1（2021-01-04）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、新增`5`个主题风格，可通过属性`theme`自由切换。

2、优化了其他的一些逻辑细节问题。

3、支持HBX的3.0版本

你也可以在评论区发布留言交流心得。

1.1.0（2020-12-31）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

【重要】自`1.1.0`版本起，组件已定义成`datacom`数据驱动式组件，组件名称已修改成`vk-data-goods-sku-popup` 原名称`vk-u-goods-sku-popup`

什么是datacom?

datacom，全称是data components，数据驱动的组件。

这种组件也是vue组件，是一种子类，是基础组件的再封装。

相比于普通的vue组件，datacom组件的特点是，给它绑定一个data，data中包含一组候选数据，即可自动渲染出结果。

而业务型数据驱动组件是更高一级的封装，它直接服务于业务需求，做到开箱即用！

datacom对于开发者的好处

datacom组件，对服务器数据规范、前端组件的数据输入和输出规范，做了定义。它提升了产业的标准化程度、细化了分工，提升了效率。

且不论产业影响，对开发者个人而言，显而易见的好处也很多：

更少的代码量。从前述的传统写法对比可见，使用datacom的前端页面，代码量可减少一半以上。
设计更加清晰。服务器端给符合规范的数据，然后接受选择的结果数据。中间的ui交互无需关心。

更新内容

1、新增`stepStrictly`属性：是否只能输入 step 的倍数，默认false

2、新增`hideStock`属性：是否隐藏库存显示，默认false

3、新增商品缓存功能，加快同一商品ID的渲染速度（依然会同步库存，无需担心缓存后库存不更新的问题）

4、优化了其他的一些逻辑细节问题。

你也可以在评论区发布留言交流心得。

1.0.4（2020-12-22）

优化提示

1.0.3（2020-12-17）

【修复】`actived-style` 会被 `btn-style` 所覆盖的问题

1.0.2（2020-12-01）

新增静态数据演示页面,页面地址: pages/index/index-static

1.0.1（2020-09-27）

【开箱即用】商品sku选择器组件豪华独立版（打造uni插件市场功能最全的SKU选择器组件）

商品SKU选择器组件一般用于电商商品详情页的规格选择时使用。

体验地址

【开箱即用】商品多规格sku选择器组件豪华独立版【业务型数据驱动式组件】支持vue3 - 更新日志

1.7.2（2023-04-23）

1.7.1（2023-01-06）

1.7.0（2022-08-05）

1.6.2（2022-04-21）

1.6.1（2022-03-14）

1.6.0（2022-03-06）

1.5.9（2021-12-01）

快速上手 uniCloud 云开发Q群：22466457 如有插件问题或建议也可以在群内讨论。

你也可以在评论区发布留言交流心得。

1.5.8（2021-10-28）

框架学习Q群：22466457 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.7（2021-10-15）

框架学习Q群：22466457 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.6（2021-10-13）

框架学习Q群：22466457 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.5（2021-10-13）

框架学习Q群：22466457 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.4（2021-10-11）

框架学习Q群：22466457 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.3（2021-09-16）

框架学习Q群：22466457 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.2（2021-09-16）

框架学习Q群：22466457 欢迎萌新和大佬来使用和共同改进框架

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

1.5.1（2021-08-16）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【优化】页面细节

你也可以在评论区发布留言交流心得。

1.5.0（2021-08-07）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【升级】同时兼容vue2和vue3（vue3需要HBX3.2.0及以上版本）

2、【优化】新增参数amountType 值为1：金额以分为单位 值为0：金额以元为单位

你也可以在评论区发布留言交流心得。

1.4.1（2021-08-07）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【升级】同时兼容vue2和vue3（vue3需要HBX3.2.0及以上版本）

2、【优化】新增参数amountType 值为1：金额以分为单位 值为0：金额以元为单位

你也可以在评论区发布留言交流心得。

1.4.0（2021-08-07）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【升级】同时兼容vue2和vue3（vue3需要HBX3.2.0及以上版本）

2、【优化】新增参数amountType 值为1：金额以分为单位 值为0：金额以元为单位

你也可以在评论区发布留言交流心得。

1.3.1（2021-07-26）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【优化】细节和文档

你也可以在评论区发布留言交流心得。

1.3.0（2021-06-19）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【重要】新增localdata属性，可以直接绑定商品数据源，无需写custom-action（支付宝不支持custom-action）

2、【优化】示例/pages/index/index-dynamic和/pages/index/index-static均改成localdata模式

你也可以在评论区发布留言交流心得。

1.2.6（2021-05-24）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

1、【新增】sku的小图点击可以预览图片。

2、【修复】小程序sku可能无法点击的bug。

你也可以在评论区发布留言交流心得。

1.2.5（2021-05-15）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【修复】默认价格区间显示在skuIdName不为_id时显示错误的问题

你也可以在评论区发布留言交流心得。

1.2.4（2021-04-22）

uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。

更新内容

【优化】默认选择SKU的策略

快速上手 `uniCloud` 云开发Q群：`22466457` 如有插件问题或建议也可以在群内讨论。

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

1、【升级】同时兼容`vue2`和`vue3`（`vue3`需要`HBX3.2.0`及以上版本）

2、【优化】新增参数`amountType` 值为1：金额以分为单位值为0：金额以元为单位

1、【升级】同时兼容`vue2`和`vue3`（`vue3`需要`HBX3.2.0`及以上版本）

2、【优化】新增参数`amountType` 值为1：金额以分为单位值为0：金额以元为单位

1、【升级】同时兼容`vue2`和`vue3`（`vue3`需要`HBX3.2.0`及以上版本）

2、【优化】新增参数`amountType` 值为1：金额以分为单位值为0：金额以元为单位

1、【重要】新增`localdata`属性，可以直接绑定商品数据源，无需写`custom-action`（支付宝不支持`custom-action`）

2、【优化】示例`/pages/index/index-dynamic`和`/pages/index/index-static`均改成`localdata`模式

【修复】默认价格区间显示在`skuIdName`不为`_id`时显示错误的问题

1、【优化】更新文档点击查看

`skuArrName（sku_name_arr）`和`specListName（spec_list）`对应顺序

`sku_name_arr` 数组的第一个值`sku_name_arr[0]` = `spec_list[0].list`中的任意一个元素的`name`属性的值

`sku_name_arr` 数组的第二个值`sku_name_arr[1]` = `spec_list[1].list`中的任意一个元素的`name`属性的值

`sku_name_arr` 数组的第三个值`sku_name_arr[2]` = `spec_list[2].list`中的任意一个元素的`name`属性的值

如`sku_name_arr[0] = "红色"`，则`spec_list[0].list`中必须要`有且只有`一个元素的`name`属性的值为`"红色"`

升级为 `uni_modules` 版本

1、【新增】属性`useCache` 默认为true，当值为false时，会禁止对商品数据进行缓存。

3、【优化】为了使新手更易上手组件的使用，示例项目中`pages/index/index-static.vue`进行了简化

1、【新增】属性：`defaultSelect` 设置默认选择的SKU

2、【新增】方法 `selectSku()` 主动选择SKU

1、新增`5`个主题风格，可通过属性`theme`自由切换。

【重要】自`1.1.0`版本起，组件已定义成`datacom`数据驱动式组件，组件名称已修改成`vk-data-goods-sku-popup` 原名称`vk-u-goods-sku-popup`

1、新增`stepStrictly`属性：是否只能输入 step 的倍数，默认false

2、新增`hideStock`属性：是否隐藏库存显示，默认false

【修复】`actived-style` 会被 `btn-style` 所覆盖的问题