vue+vant实现商品列表批量倒计时功能

下面是详细的讲解。

环境搭建

首先，我们需要安装 Node.js 环境和 Vue CLI 脚手架。其中 Vue CLI 脚手架可以通过 npm 安装，具体的安装命令如下：

npm install -g @vue/cli

创建项目

安装完 Vue CLI 后，我们就可以使用它来创建一个 Vue 项目了。在命令行输入下面的命令来创建一个基本的 Vue 项目：

vue create demo

其中，demo 是你创建的项目名称，可以根据自己的需要来自定义。

引入 VantUI

接着，我们需要在项目中引入 VantUI，VantUI 是一款基于 Vue.js 的移动端 UI 组件库，提供了丰富的组件和工具。使用 VantUI 可以快速构建一个好看、易用的移动端应用。可以通过 npm 安装，具体的命令如下：

npm i vant -S

实现商品列表批量倒计时功能

有了基本的开发环境和 VantUI 的支持，我们就可以开始实现商品列表批量倒计时功能了。

首先，我们需要在页面中引入我们需要使用的组件和样式，如下所示：

<template>
  <div class="product-list">
    <van-row class="product-item" v-for="(item, index) in productList" :key="index">
      <van-col span="12" class="product-image">
        <img :src="item.image" alt="">
      </van-col>
      <van-col span="12" class="product-info">
        <div class="product-name">{{ item.name }}</div>
        <div class="product-price">{{ item.price }}</div>
        <van-count-down class="product-countdown" :time="item.countdown" :format="countdownFormat"></van-count-down>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Row, Col, CountDown } from 'vant';

export default {
  name: 'ProductList',
  components: { Row, Col, CountDown },
  data() {
    return {
      productList: [
        { name: '商品1', image: 'https://picsum.photos/200/200?random=1', price: '¥ 10.00', countdown: 3600 },
        { name: '商品2', image: 'https://picsum.photos/200/200?random=2', price: '¥ 20.00', countdown: 1800 },
        { name: '商品3', image: 'https://picsum.photos/200/200?random=3', price: '¥ 30.00', countdown: 7200 },
      ],
      countdownFormat: '{h}:{m}:{s}',
    };
  },
};
</script>

接下来，我们需要在 data 中定义商品列表数据 productList，其中每个商品都包括商品名称、商品图片、商品价格和倒计时时间。

在页面中，我们使用了 VantUI 的 van-row 和 van-col 组件来实现商品列表的排版。对于倒计时组件的使用，我们使用了 VantUI 的 van-count-down 组件，该组件支持自定义时间格式和倒计时结束的回调事件。当倒计时结束后，我们可以触发该商品的删除事件，将该商品从商品列表中移除。

示例说明

示例一

我们可以先在 created 钩子中监听倒计时结束的事件，如下所示：

<script>
export default {
  name: 'ProductList',
  // ...
  created() {
    // 监听倒计时结束的事件
    this.$on('van-count-down:finish', this.handleCountdownFinish);
  },
  methods: {
    handleCountdownFinish(index) {
      // 删除该商品
      this.productList.splice(index, 1);
    },
  },
};
</script>

当倒计时结束后，VantUI 的 van-count-down 组件会自动触发 van-count-down:finish 事件并将该商品的索引 index 作为参数传递，我们可以在事件回调函数 handleCountdownFinish 中删除该商品。

示例二

我们还可以自定义倒计时时间格式，例如：{hh}:{mm}:{ss}，如下所示：

<van-count-down class="product-countdown" :time="item.countdown" :format="{ hh }:{ mm }:{ ss }"></van-count-down>

在自定义时间格式时，需要注意 {} 中间的内容必须是小写的，否则会导致格式化失败。另外，在格式中可以使用以下占位符：

• {d}：天数
• {h}：小时数
• {m}：分钟数
• {s}：秒数
• {dd}：天数，不足两位自动补零
• {hh}：小时数，不足两位自动补零
• {mm}：分钟数，不足两位自动补零
• {ss}：秒数，不足两位自动补零

以上就是 Vue 和 VantUI 实现商品列表批量倒计时功能的完整攻略，希望可以对你有所帮助。