您现在的位置是：首页 > cms教程 > shopxo教程shopxo教程

shopxo的DIY装修自定义组件配置说明

城南旧事2025-07-24shopxo教程已有人查阅

导读type 业务类型（如商品goods, 文章article, 品牌brand）；config 配置数据；const 静态数据（筛选，搜索的数据都放这里）；key 数据const_key作为数据索引；

# 动态数据
type                业务类型（如 商品goods, 文章article, 品牌brand）
config              配置数据
const               静态数据（筛选，搜索的数据都放这里）
key             数据const_key作为数据索引
type        数据类型（空或无则直接使用data, common diy公共初始化中读取）
data        具体数据
goods_category: {
type: common
data: {}
}
# config  配置数据
# 显示设置
show_type               多个已半角逗号分割或者数组（未设置则默认全部）
null                强等判断 === null则表示不需要这个选择（默认就是 vertical 纵向）
vertical            纵向
vertical-scroll     纵向滚动
horizontal          横向
# 每屏显示数量
show_number             多个已半角逗号分割或者数组（未设置则默认全部）
null    强等判断 === null则表示不需要这个选择（默认就是1 单行全屏）
1       单行
2       两行
3       三行
4       四行
# 数据读取方式
data_type
0             指定数据
1             筛选数据
# data_type只有一个的时候，是否显示data_type数据
is_type_show      0 （0不显示，1显示，字段不设置默认为1显示）
data_list
data_auot_list
# 指定类型配置
appoint_config      指定数据结构
data_url        数据接口
show_data       显示数据结构
data_key        数据key（默认 id ）
data_name       数据名称（默认 name ）
data_logo       数据图片（默认 logo ，空则不显示图片）
header          头信息定义（二维数组）
field       字段名称
name        显示名称
type        数据类型（文本text, 图片images）
width       宽度（默认没有则不限制宽度，限制了则超出截断）
data_key        数据key（默认 id ）
page_size       分页展示数量
filter_form     筛选条件（二维数组）
const_key   静态数据key（从const中读取）
type        类型（下拉select, input输入, checkbox多选, radio单选）
default         默认值（checkbox和select多个值使用半角逗号分割或者数组）
select      下拉
is_multiple     是否支持多选（0否，1是）
placeholder     默认占位名称
data_level      数据层级（1～3，默认 1 或者自动处理不需要这个字段定义）
input       输入框
placeholder     默认占位名称
type            文本类型（默认文本text, 数字number）
radio       单选
checkbox    多选
title       筛选名称（如 分类 默认空不展示）
form_name   表单名称（如 category_id）
data        条件数据（二维数组）
data_key    数据key（默认 id 表单和选择最终使用的数据）
data_name   数据名称（默认 name ）
# 筛选类型配置
filter_config       筛选数据结构
data_url        数据接口
filter          参考 appoint_structure 下的 filter
const default_type_data = {
show_type: ['vertical', 'vertical-scroll', 'horizontal'], // 显示类型
show_number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],   // 显示数量
data_type: ['appoint', 'filter'], // 筛选类型
appoint_config: {
data_url: '',
show_data: {
data_key: 'id',
data_name: 'title',
data_logo: 'cover',
},
header: [
{
field: 'id',
name: '中文',
type: 'text',
width: '100',
}
],
page_size: 10,
filter_list: [
{
const_key: 'goods_category', // 从哪个公共字段中获取数据
type: 'select', // 表单的数据类型
default: {
select: {
is_multiple: '0', // 是否多选
placeholder: '请输入内容', // 选择框提示内容
is_level: '0', // 具体的层级
children: 'items', // 层级的子级字段名称
},
input: {
type: 'input', // 输入框类型
placeholder: '请输入内容', // 输入框提示内容
}
},
title: '多选', // 表单内容的标题
form_name: 'category_cascader_id', // 调用接口存放的字段
data: [], // 公共字段的数据
data_key: 'id', // 数据的key
data_name: 'name', // 数据的名称
}
]
},
filter_config: {
data_url: '',
filter_list: [
{
const_key: 'goods_category', // 从哪个公共字段中获取数据
type: 'select', // 表单的数据类型
default: {
select: {
is_multiple: '0', // 是否多选
placeholder: '请输入内容', // 选择框提示内容
is_level: '0', // 具体的层级
children: 'items', // 层级的子级字段名称
},
input: {
type: 'input', // 输入框类型
placeholder: '请输入内容', // 输入框提示内容
}
},
title: '多选', // 表单内容的标题
form_name: 'category_cascader_id', // 调用接口存放的字段
data: [], // 公共字段的数据
data_key: 'id', // 数据的key
data_name: 'name', // 数据的名称
}
]
}
};