vue2 迁移 vue3 - vant2 迁移 vant3 sku 组件引入

vant3 官方至今不出 sku 组件，于是自己整，全是干货：

npm install vant-next-sku -S
npm install less less-loader -D

vue.config.js 配置 less-loader

// vue.config.js 新增：
module.exports = {
    // ... 其他配置
  css: {
    loaderOptions: {
      less: {
        lessOptions: { javascriptEnabled: true },
      },
    },
  },
    
    // ...其他配置
}

【测试数据】：新建src/components/util/data.js, 复制下方数据到data.js中, 如果有接口数据，则这里的数据就不要了

export function getSkuData(largeImageMode = false) {
  return {
    goods_id: "1",
    quota: 5,
    quota_used: 0,
    start_sale_num: 2,
    goods_info: {
      price: 1,
      title: "测试商品",
      picture: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
    },
    sku: {
      price: "1.00",
      stock_num: 227,
      none_sku: false,
      hide_stock: false,
      collection_id: 2261,
      tree: [
        {
          k: "颜色",
          k_s: "s1",
          k_id: "1",
          v: [
            {
              id: "1",
              name: "粉色",
              imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
            },
            {
              id: "2",
              name: "黄色",
              imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-2.png",
            },
            {
              id: "3",
              name: "蓝色",
              imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-3.png",
            },
          ],
          largeImageMode,
        },
        {
          k: "尺寸",
          k_s: "s2",
          k_id: "2",
          v: [
            {
              id: "1",
              name: "大",
            },
            {
              id: "2",
              name: "小",
            },
          ],
        },
      ],
      list: [
        {
          id: 2259,
          s1: "2",
          s2: "1",
          price: 100,
          discount: 100,
          stock_num: 110,
        },
        {
          id: 2260,
          s1: "3",
          s2: "1",
          price: 100,
          discount: 100,
          stock_num: 99,
        },
        {
          id: 2257,
          s1: "1",
          s2: "1",
          price: 100,
          discount: 100,
          stock_num: 111,
        },
        {
          id: 2258,
          s1: "1",
          s2: "2",
          price: 100,
          discount: 100,
          stock_num: 6,
        },
      ],
      messages: [
        {
          datetime: "0",
          disable: false,
          multiple: "0",
          name: "留言1",
          type: "text",
          required: "1",
        },
        {
          datetime: "0",
          disable: false,
          multiple: 0,
          name: "留言2",
          type: "id_no",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          multiple: 0,
          name: "留言3",
          type: "image",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          multiple: 1,
          name: "留言4",
          type: "text",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          name: "数字",
          multiple: 0,
          type: "tel",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          name: "邮件",
          multiple: 0,
          type: "email",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          name: "日期",
          multiple: 0,
          type: "date",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          name: "时间",
          multiple: 0,
          type: "time",
          required: 0,
        },
      ],
    },
    properties: [
      {
        k: "加料",
        k_id: 124,
        is_multiple: true,
        v: [
          {
            id: 1224,
            name: "布丁",
            price: 3,
          },
          {
            id: 1225,
            name: "波霸",
            price: 4,
          },
          {
            id: 1226,
            name: "珍珠",
            price: 5,
          },
        ],
      },
      {
        k: "非必选属性",
        k_id: 125,
        is_multiple: true,
        is_necessary: false,
        v: [
          {
            id: 1234,
            name: "属性1",
            price: 3,
          },
          {
            id: 1235,
            name: "属性2",
            price: 4,
          },
        ],
      },
      {
        k: "未加价的属性项",
        k_id: 126,
        is_multiple: true,
        v: [
          {
            id: 1244,
            name: "属性a",
            price: 0,
          },
          {
            id: 1245,
            name: "属性b",
            price: 0,
          },
        ],
      },
    ],
  };
}

export const initialSku = {
  s1: "1",
  s2: "1",
  selectedNum: 3,
  selectedProp: {
    124: [1225, 1226],
  },
};

新建组件src/components/MySku.vue[可以跳过下面的1、2两步，直接看第3步]

新建的组件中，引入 vant-next-sku 及其样式

import "vant-next-sku/lib/index.less";
import Sku from "vant-next-sku";

其他的操作和原来的 vant 的 sku组件一样

示例：MySku.vue 内容如下：

<template>
  <div id="testSku" style="height: 100%">
    <van-sku
      v-model:show="showBase"
      :sku="skuData.sku"
      :quota="skuData.quota"
      :goods="skuData.goods_info"
      :goods-id="skuData.goods_id"
      :quota-used="skuData.quota_used"
      :properties="skuData.properties"
      :hide-stock="skuData.sku.hide_stock"
      :message-config="messageConfig"
      :start-sale-num="skuData.start_sale_num"
      disable-stepper-input
      reset-stepper-on-hide
      safe-area-inset-bottom
      reset-selected-sku-on-hide
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
    <van-button type="success" block @click="showBase = true"
      >基础用法</van-button
    >
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { Button } from "vant";

import "vant-next-sku/lib/index.less";
import Sku from "vant-next-sku";

// 测试接口数据,如果有接口真实数据，则可以删除src/components/util/data.js,并删除下面这行引入
import { getSkuData } from "./util/data";

export default defineComponent({
  components: {
    [Button.name]: Button,
    [Sku.name]: Sku,
  },
  setup() {
    const show = ref(false);

    return {
      show,
    };
  },
  data() {
    return {
      skuData: null,
      skuData2: null,
      showBase: false,
      showCustom: false,
      messageConfig: {
        initialMessages: {
          留言1: "商品留言",
        },
        uploadImg: (file, img) =>
          new Promise((resolve) => {
            setTimeout(() => resolve(img), 1000);
          }),
        uploadMaxSize: 3,
      },
    };
  },
  methods: {
    onBuyClicked(data) {
      console.log(data);
    },

    // 加入购物车
    onAddCartClicked(data) {
      console.log(data);
    },
  },
  created() {
    this.skuData = getSkuData();
    this.skuData2 = getSkuData(true);
  },
});
</script>

