<template>
<div>
<!-- 使用 van-goods-action 组件 -->
<van-goods-action>
<!-- 商品导航按钮 -->
<van-goods-action-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="cart-o" text="购物车" />
<!-- 商品操作按钮 -->
<van-goods-action-button text="加入购物车" @click="addToCart" />
<van-goods-action-button text="立即购买" @click="buyNow" />
</van-goods-action>
</div>
</template>
<script>
export default {
methods: {
// 加入购物车按钮点击事件
addToCart() {
// 处理加入购物车逻辑
console.log('加入购物车');
},
// 立即购买按钮点击事件
buyNow() {
// 处理立即购买逻辑
console.log('立即购买');
},
},
};
</script>
在上述代码中：
- van-goods-action 是商品导航的容器组件，用于包裹商品导航按钮和商品操作按钮。
- van-goods-action-icon 是商品导航按钮组件，用于展示图标和文字。
- van-goods-action-button 是商品操作按钮组件，用于展示操作按钮并监听点击事件。
通过这些组件，你可以方便地创建一个符合设计规范的商品导航区域。你可以根据实际需求调整图标、文字、样式等。
确保在使用 van-goods-action 组件前，你的项目中已经正确引入了 Vant 组件库。如果你的项目中还没有引入 Vant，你需要先安装 Vant，并在需要使用的地方引入样式和组件。
npm install vant
然后在需要使用的地方引入：
import 'vant/lib/index.css';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
Vue.use(GoodsAction);
Vue.use(GoodsActionIcon);
Vue.use(GoodsActionButton);
转载请注明出处：http://www.zyzy.cn/article/detail/5708/Vant