基于 Vue3 & Element Plus 的电商 SKU 表单配置组件
这是原vue-sku-form的Vue3版本，完全兼容原有的功能和API，并增加了富媒体规格支持。
- 基于 Vue3 Composition API 和 Element Plus
- 完全兼容原 vue-sku-form 的 API
- 支持使用 v-model:attribute 和 v-model:sku 双向绑定
- 🚀 支持多属性 SKU 组合，自动进行笛卡尔积计算
- ✅ 支持属性选择和添加新属性
- 🖼️ 支持富媒体规格值，可以同时展示图片和文字
- 📊 支持批量设置 SKU 数据
- 🔍 内置表单验证功能
- 🎨 支持多种主题风格
- 🧩 丰富的插槽支持，自定义任意表单项
npm install vue3-sku-formimport { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import SkuForm from 'vue3-sku-form'
const app = createApp(App)
app.use(ElementPlus)
app.use(SkuForm)
app.mount('#app')<template>
<SkuForm
ref="skuFormRef"
:source-attribute="sourceAttribute"
v-model:attribute="attribute"
v-model:sku="sku"
:structure="structure"
>
<template #custom-field="{ row, index }">
<!-- 自定义内容 -->
<el-upload>
<el-button>上传图片</el-button>
</el-upload>
</template>
</SkuForm>
<el-button @click="validate">验证</el-button>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import SkuForm from 'vue3-sku-form'
const skuFormRef = ref(null)
const sourceAttribute = ref([
{ name: '颜色', item: ['红色', '蓝色', '黑色'] },
{ name: '尺寸', item: ['S', 'M', 'L', 'XL'] }
])
const attribute = ref([])
const sku = ref([])
const structure = ref([
{
name: 'price',
type: 'input',
label: '价格',
required: true,
validator: (rule, value, callback) => {
if (value === '') {
callback(new Error('价格不能为空'))
} else if (isNaN(Number(value))) {
callback(new Error('价格必须为数字'))
} else if (Number(value) <= 0) {
callback(new Error('价格必须大于0'))
} else {
callback()
}
}
},
{ name: 'stock', type: 'input', label: '库存(件)', required: true },
{ name: 'weight', type: 'input', label: '重量(KG)' },
{ name: 'image', type: 'slot', label: '图片' },
{ name: 'status', type: 'slot', label: '状态' }
])
const validate = () => {
skuFormRef.value.validate((valid) => {
if (valid) {
ElMessage.success('验证通过')
} else {
ElMessage.error('验证失败')
}
})
}
</script>新版本支持富媒体规格值，可以在规格中同时显示图片和文字，特别适合颜色、材质等需要可视化展示的属性：
// 带图片的规格值定义
const sourceAttribute = ref([
{
name: '颜色',
item: [
{ name: '黑色', image: 'https://example.com/black.png' },
{ name: '金色', image: 'https://example.com/gold.png' },
{ name: '白色', image: 'https://example.com/white.png' }
]
},
{
name: '内存',
item: ['16G', '32G', '64G'] // 单一文本仍然支持
}
])还可以使用提供的方法动态添加带图片的规格：
// 使用ref获取组件实例
const skuFormRef = ref(null)
// 动态添加带图片的规格
skuFormRef.value.onAddAttributeWithImage(
attributeIndex, // 属性索引
'规格名称',
'图片路径'
)| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| sourceAttribute | 原始规格数据源 | Array | [] |
| attribute | 已选中的规格数据，支持 v-model | Array | [] |
| sku | 生成的SKU表格数据，支持 v-model | Array | [] |
| structure | 表格结构配置 | Array | [{ name: 'price', type: 'input', label: '价格' }, { name: 'stock', type: 'input', label: '库存' }] |
| separator | SKU代码分隔符 | String | ';' |
| emptySku | 无规格时的SKU代码 | String | '' |
| disabled | 是否禁用属性选择 | Boolean | false |
| theme | 主题风格，支持 1 和 2 两种风格 | Number | 1 |
| async | 是否开启异步加载 | Boolean | false |
| canAddAttribute | 是否可添加新属性值 | Boolean | true |
| 方法名 | 说明 | 参数 |
|---|---|---|
| init | 手动初始化组件 | - |
| validate | 表单验证 | (callback: Function) |
| validateFieldByColumns | 按列验证表单 | (columns: Array, callback: Function) |
| validateFieldByRows | 按行验证表单 | (index: Number, prop: String, callback: Function) |
| clearValidate | 清除验证结果 | - |
| onAddAttributeWithImage | 添加带图片的规格值 | (index: Number, name: String, imagePath: String) |
| 事件名 | 说明 | 参数 |
|---|---|---|
| update:attribute | 当属性选择变化时触发 | 已选属性数组 |
| update:sku | 当生成的SKU数据变化时触发 | SKU数据数组 |
| validate | 表单验证结果事件 | 验证是否通过布尔值 |
组件支持自定义插槽，用于自定义表单项的渲染方式。在 structure 配置中设置 type: 'slot' 并提供对应的插槽名称，即可使用自定义插槽。
<SkuForm>
<template #image="{ row, index }">
<el-upload>
<el-button>上传图片</el-button>
</el-upload>
</template>
<template #status="{ row, index }">
<el-switch v-model="row.status" />
</template>
</SkuForm>组件支持两种主题风格，通过 theme 属性进行切换：
<template>
<el-radio-group v-model="theme">
<el-radio :label="1">主题1</el-radio>
<el-radio :label="2">主题2</el-radio>
</el-radio-group>
<SkuForm
:source-attribute="sourceAttribute"
v-model:attribute="attribute"
v-model:sku="sku"
:theme="theme"
/>
</template>
<script setup>
import { ref } from 'vue'
import SkuForm from 'vue3-sku-form'
const theme = ref(1)
const sourceAttribute = ref([
// ...
])
const attribute = ref([])
const sku = ref([])
</script>npm run devnpm run buildMIT
本组件基于 Vue 3 和 Element Plus 开发，适用于电商、企业管理系统等需要进行SKU规格设置的场景。如有问题或建议，欢迎提交 issue 或 PR。