更新记录
1.0.0(2024-08-28) 下载此版本
第一版代码
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
nuanf-class-select 自定义分类选择器
电商分类组件,组件名:nuanf-class-select 本组件目前兼容微信小程序、H5、5+APP
功能
1、自适应高度
2、右侧滚动联动左侧
3、自定义数据格式
4、自动格式化数据格式
使用说明
建议下载 示例项目 运行,然后将组件复制到自己项目里
<nuanf-class-select :typeMap="typeMap" :listMap="list" parentKey="catId" activeStyle="red">
<!-- 为了兼容vue2,所以插槽暂不可使用,vue3自行开启代码里的插槽代码 -->
</nuanf-class-select>
参数说明
参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必须 |
---|---|---|---|---|---|
typeMap | 左侧分类数据 | Array | - | [] | 是 |
listMap | 右侧数据 | Array | - | [] | 是 |
parentKey | 分类关联父级 Id | String | - | parentId | |
activeStyle | 默认选中样式 | String | - | #ffffff | |
isForamt | 是否自动格式化数据 | Boolean | - | true | |
typeProps | 左侧分类数据 key | Object | - | {key: 'title',value: 'id'} |
示例
<template>
<view class="content">
<nuanf-class-select :typeMap="typeMap" :listMap="list" parentKey="catId" activeStyle="red">
<!-- 为了兼容vue2,所以插槽暂不可使用 -->
</nuanf-class-select>
</view>
</template>
<script>
impo
export default {
data() {
return {
typeMap: [{
"title": "规章制度",
"id": "1339416014781169665"
}, {
"title": "生产工艺",
"id": "1339416145681203201"
}, {
"title": "生产安全",
"id": "1745017806430146561"
}, {
"title": "基础培训",
"id": "1745017900231561218"
}, {
"title": "警示教育",
"id": "1745017968560967681"
}, {
"title": "特种作业",
"id": "1747058536384303106"
}, {
"title": "职业技能",
"id": "1747058898663116801"
}, {
"title": "专业培训",
"id": "1747059085620023298"
}, {
"title": "公司级",
"id": "1795636815621787649"
}, {
"title": "部门级",
"id": "1795636918768111618"
}],
list: []
}
},
mounted() {
let _list = []
_list = _list.concat(Array.from({
length: 5
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1339416014781169665'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1339416145681203201'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1745017806430146561'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1745017900231561218'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1745017968560967681'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1745017968560967681'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1747058536384303106'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1747058898663116801'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1747059085620023298'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1795636815621787649'
})))
_list = _list.concat(Array.from({
length: 10
}, () => ({
"title": "风险评估与管理",
"cover": "https://img1.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"catId": '1795636918768111618'
})))
this.list = _list
},
methods: {
}
}
</script>