备份文件内容：

MySku.vue 内容备份

<template>
  <div id="testSku" style="height: 100%">
    <van-sku
      v-model:show="showBase"
      :sku="skuData.sku"
      :quota="skuData.quota"
      :goods="skuData.goods_info"
      :goods-id="skuData.goods_id"
      :quota-used="skuData.quota_used"
      :properties="skuData.properties"
      :hide-stock="skuData.sku.hide_stock"
      :message-config="messageConfig"
      :start-sale-num="skuData.start_sale_num"
      disable-stepper-input
      reset-stepper-on-hide
      safe-area-inset-bottom
      reset-selected-sku-on-hide
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
    <van-button type="success" block @click="showBase = true"
      >基础用法</van-button
    >
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { Button } from "vant";

import "vant-next-sku/lib/index.less";
import Sku from "vant-next-sku";

// 测试接口数据,如果有接口真实数据，则可以删除src/components/util/data.js,并删除下面这行引入
import { getSkuData } from "./util/data";

export default defineComponent({
  components: {
    [Button.name]: Button,
    [Sku.name]: Sku,
  },
  setup() {
    const show = ref(false);

    return {
      show,
    };
  },
  data() {
    return {
      skuData: null,
      skuData2: null,
      showBase: false,
      showCustom: false,
      messageConfig: {
        initialMessages: {
          留言1: "商品留言",
        },
        uploadImg: (file, img) =>
          new Promise((resolve) => {
            setTimeout(() => resolve(img), 1000);
          }),
        uploadMaxSize: 3,
      },
    };
  },
  methods: {
    onBuyClicked(data) {
      console.log(data);
    },

    // 加入购物车
    onAddCartClicked(data) {
      console.log(data);
    },
  },
  created() {
    this.skuData = getSkuData();
    this.skuData2 = getSkuData(true);
  },
});
</script>

Data 数据

export function getSkuData(largeImageMode = false) {
  return {
    goods_id: "1",
    quota: 5,
    quota_used: 0,
    start_sale_num: 2,
    goods_info: {
      price: 1,
      title: "测试商品",
      picture: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
    },
    sku: {
      price: "1.00",
      stock_num: 227,
      none_sku: false,
      hide_stock: false,
      collection_id: 2261,
      tree: [
        {
          k: "颜色",
          k_s: "s1",
          k_id: "1",
          v: [
            {
              id: "1",
              name: "粉色",
              imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
            },
            {
              id: "2",
              name: "黄色",
              imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-2.png",
            },
            {
              id: "3",
              name: "蓝色",
              imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-3.png",
            },
          ],
          largeImageMode,
        },
        {
          k: "尺寸",
          k_s: "s2",
          k_id: "2",
          v: [
            {
              id: "1",
              name: "大",
            },
            {
              id: "2",
              name: "小",
            },
          ],
        },
      ],
      list: [
        {
          id: 2259,
          s1: "2",
          s2: "1",
          price: 100,
          discount: 100,
          stock_num: 110,
        },
        {
          id: 2260,
          s1: "3",
          s2: "1",
          price: 100,
          discount: 100,
          stock_num: 99,
        },
        {
          id: 2257,
          s1: "1",
          s2: "1",
          price: 100,
          discount: 100,
          stock_num: 111,
        },
        {
          id: 2258,
          s1: "1",
          s2: "2",
          price: 100,
          discount: 100,
          stock_num: 6,
        },
      ],
      messages: [
        {
          datetime: "0",
          disable: false,
          multiple: "0",
          name: "留言1",
          type: "text",
          required: "1",
        },
        {
          datetime: "0",
          disable: false,
          multiple: 0,
          name: "留言2",
          type: "id_no",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          multiple: 0,
          name: "留言3",
          type: "image",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          multiple: 1,
          name: "留言4",
          type: "text",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          name: "数字",
          multiple: 0,
          type: "tel",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          name: "邮件",
          multiple: 0,
          type: "email",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          name: "日期",
          multiple: 0,
          type: "date",
          required: 0,
        },
        {
          datetime: "0",
          disable: false,
          name: "时间",
          multiple: 0,
          type: "time",
          required: 0,
        },
      ],
    },
    properties: [
      {
        k: "加料",
        k_id: 124,
        is_multiple: true,
        v: [
          {
            id: 1224,
            name: "布丁",
            price: 3,
          },
          {
            id: 1225,
            name: "波霸",
            price: 4,
          },
          {
            id: 1226,
            name: "珍珠",
            price: 5,
          },
        ],
      },
      {
        k: "非必选属性",
        k_id: 125,
        is_multiple: true,
        is_necessary: false,
        v: [
          {
            id: 1234,
            name: "属性1",
            price: 3,
          },
          {
            id: 1235,
            name: "属性2",
            price: 4,
          },
        ],
      },
      {
        k: "未加价的属性项",
        k_id: 126,
        is_multiple: true,
        v: [
          {
            id: 1244,
            name: "属性a",
            price: 0,
          },
          {
            id: 1245,
            name: "属性b",
            price: 0,
          },
        ],
      },
    ],
  };
}

export const initialSku = {
  s1: "1",
  s2: "1",
  selectedNum: 3,
  selectedProp: {
    124: [1225, 1226],
  },
};

posted @ 2022-03-04 13:39 柯宝宝智商感人阅读(219) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部