关于shopStyle
介绍
shopStyle是一个商品规格选择组件
它可以帮助您将一堆复杂商品数据转换成二维商品规格选择数组
使用
//引入
import shopStyle from "";
components:{
...shopStyle
}
//template中使用
<shop-style :data="data" v-slot:default="slotData">
{{slotData.domTree}}{{slotData.types}}
</shop-style>
//需要的data数据格式
data:{
styles:[
{
type:"选择1,选择2",
...
},
{
type:"选择3,选择4",
...
}
],
types:["规格标题1","规格标题2"]
}
//转换后格式
domTree:[
[
{value:"选择1",isAcitve:false,isDaisable:false},
{value:"选择3",isAcitve:false,isDaisable:false}
],
[
{value:"选择2",isAcitve:false,isDaisable:false},
{value:"选择4",isAcitve:false,isDaisable:false}
]
]
types:["规格标题1","规格标题2"]
使用者可根据domTree中提供的数据进行渲染商品规格树
shopType还提供了一个子组件shopTypeItem
shopTypeItem代表着商品的子规格,它内置了click事件帮助shopType动态识别用户的选择
shopTypeItem的使用
shopTypeItem 必填属性 :
| 属性 | 类型 | 说明 |
|---|---|---|
| rowIndex | Number | shopTypeItem所在行位置 |
| colIndex | Number | shopTypeItem所在列位置 |
| value | String | shopTypeItem规格的名字 |
//template中使用
<shop-style :data="data" v-slot:default="slotData">
<div v-for="(a,ai) in slotData.domTree" :key="ai">
<div>{{slotData.types[ai]}}</div>
<shop-style-item
v-for="(b,bi) in a" :key="bi"
:class="{'active':b.isActive,'disable':b.isDisable}"
:rowIndex="ai"
:colIndex="bi"
:value="b.value"
></shop-style-item>
</div>
</shop-style>
