vue商品规格组件

关于shopStyle

介绍

shopStyle是一个商品规格选择组件

它可以帮助您将一堆复杂商品数据转换成二维商品规格选择数组

使用

//引入

import shopStyle from "";

components:{

    ...shopStyle

}

//template中使用



{{slotData.domTree}}{{slotData.types}}



//需要的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中使用

    

      


        
{{slotData.types[ai]}}

          

      

    

项目码云地址