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 内容如下：

备份文件内容：

MySku.vue 内容备份

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],
  },
};

vue Vant

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

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

备份文件内容：

相关

创建vue项目的第一步——之安装vue 命令更新了

vue打包报错

vue登录页面后台返回验证码图片

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

vue axios 1 创建项目及简单配置axios

vue两层list循环后，内层循环页面选择类型

HMVue1.5【Source Map】

vue代理服务器proxy详情配置信息

[转]Vue-cli3.x引入本地json报404 解决方案

[转]Vue CLI 3搭建vue+vuex 最全分析

AntDesign vue学习笔记（三）嵌套路由使用

vue 多项目部署---二级目录

标签