前端Vue仿京东天猫商品属性选择器自定义单选按钮
前端Vue仿京东天猫商品属性选择器自定义单选按钮， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13176
效果图如下：
# cc-radioBtnBox
#### 使用方法
```使用方法
<!-- attrArr：属性数据 @click：属性选择事件 返回属性选择序列数组 -->
<cc-radioBtnBox :attrArr="attrArr" @click="selectAttrClick"></cc-radioBtnBox>
```
#### HTML代码实现部分
```html
<template>
<view class="page">
<!-- attrArr：属性数据 @click：属性选择事件 返回属性选择序列数组 -->
<cc-radioBtnBox :attrArr="attrArr" @click="selectAttrClick"></cc-radioBtnBox>
</view>
</template>
<script>
export default {
data() {
return {
attrArr: [{
attr: '系列',
value: ['iphone 14系列', 'iphone 14 Pro系列']
},
{
attr: '版本',
value: ['128GB', '256GB', '512GB']
},
{
attr: '颜色',
value: ['午夜色', '星光色', '紫色', '蓝色', '红色', '黄色']
},
{
attr: '白条',
value: ['不分期', '3期', '6期', '12期']
},
],
};
},
methods: {
selectAttrClick(value) {
console.log("选择属性的值 = " + value);
uni.showModal({
title: '选择属性的值',
content: '选择属性的值 = ' + value
})
},
}
}
</script>
<style scoped lang="scss">
page {
padding-bottom: 70px;
}
</style>
```
