Vue/Vant——商品详情页中的弹窗选项卡

最新推荐文章于 2024-09-02 18:00:12 发布

Southern Wind

最新推荐文章于 2024-09-02 18:00:12 发布

阅读量1.3k

点赞数 1

分类专栏： vant 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/nanchen_J/article/details/122184681

版权

本文介绍了在Vue/Vant框架下如何实现商品详情页中的弹窗选项卡，包括商品图片布局、按钮样式设计、价格与名称展示、购买数量计算以及限购条件的处理。详细讲解了不用组件和使用组件两种方式实现按钮效果，以及如何绑定真实数据，动态显示商品信息。同时，还涵盖了价格联动和步进器（stepper）的使用来限制购买数量。

摘要由CSDN通过智能技术生成

这里整理一下思路，首先布局一下图片，其次去写按钮的样式，并把获取到的价格以及名称放在图片又边的位置最后计算购买数量以及限购条件

这里主要说一下按钮部分怎么去写，效果大概如下

首先需要准备一个数组里面包含俩对象

selects代表一个数组里面包含selectdd用来判断颜色，list列表中放两个按钮名称

selects: [
        {
          title: "颜色",
          selected: 0,
          list: [
            {
              name: "黄色",
            },
            {
              name: "黑色",
            },
          ],
        },
        {
          title: "套餐",
          selected: 0,
          list: [
            {
              name: "标配",
            },
            {
              name: "套餐1",
            },
          ],
        },
      ],

以下是两种写法

第一种：不用组件的写法,这种比较简单

<div v-for="(item, index) in selects" :key="index">
                <p>{
  { item.title }}</p>
                <!-- 12/27 -->
                <van-button
                  v-for="(i, ind) in item.list"
                  :key="ind"
                  @click="vanBtn(ind,index)"
                  :class="item.selected === ind?'active':''"
                  size="mini"
                  type="info"
                  plain
                  >{
  { i.name }}</van-button
                >
              </div>

js部分