介绍

基于 vue3 + ts + hooks 的响应式 sku 数据处理插件 为了样式的可定制化,只处理 sku 数据,UI 可自己随意绘制 基本能实现所有你想要的功能

安装

npm 安装

npm install ym-sku

使用

<template>
  <div v-for="(item, propertyIndex) in dataSource.properties" :key="propertyIndex">
    <div>{{ item.name }}</div>
    <div class="attrbute">
      <div
        v-for="(attribute, attributeIndex) in item.attributes"
        :key="attributeIndex"
        @click="handleClickAttribute(propertyIndex, attributeIndex)"
        :class="[
          'weight',
          attribute.isActive ? 'seletedSpecifications' : '',
          attribute.isDisabled ? 'disabledStyle' : '',
        ]"
      >
        <div>{{ attribute.value }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { myUseSkuState,type skuInfoPropsType } from "ym-sku";

// data.ts
const properties = [
  {
    name: "Size",
    attributes: [
      { value: "S", isActive: false, isDisabled: false },
      { value: "M", isActive: false, isDisabled: false },
      { value: "L", isActive: false, isDisabled: false },
      { value: "Y", isActive: false, isDisabled: false },
      { value: "B", isActive: false, isDisabled: false },
    ],
  },
  {
    name: "Color",
    attributes: [
      { value: "red", isActive: false, isDisabled: false },
      { value: "green", isActive: false, isDisabled: false },
    ],
  },
  {
    name: "Figure ",
    attributes: [
      { value: "stripe", isActive: false, isDisabled: false },
      { value: "wave", isActive: false, isDisabled: false },
    ],
  },
];

const skuList = [
  {
    id: "10",
    attributes: ["S", "red", "stripe"],
    stock: 12,
    price: 100,
    originalPrice: 150,
  },
  {
    id: "20",
    attributes: ["S", "green", "wave"],
    stock: 30,
    price: 100,
    originalPrice: 110,
  },
  {
    id: "30",
    attributes: ["M", "red", "stripe"],
    stock: 20,
    price: 100,
    originalPrice: 130,
  },
  {
    id: "40",
    attributes: ["L", "red", "wave"],
    stock: 15,
    price: 100,
    originalPrice: 120,
  },
];

const props = {
  properties,
  skuList,
};

const [dataSource, handleClickAttribute] = myUseSkuState(props);
</script>

<style lang="scss" scoped>
.attrbute {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
}

.weight {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  text-align: center;
  margin: 10rpx 0;
  background: #ffffff;
  border-radius: 10rpx;
  border: 2px solid #a6a6a6;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  margin-right: 20rpx;
}

.disabledStyle {
  background-color: #f7f7f7;
}

.seletedSpecifications {
  border: 2px solid #fb6e23;
}
</style>

其中返回的 dataSource 说明

const dataSource = {
  properties: [], // property 列表
  skuList: [], // sku 列表
  selected: [], // 当前已选的 attribute 列表
  skuId: "", // skuList组合中当前选中的的skuId,可以设置默认skuid(默认选中状态)
};

自定义

import {
  myUseSkuState,
  init,
  getUnchooseLabel,
} from '@/ym-sku/index';
const test = () => {
 // 手动控制属性，这里是更改了选中的sku, 你也可以修改 properties 或 skuList，
  init({ properties, skuList, defaultSkuId: skuList[1].id });
  // 获取未选择标签
  console.log(getUnchooseLabel()); 
};