<template>
<div>
<!-- 使用 van-sku 组件 -->
<van-sku
v-model="showSku"
:sku="skuData"
:goods="goodsData"
@buy="onBuy"
/>
</div>
</template>
<script>
export default {
data() {
return {
// 是否显示商品规格选择弹窗
showSku: false,
// 商品规格数据
skuData: {
tree: [
{
k: '颜色',
v: [
{ id: '1', name: '红色' },
{ id: '2', name: '蓝色' },
],
},
{
k: '尺码',
v: [
{ id: 'a', name: 'S' },
{ id: 'b', name: 'M' },
{ id: 'c', name: 'L' },
],
},
],
list: [
{
id: 'sku_1',
price: 100,
stock: 10,
s1: '1',
s2: 'a',
},
{
id: 'sku_2',
price: 120,
stock: 20,
s1: '1',
s2: 'b',
},
{
id: 'sku_3',
price: 150,
stock: 15,
s1: '2',
s2: 'a',
},
// 其他商品规格数据...
],
},
// 商品信息数据
goodsData: {
title: '商品标题',
picture: 'https://example.com/goods.jpg',
price: '100',
originPrice: '120',
},
};
},
methods: {
// 立即购买的回调
onBuy(skuData) {
// 处理立即购买逻辑，skuData 包含用户选择的商品规格信息
console.log('立即购买:', skuData);
},
},
};
</script>
在上述代码中：
- showSku 控制是否显示商品规格选择弹窗。
- skuData 包含了商品的规格信息，其中 tree 用于定义规格的种类和选项，list 用于定义不同规格对应的商品信息。
- goodsData 包含了商品的基本信息，如标题、图片、价格等。
通过这些属性，你可以根据实际需求配置 van-sku 组件的外观和行为。在 @buy 事件回调中，你可以处理用户点击立即购买按钮的逻辑，获取用户选择的商品规格信息。
确保在使用 van-sku 组件前，你的项目中已经正确引入了 Vant 组件库。如果你的项目中还没有引入 Vant，你需要先安装 Vant，并在需要使用的地方引入样式和组件。
npm install vant
然后在需要使用的地方引入：
import 'vant/lib/index.css';
import { Sku } from 'vant';
Vue.use(Sku);
转载请注明出处：http://www.zyzy.cn/article/detail/5710/Vant