6.0.0 • Published 7 years ago

zan-sku v6.0.0

Weekly downloads
2
License
MIT
Repository
-
Last release
7 years ago

zan-sku

NPM

这是一个规格选择

使用场景

创建有多种规格的商品、服务的编辑页面

代码演示

:::demo 基础用法

import SKU from 'zan-sku';

const skuTree = [
  {
    id: 10740,
    text: '颜色'
  },
  {
    id: 40732,
    text: '尺寸'
  }
];

const sku = [{
  id: 3,
  text: '蓝色'
}, {
  id: 10,
  text: '红色'
}, {
  id: 30,
  text: '土豪金'
}, {
  id: 137,
  text: '黑色'
}, {
  id: 138,
  text: '灰色'
}];

class Simple extends Component {
  fetchSKUTree() {
    return new Promise(resolve => {
      resolve(skuTree);
    });
  }

  fetchSKU() {
    return new Promise(resolve => {
      resolve(sku);
    });
  }

  render() {
    return (
      <SKU
        maxLeafSize={3}
        onFetchGroup={this.fetchSKUTree}
        onFetchSKU={this.fetchSKU}
        uploadConfig={{
          tokenUrl: '//materials.youzan.com/dock/token.json',
          fetchUrl: '//materials.youzan.com/dock/fetch.json'
        }}
      />
    );
  }
}

ReactDOM.render(
    <Simple />
    , mountNode
);

:::

:::demo 禁用

import SKU from 'zan-sku';

const skuTree = [
  {
    id: 10740,
    text: '颜色'
  },
  {
    id: 40732,
    text: '尺寸'
  }
];

const sku = [{
  id: 3,
  text: '蓝色'
}, {
  id: 10,
  text: '红色'
}, {
  id: 30,
  text: '土豪金'
}, {
  id: 137,
  text: '黑色'
}, {
  id: 138,
  text: '灰色'
}];

class Simple extends Component {
  fetchSKUTree() {
    return new Promise(resolve => {
      resolve(skuTree);
    });
  }

  fetchSKU() {
    return new Promise(resolve => {
      resolve(sku);
    });
  }

  render() {
    return (
      <SKU
        onFetchGroup={this.fetchSKUTree}
        onFetchSKU={this.fetchSKU}
        disabled
        disablePopConfig={{
          content: '当前商品启用了门店网店库存同步,需要关闭同步才能修改库存。',
          position: 'top-left',
          trigger: 'hover'
        }}
        uploadConfig={{
          tokenUrl: '//materials.youzan.com/dock/token.json',
          fetchUrl: '//materials.youzan.com/dock/fetch.json'
        }}
      />
    );
  }
}

ReactDOM.render(
    <Simple />
    , mountNode
);

:::

API

参数说明类型默认值备选值
className自定义额外类名string''
value当前选中的sku列表array[]
maxSize最大规格名称数number3
maxLeafSize最大可添加规格值数,0为不限制number0
maxSKUTextLength规格名称文字最大长度number4
maxLeafTextLength规格值文字最大长度number20
skuTree可选的规格列表array[]
disabled禁用操作规格列表booleanfalse
disablePopConfig自定义规格列表禁用状态下提示气泡object{}参考 pop 的文档
uploadConfig自定义上传图片参数object{}参考 upload 的文档
optionValue自定义sku的id的key值string'id'
optionText自定义sku的文案的key值string'text'
onFetchGroup异步获取可选的规格列表,如“颜色”、“尺寸”functionPromise
onFetchSKU异步获取单个规格可选的值,如“红色”、“蓝色”functionPromise
onCreateGroup创建新的规格名,如“星座”functionPromise
onCreateSKU创建新的规格值,如“处女座”functionPromise
onChange当sku发生改变时的回调,返回值为sku当前valuefunctionnoop
prefix自定义前缀string'rc-sku'null

工具API

为了更方便操作规格数据,SKU组件提供了一些工具方法

SKU.flatten(sku, items, options)

通过计算笛卡尔积,将树形的value变成扁平的数组

参数说明类型默认值备选值
sku当前选中规格的valuearray[]
items当前已存在的数据array[]
options可配置参数object{}optionValue: 'id', optionText: 'text'

:::demo flatten

import { flatten } from 'zan-sku';

let skus = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 2, text: '尺寸', leaf: [{id: 21, text: '大'}, {id: 22, text: '小'}] }
];

console.log(flatten(skus));
/**
 * output: 
 * [
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]},
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 * ]
 */

let items = [
  {
    "price": "10.00",
    "code": "AE86",
    "skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]
  }
];
console.log(flatten(skus, items));

/**
 * output: 
 * [
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]},
 *   {
 *    "price":"10.00",
 *    "code":"AE86",
 *    "skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]
 *   },
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 * ]
 */

ReactDOM.render(
    <span />
    , mountNode
);

:::

SKU.isSame(prevSKU, nextSKU)

判断两个sku的结构是否完全相同,包括子节点的顺序

:::demo isSame

import { isSame } from 'zan-sku';

let skuA = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 2, text: '尺寸', leaf: [{id: 21, text: '大'}, {id: 22, text: '小'}] }
];

let skuB = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 2, text: '尺寸', leaf: [{id: 21, text: '大'}, {id: 22, text: '小'}] }
];

let skuC = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 2, text: '尺寸', leaf: [{id: 22, text: '小'}, {id: 21, text: '大'}] }
];

let skuD = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 3, text: '尺寸', leaf: [{id: 21, text: '大'}, {id: 22, text: '小'}] }
];

console.log(isSame(skuA, skuB));
console.log(isSame(skuA, skuC));
console.log(isSame(skuA, skuD));

/**
 * output: 
 * 
 * true
 * false
 * false
 */

ReactDOM.render(
    <span />
    , mountNode
);

:::

更新日志

5.0.0 (2017-11-16)

  • 升级upload版本,新增uploadConfig来配置上传图片的参数
  • sku图片地址改为原图地址

5.2.0 (2018-01-08)

  • 优化禁用状态逻辑,增加 disablePopConfig 属性配置禁用状态下的气泡提示
6.0.0

7 years ago

5.2.8

7 years ago

5.2.4

7 years ago

5.2.3

7 years ago

5.2.1

7 years ago

5.2.0

7 years ago

5.1.8

7 years ago

5.1.7

7 years ago

5.1.6

7 years ago

5.1.5

8 years ago

5.1.4

8 years ago

5.1.3

8 years ago

5.1.2

8 years ago

5.1.1

8 years ago

5.1.0

8 years ago

5.0.9

8 years ago

5.0.8

8 years ago

5.0.7

8 years ago

5.0.6

8 years ago

5.0.5

8 years ago

5.0.4

8 years ago

5.0.3

8 years ago

5.0.2

8 years ago

5.0.1

8 years ago

5.0.0

8 years ago

4.4.4

8 years ago

4.4.3

8 years ago

4.4.2

8 years ago

4.3.3

8 years ago

4.3.2

8 years ago

4.3.1

8 years ago

4.3.0

8 years ago

4.2.6

8 years ago

4.2.5

8 years ago

4.2.4

8 years ago

4.2.3

8 years ago

4.2.2

8 years ago

4.2.1

8 years ago

4.2.0

8 years ago

4.1.10

8 years ago

4.1.7

8 years ago

4.1.6

8 years ago

4.1.5

8 years ago

4.1.4

8 years ago