Custom component cases-application list
Instructions
- For more information, see how to configure properties and configure multiple terminals.
- Note: This component is for learning only and is not an official standard component.
1. Usage scenarios
Application ListFeatures are common in display pages.
2. Effect demonstration
3. Procedure
1. Create a custom component;
2. Enable the schema import function in the same way as the form designer. For more information, see:
- Open the component designer, open the console, and execute the following code
document.querySelector('.lc-left-area-bottom div:last-child').style.display = 'block'
3. Paste the following schema into the schema console of the component designer and click import schema
{
"schemaType": "superform",
"schemaVersion": "5.0",
"utils": [
{
"name": "yidaUtils",
"type": "npm",
"content": {
"package": "@ali/vu-yida-utils",
"version": "1.0.14",
"exportName": "yidaUtils"
}
}
],
"componentsMap": [
{
"package": "@ali/vc-deep-yida",
"version": "1.5.169",
"componentName": "Component"
},
{
"package": "@ali/vc-deep-yida",
"version": "1.5.169",
"componentName": "Image"
},
{
"package": "@ali/vc-deep-yida",
"version": "1.5.169",
"componentName": "Icon"
},
{
"package": "@ali/vc-deep-yida",
"version": "1.5.169",
"componentName": "Div"
},
{
"package": "@ali/vc-deep-yida",
"version": "1.5.169",
"componentName": "Text"
}
],
"componentsTree": [
{
"componentName": "Component",
"id": "node_ocklkhluze1",
"props": {
"__designerConfig__": {
"disableCopy": false
},
"mobileSlot": {
"type": "JSBlock",
"value": {
"componentName": "Slot",
"props": {
"slotTitle": "mobile容器",
"slotName": "mobileSlot"
}
}
},
"__useAdvancedPropTypes__": false,
"className": "component_l1bqb5i8",
"__propTypes__": [
{
"supportVariable": true,
"defaultValue": "[\n {\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n }\n]",
"display": "block",
"name": "data",
"__batchEditFormatToLines__": {
"compiled": "function main(){\n \n 'use strict';\n\nvar __compiledFunc__ = function batchEditFormatToLines(items) {\n return (items || []).map(function (item) {\n var title = item.title,\n url = item.url,\n image = item.image,\n iconfontSymbol = item.iconfontSymbol,\n iconfontSize = item.iconfontSize,\n iconfontName = item.iconfontName;\n\n var parts = [title.zh_CN || title, url, image, iconfontSymbol, iconfontSize, iconfontName];\n return parts.join(' | ');\n });\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function batchEditFormatToLines(items) {\n return (items || []).map((item) => {\n const {\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n } = item;\n const parts = [\n title.zh_CN || title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n ];\n return parts.join(' | ');\n });\n}",
"type": "js",
"error": {},
"params": {}
},
"__batchEditFormatFromLines__": {
"compiled": "function main(){\n \n 'use strict';\n\nvar __compiledFunc__ = function batchEditFormatFromLines(lines) {\n var items = [];\n lines.forEach(function (line) {\n var _line$split$map = line.split(' | ').map(function (o, idx) {\n return o;\n }),\n title = _line$split$map[0],\n url = _line$split$map[1],\n image = _line$split$map[2],\n iconfontSymbol = _line$split$map[3],\n iconfontSize = _line$split$map[4],\n iconfontName = _line$split$map[5];\n\n var item = {\n title: title,\n url: url,\n image: image,\n iconfontSymbol: iconfontSymbol,\n iconfontSize: iconfontSize,\n iconfontName: iconfontName\n };\n\n items.push(item);\n });\n\n return items;\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function batchEditFormatFromLines(lines) {\n const items = [];\n lines.forEach((line) => {\n const [\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n ] = line.split(' | ').map((o, idx) => {\n return o;\n });\n\n const item = {\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n };\n\n items.push(item);\n });\n\n return items;\n}",
"type": "js",
"error": {},
"params": {}
},
"setterProps": {
"batchEditFormatToLines": {
"compiled": "function main(){\n \n 'use strict';\n\nvar __compiledFunc__ = function batchEditFormatToLines(items) {\n return (items || []).map(function (item) {\n var title = item.title,\n url = item.url,\n image = item.image,\n iconfontSymbol = item.iconfontSymbol,\n iconfontSize = item.iconfontSize,\n iconfontName = item.iconfontName;\n\n var parts = [title.zh_CN || title, url, image, iconfontSymbol, iconfontSize, iconfontName];\n return parts.join(' | ');\n });\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function batchEditFormatToLines(items) {\n return (items || []).map((item) => {\n const {\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n } = item;\n const parts = [\n title.zh_CN || title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n ];\n return parts.join(' | ');\n });\n}",
"type": "js",
"error": {},
"params": {}
},
"batchEdit": true,
"editable": true,
"checkField": false,
"configure": [
{
"supportVariable": true,
"defaultValue": {
"use": "zh_CN",
"zh_CN": "客户案例",
"type": "i18n"
},
"display": "block",
"name": "title",
"title": "标题",
"setter": "I18nSetter"
},
{
"supportVariable": true,
"defaultValue": "https://www.sohu.com/a/445996728_655472",
"display": "block",
"name": "url",
"title": "详情地址",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "image",
"title": "图片地址",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "iconfontSymbol",
"title": "IconfontSymbol",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "iconName",
"title": "Icon Name",
"setter": "TextSetter"
},
{
"supportVariable": true,
"defaultValue": "xxl",
"display": "block",
"name": "iconSize",
"title": "Icon Size",
"setter": "TextSetter"
}
],
"batchEditFormatFromLines": {
"compiled": "function main(){\n \n 'use strict';\n\nvar __compiledFunc__ = function batchEditFormatFromLines(lines) {\n var items = [];\n lines.forEach(function (line) {\n var _line$split$map = line.split(' | ').map(function (o, idx) {\n return o;\n }),\n title = _line$split$map[0],\n url = _line$split$map[1],\n image = _line$split$map[2],\n iconfontSymbol = _line$split$map[3],\n iconfontSize = _line$split$map[4],\n iconfontName = _line$split$map[5];\n\n var item = {\n title: title,\n url: url,\n image: image,\n iconfontSymbol: iconfontSymbol,\n iconfontSize: iconfontSize,\n iconfontName: iconfontName\n };\n\n items.push(item);\n });\n\n return items;\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function batchEditFormatFromLines(lines) {\n const items = [];\n lines.forEach((line) => {\n const [\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n ] = line.split(' | ').map((o, idx) => {\n return o;\n });\n\n const item = {\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n };\n\n items.push(item);\n });\n\n return items;\n}",
"type": "js",
"error": {},
"params": {}
}
},
"configure": [
{
"supportVariable": true,
"defaultValue": {
"use": "zh_CN",
"zh_CN": "客户案例",
"type": "i18n"
},
"display": "block",
"name": "title",
"title": "标题",
"setter": "I18nSetter"
},
{
"supportVariable": true,
"defaultValue": "https://www.sohu.com/a/445996728_655472",
"display": "block",
"name": "url",
"title": "详情地址",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "image",
"title": "图片地址",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "iconfontSymbol",
"title": "IconfontSymbol",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "iconName",
"title": "Icon Name",
"setter": "TextSetter"
},
{
"supportVariable": true,
"defaultValue": "xxl",
"display": "block",
"name": "iconSize",
"title": "Icon Size",
"setter": "TextSetter"
}
],
"title": "列表数据",
"type": "array",
"setter": "ListSetter",
"__batchEdit__": true
},
{
"__options__": [
{
"title": "1",
"value": "1"
},
{
"title": "2",
"value": "2"
},
{
"title": "3",
"value": "3"
},
{
"title": "4",
"value": "4"
},
{
"title": "5",
"value": "5"
},
{
"title": "6",
"value": "6"
},
{
"title": "7",
"value": "7"
},
{
"title": "8",
"value": "8"
},
{
"title": "9",
"value": "9"
},
{
"title": "10",
"value": "10"
}
],
"supportVariable": true,
"__defaultCode__": "function func() {\n // do something\n}",
"defaultValue": "3",
"display": "block",
"name": "snap",
"setterProps": {
"options": [
{
"title": "1",
"value": "1"
},
{
"title": "2",
"value": "2"
},
{
"title": "3",
"value": "3"
},
{
"title": "4",
"value": "4"
},
{
"title": "5",
"value": "5"
},
{
"title": "6",
"value": "6"
},
{
"title": "7",
"value": "7"
},
{
"title": "8",
"value": "8"
},
{
"title": "9",
"value": "9"
},
{
"title": "10",
"value": "10"
}
]
},
"title": "每行显示数量",
"type": "string",
"setter": "ChoiceSetter"
},
{
"supportVariable": true,
"defaultValue": "50",
"display": "block",
"name": "imageWidth",
"title": "图片宽度",
"type": "string",
"setter": "TextSetter"
},
{
"supportVariable": true,
"defaultValue": 50,
"display": "block",
"name": "imageHeight",
"setterProps": {},
"title": "图片高度",
"type": "number",
"setter": "NumberSetter"
},
{
"supportVariable": true,
"__defaultCode__": {
"compiled": "function main(){\n \n \"use strict\";\n\nvar __compiledFunc__ = function onItemClick(item) {\n this.utils.router.push(item.url, {}, true, true);\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function onItemClick(item) {\n this.utils.router.push(item.url, {}, true, true);\n}",
"type": "js",
"error": {}
},
"display": "block",
"name": "onItemClick",
"setterProps": {
"defaultCode": "function onItemClick(item) {\n this.utils.router.push(item.url, {}, true, true);\n}",
"defaultActionName": "func"
},
"title": "onItemClick",
"type": "function",
"setter": "ActionSetter"
}
],
"useDevice": false,
"__style__": {},
"fieldId": "symbol_klkhlycr"
},
"condition": true,
"css": ".image_l1bqb5i9 {\n width: 100%;\n}\n.div_l1bqb5ia {\n display: flex;\n justify-content: center;\n background-color: #fff;\n position: relative;\n cursor: pointer;\n border-radius: 6px 6px 0 0;\n align-items: center;\n padding: 20px 20px 0 20px;\n}\n.text_l1bqb5ib {\n color: rgb(102, 102, 102);\n font-size: 12px;\n text-align: center;\n}\n\n.vc-page .text_l1bqb5ib{\n font-size: 14px;\n}\n.div_l1bqb5ic {\n}\n.div_l1bqb5id {\n padding: 10px;\n}\n.div_l1bqb5ie {\n transition: all 0.2s ease-in-out;\n background-color: #fff;\n position: relative;\n border-radius: 6px;\n}\n\n.vc-page .div_l1bqb5ie:hover {\n box-shadow: 0 10px 16px rgb(0 0 0 / 14%);\n}\n\n.vc-page .div_l1bqb5ie:hover .imgHover{\n transform: translate(5px);\n transition: all 0.2 ease-in-out 0s;\n}\n.div_l1bqb5if{\n grid-area: span 1 / span 1;\n display: grid;\n gap: 16px;\n cursor: pointer;\n padding: 16px;\n}\n\n.gridTemplateColumns_1 {\n grid-template-columns :repeat(1, minmax(0px, 1fr));\n}\n\n.gridTemplateColumns_2 {\n grid-template-columns :repeat(2, minmax(0px, 1fr)); \n}\n\n.gridTemplateColumns_3 {\n grid-template-columns :repeat(3, minmax(0px, 1fr)); \n}\n\n.gridTemplateColumns_4 {\n grid-template-columns :repeat(4, minmax(0px, 1fr)); \n}\n\n.gridTemplateColumns_5 {\n grid-template-columns :repeat(5, minmax(0px, 1fr)); \n}\n.gridTemplateColumns_6 {\n grid-template-columns :repeat(6, minmax(0px, 1fr));\n}\n.gridTemplateColumns_7 {\n grid-template-columns :repeat(7, minmax(0px, 1fr)); \n}\n.gridTemplateColumns_8 {\n grid-template-columns :repeat(8, minmax(0px, 1fr)); \n}\n.gridTemplateColumns_9 {\n grid-template-columns :repeat(9, minmax(0px, 1fr)); \n}\n.gridTemplateColumns_10 {\n grid-template-columns :repeat(10, minmax(0px, 1fr)); \n}\n.image_l1bqb5ig {\n}\n.text_l1bqb5ih {\n font-family: PingFangSC-Regular;\n font-size: 17px;\n color: #160000;\n line-height: 24px;\n}\n.div_l1bqb5ii {\n display: flex;\n background: #f1f2f3;\n flex-wrap: wrap;\n width: 100%;\n min-height: 260px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.div_l1bqb5ij {\n background-color: #f2f3f5;\n}\n",
"flows": [],
"defaultProps": {},
"methods": {
"__initMethods__": {
"type": "js",
"source": "function (exports, module) { /*set actions code here*/ }",
"compiled": "function (exports, module) { /*set actions code here*/ }"
}
},
"propTypes": [
{
"supportVariable": true,
"defaultValue": "[\n {\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n },{\n \"title\": \"宜搭价格\",\n \"image\": \"https://p9.itc.cn/q_70/images03/20210122/127c256316024b88837f86b45c254f27.png\",\n \"url\": \"https://www.sohu.com/a/445996728_655472\"\n }\n]",
"display": "block",
"name": "data",
"__batchEditFormatToLines__": {
"compiled": "function main(){\n \n 'use strict';\n\nvar __compiledFunc__ = function batchEditFormatToLines(items) {\n return (items || []).map(function (item) {\n var title = item.title,\n url = item.url,\n image = item.image,\n iconfontSymbol = item.iconfontSymbol,\n iconfontSize = item.iconfontSize,\n iconfontName = item.iconfontName;\n\n var parts = [title.zh_CN || title, url, image, iconfontSymbol, iconfontSize, iconfontName];\n return parts.join(' | ');\n });\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function batchEditFormatToLines(items) {\n return (items || []).map((item) => {\n const {\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n } = item;\n const parts = [\n title.zh_CN || title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n ];\n return parts.join(' | ');\n });\n}",
"type": "js",
"error": {},
"params": {}
},
"__batchEditFormatFromLines__": {
"compiled": "function main(){\n \n 'use strict';\n\nvar __compiledFunc__ = function batchEditFormatFromLines(lines) {\n var items = [];\n lines.forEach(function (line) {\n var _line$split$map = line.split(' | ').map(function (o, idx) {\n return o;\n }),\n title = _line$split$map[0],\n url = _line$split$map[1],\n image = _line$split$map[2],\n iconfontSymbol = _line$split$map[3],\n iconfontSize = _line$split$map[4],\n iconfontName = _line$split$map[5];\n\n var item = {\n title: title,\n url: url,\n image: image,\n iconfontSymbol: iconfontSymbol,\n iconfontSize: iconfontSize,\n iconfontName: iconfontName\n };\n\n items.push(item);\n });\n\n return items;\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function batchEditFormatFromLines(lines) {\n const items = [];\n lines.forEach((line) => {\n const [\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n ] = line.split(' | ').map((o, idx) => {\n return o;\n });\n\n const item = {\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n };\n\n items.push(item);\n });\n\n return items;\n}",
"type": "js",
"error": {},
"params": {}
},
"setterProps": {
"batchEditFormatToLines": {
"compiled": "function main(){\n \n 'use strict';\n\nvar __compiledFunc__ = function batchEditFormatToLines(items) {\n return (items || []).map(function (item) {\n var title = item.title,\n url = item.url,\n image = item.image,\n iconfontSymbol = item.iconfontSymbol,\n iconfontSize = item.iconfontSize,\n iconfontName = item.iconfontName;\n\n var parts = [title.zh_CN || title, url, image, iconfontSymbol, iconfontSize, iconfontName];\n return parts.join(' | ');\n });\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function batchEditFormatToLines(items) {\n return (items || []).map((item) => {\n const {\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n } = item;\n const parts = [\n title.zh_CN || title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n ];\n return parts.join(' | ');\n });\n}",
"type": "js",
"error": {},
"params": {}
},
"batchEdit": true,
"editable": true,
"checkField": false,
"configure": [
{
"supportVariable": true,
"defaultValue": {
"use": "zh_CN",
"zh_CN": "客户案例",
"type": "i18n"
},
"display": "block",
"name": "title",
"title": "标题",
"setter": "I18nSetter"
},
{
"supportVariable": true,
"defaultValue": "https://www.sohu.com/a/445996728_655472",
"display": "block",
"name": "url",
"title": "详情地址",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "image",
"title": "图片地址",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "iconfontSymbol",
"title": "IconfontSymbol",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "iconName",
"title": "Icon Name",
"setter": "TextSetter"
},
{
"supportVariable": true,
"defaultValue": "xxl",
"display": "block",
"name": "iconSize",
"title": "Icon Size",
"setter": "TextSetter"
}
],
"batchEditFormatFromLines": {
"compiled": "function main(){\n \n 'use strict';\n\nvar __compiledFunc__ = function batchEditFormatFromLines(lines) {\n var items = [];\n lines.forEach(function (line) {\n var _line$split$map = line.split(' | ').map(function (o, idx) {\n return o;\n }),\n title = _line$split$map[0],\n url = _line$split$map[1],\n image = _line$split$map[2],\n iconfontSymbol = _line$split$map[3],\n iconfontSize = _line$split$map[4],\n iconfontName = _line$split$map[5];\n\n var item = {\n title: title,\n url: url,\n image: image,\n iconfontSymbol: iconfontSymbol,\n iconfontSize: iconfontSize,\n iconfontName: iconfontName\n };\n\n items.push(item);\n });\n\n return items;\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function batchEditFormatFromLines(lines) {\n const items = [];\n lines.forEach((line) => {\n const [\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n ] = line.split(' | ').map((o, idx) => {\n return o;\n });\n\n const item = {\n title,\n url,\n image,\n iconfontSymbol,\n iconfontSize,\n iconfontName\n };\n\n items.push(item);\n });\n\n return items;\n}",
"type": "js",
"error": {},
"params": {}
}
},
"configure": [
{
"supportVariable": true,
"defaultValue": {
"use": "zh_CN",
"zh_CN": "客户案例",
"type": "i18n"
},
"display": "block",
"name": "title",
"title": "标题",
"setter": "I18nSetter"
},
{
"supportVariable": true,
"defaultValue": "https://www.sohu.com/a/445996728_655472",
"display": "block",
"name": "url",
"title": "详情地址",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "image",
"title": "图片地址",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "iconfontSymbol",
"title": "IconfontSymbol",
"setter": "TextSetter"
},
{
"supportVariable": true,
"display": "block",
"name": "iconName",
"title": "Icon Name",
"setter": "TextSetter"
},
{
"supportVariable": true,
"defaultValue": "xxl",
"display": "block",
"name": "iconSize",
"title": "Icon Size",
"setter": "TextSetter"
}
],
"title": "列表数据",
"type": "array",
"setter": "ListSetter",
"__batchEdit__": true
},
{
"__options__": [
{
"title": "1",
"value": "1"
},
{
"title": "2",
"value": "2"
},
{
"title": "3",
"value": "3"
},
{
"title": "4",
"value": "4"
},
{
"title": "5",
"value": "5"
},
{
"title": "6",
"value": "6"
},
{
"title": "7",
"value": "7"
},
{
"title": "8",
"value": "8"
},
{
"title": "9",
"value": "9"
},
{
"title": "10",
"value": "10"
}
],
"supportVariable": true,
"__defaultCode__": "function func() {\n // do something\n}",
"defaultValue": "3",
"display": "block",
"name": "snap",
"setterProps": {
"options": [
{
"title": "1",
"value": "1"
},
{
"title": "2",
"value": "2"
},
{
"title": "3",
"value": "3"
},
{
"title": "4",
"value": "4"
},
{
"title": "5",
"value": "5"
},
{
"title": "6",
"value": "6"
},
{
"title": "7",
"value": "7"
},
{
"title": "8",
"value": "8"
},
{
"title": "9",
"value": "9"
},
{
"title": "10",
"value": "10"
}
]
},
"title": "每行显示数量",
"type": "string",
"setter": "ChoiceSetter"
},
{
"supportVariable": true,
"defaultValue": "50",
"display": "block",
"name": "imageWidth",
"title": "图片宽度",
"type": "string",
"setter": "TextSetter"
},
{
"supportVariable": true,
"defaultValue": 50,
"display": "block",
"name": "imageHeight",
"setterProps": {},
"title": "图片高度",
"type": "number",
"setter": "NumberSetter"
},
{
"supportVariable": true,
"__defaultCode__": {
"compiled": "function main(){\n \n \"use strict\";\n\nvar __compiledFunc__ = function onItemClick(item) {\n this.utils.router.push(item.url, {}, true, true);\n};\n return __compiledFunc__.apply(this, arguments);\n }",
"source": "function onItemClick(item) {\n this.utils.router.push(item.url, {}, true, true);\n}",
"type": "js",
"error": {}
},
"display": "block",
"name": "onItemClick",
"setterProps": {
"defaultCode": "function onItemClick(item) {\n this.utils.router.push(item.url, {}, true, true);\n}",
"defaultActionName": "func"
},
"title": "onItemClick",
"type": "function",
"setter": "ActionSetter"
}
],
"dataSource": {
"offline": [],
"globalConfig": {},
"online": [
{
"isReadonly": true,
"formUuid": "LCC-6TB1-CV0YQJ9OWF084KE7RCCV1-5C4BRRZK-C",
"name": "urlParams",
"description": "当前页面地址的参数：如 aliwork.com/APP_xxxx/workbench?id=1&name=宜搭，可通过 this.state.urlParams.name 获取到宜搭",
"id": "7TA66C71-VIP00SD1BFFCN8DCY22M3-3XILSY4L-Q2",
"protocal": "URI"
}
],
"list": [
{
"isReadonly": true,
"formUuid": "LCC-6TB1-CV0YQJ9OWF084KE7RCCV1-5C4BRRZK-C",
"name": "urlParams",
"description": "当前页面地址的参数：如 aliwork.com/APP_xxxx/workbench?id=1&name=宜搭，可通过 this.state.urlParams.name 获取到宜搭",
"id": "7TA66C71-VIP00SD1BFFCN8DCY22M3-3XILSY4L-Q2",
"protocal": "URI"
}
],
"sync": true
},
"lifeCycles": {
"constructor": {
"type": "js",
"compiled": "function constructor() {\nvar module = { exports: {} };\nvar _this = this;\nthis.__initMethods__(module.exports, module);\nObject.keys(module.exports).forEach(function(item) {\n if(typeof module.exports[item] === 'function'){\n _this[item] = module.exports[item];\n }\n});\n\n}",
"source": "function constructor() {\nvar module = { exports: {} };\nvar _this = this;\nthis.__initMethods__(module.exports, module);\nObject.keys(module.exports).forEach(function(item) {\n if(typeof module.exports[item] === 'function'){\n _this[item] = module.exports[item];\n }\n});\n\n}"
}
},
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Div",
"id": "node_ocl192b59u3",
"props": {
"useFieldIdAsDomId": false,
"width": "",
"customClassName": "",
"behavior": "NORMAL",
"__style__": {},
"fieldId": "div_l192cicp",
"height": ""
},
"condition": true,
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Div",
"id": "node_ocl0uwke3b6",
"props": {
"useFieldIdAsDomId": false,
"width": "",
"customClassName": "",
"className": "div_l1bqb5ij",
"behavior": "NORMAL",
"__style__": ":root {\n background-color: #f2f3f5;\n}\n",
"fieldId": "div_l0uws5np",
"height": ""
},
"condition": true,
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Div",
"id": "node_ocklkhluzev",
"props": {
"useFieldIdAsDomId": true,
"width": "",
"customClassName": {
"type": "variable",
"value": "",
"variable": "`gridTemplateColumns_${props.snap}`\n"
},
"className": "div_l1bqb5if",
"behavior": "NORMAL",
"__style__": ":root{\n grid-area: span 1 / span 1;\n display: grid;\n gap: 16px;\n cursor: pointer;\n padding: 16px;\n}\n\n.gridTemplateColumns_1 {\n grid-template-columns :repeat(1, minmax(0px, 1fr));\n}\n\n.gridTemplateColumns_2 {\n grid-template-columns :repeat(2, minmax(0px, 1fr)); \n}\n\n.gridTemplateColumns_3 {\n grid-template-columns :repeat(3, minmax(0px, 1fr)); \n}\n\n.gridTemplateColumns_4 {\n grid-template-columns :repeat(4, minmax(0px, 1fr)); \n}\n\n.gridTemplateColumns_5 {\n grid-template-columns :repeat(5, minmax(0px, 1fr)); \n}\n.gridTemplateColumns_6 {\n grid-template-columns :repeat(6, minmax(0px, 1fr));\n}\n.gridTemplateColumns_7 {\n grid-template-columns :repeat(7, minmax(0px, 1fr)); \n}\n.gridTemplateColumns_8 {\n grid-template-columns :repeat(8, minmax(0px, 1fr)); \n}\n.gridTemplateColumns_9 {\n grid-template-columns :repeat(9, minmax(0px, 1fr)); \n}\n.gridTemplateColumns_10 {\n grid-template-columns :repeat(10, minmax(0px, 1fr)); \n}\n",
"fieldId": "div_kifdj40j",
"height": ""
},
"condition": {
"type": "variable",
"value": true,
"variable": "props.data && props.data.length > 0"
},
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Div",
"id": "node_ocl0ud1qly2",
"props": {
"useFieldIdAsDomId": true,
"onClick": {
"type": "JSExpression",
"value": "this.utils.legaoBuiltin.execEventFlow.bind(this, [this.onItemClick])",
"events": [
{
"name": "onItemClick",
"id": "onItemClick",
"params": {},
"type": "actionRef",
"uuid": "1647855506694_0"
}
]
},
"width": "",
"customClassName": "",
"className": "div_l1bqb5ie",
"behavior": "NORMAL",
"__style__": ":root {\n transition: all 0.2s ease-in-out;\n background-color: #fff;\n position: relative;\n border-radius: 6px;\n}\n\n.vc-page :root:hover {\n box-shadow: 0 10px 16px rgb(0 0 0 / 14%);\n}\n\n.vc-page :root:hover .imgHover{\n transform: translate(5px);\n transition: all 0.2 ease-in-out 0s;\n}\n",
"fieldId": "div_l0ud8e32",
"height": ""
},
"condition": true,
"loop": {
"type": "variable",
"value": [],
"variable": "props.data || []"
},
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Div",
"id": "node_ocl0ud1qly3",
"props": {
"useFieldIdAsDomId": false,
"width": "",
"customClassName": "",
"className": "div_l1bqb5ia",
"behavior": "NORMAL",
"__style__": ":root {\n display: flex;\n justify-content: center;\n background-color: #fff;\n position: relative;\n cursor: pointer;\n border-radius: 6px 6px 0 0;\n align-items: center;\n padding: 20px 20px 0 20px;\n}\n",
"fieldId": "div_l0ud8e2q",
"height": ""
},
"condition": true,
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Image",
"id": "node_ocl0ud1qly4",
"props": {
"preview": false,
"autoHeight": false,
"src": {
"type": "variable",
"value": "https://img.alicdn.com/imgextra/i2/O1CN01POJBbe1dp7QPAXOpa_!!6000000003784-2-tps-571-325.png",
"variable": "item.image"
},
"alt": "Image 404",
"className": "image_l1bqb5i9",
"title": {
"type": "variable",
"variable": "item.title"
},
"fit": "cover",
"round": "0",
"width": {
"type": "variable",
"value": 48,
"variable": "props.imageWidth"
},
"autoWidth": false,
"roundRadius": "",
"__style__": ":root {\n width: 100%;\n}\n",
"height": {
"type": "variable",
"value": 48,
"variable": "props.imageHeight"
},
"fieldId": "image_l0ud8e2p"
},
"condition": {
"type": "variable",
"value": true,
"variable": "item.image && !item.iconName"
},
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": ""
},
{
"componentName": "Icon",
"id": "node_ocl192b59u2",
"props": {
"size": {
"type": "variable",
"value": "xxxl",
"variable": "item.iconSize"
},
"type": {
"useType": false,
"baseType": "smile",
"iconfontSymbol": {
"type": "variable",
"value": "",
"variable": "item.iconfontSymbol"
},
"otherType": {
"type": "variable",
"value": "smile",
"variable": "item.iconName"
}
},
"__style__": {},
"fieldId": "icon_l192cico"
},
"condition": {
"type": "variable",
"value": true,
"variable": "item.iconName"
},
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": ""
}
]
},
{
"componentName": "Div",
"id": "node_ocl0ud1qly5",
"props": {
"useFieldIdAsDomId": false,
"width": "",
"customClassName": "",
"className": "div_l1bqb5id",
"behavior": "NORMAL",
"__style__": ":root {\n padding: 10px;\n}\n",
"fieldId": "div_l0ud8e31",
"height": ""
},
"condition": true,
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Div",
"id": "node_ocl0ud1qlyg",
"props": {
"useFieldIdAsDomId": false,
"width": "",
"customClassName": "",
"className": "div_l1bqb5ic",
"behavior": "NORMAL",
"__style__": ":root {\n}\n",
"fieldId": "div_l0ud8e33",
"height": ""
},
"condition": true,
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Text",
"id": "node_ocl0ud1qlyh",
"props": {
"maxLine": 0,
"showTitle": false,
"contentPaddingMobile": "0",
"className": "text_l1bqb5ib",
"behavior": "NORMAL",
"content": {
"type": "variable",
"value": {
"use": "zh_CN",
"en_US": "Tips content",
"zh_CN": "宜搭价格",
"type": "i18n"
},
"variable": "item.title"
},
"__style__": ":root {\n color: rgb(102, 102, 102);\n font-size: 12px;\n text-align: center;\n}\n\n.vc-page :root{\n font-size: 14px;\n}\n",
"fieldId": "text_l0ud8e34"
},
"condition": true,
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": ""
}
]
}
]
}
]
}
]
},
{
"componentName": "Div",
"id": "node_ocl11upczd9",
"props": {
"useFieldIdAsDomId": false,
"width": "",
"customClassName": "",
"className": "div_l1bqb5ii",
"behavior": "NORMAL",
"__style__": ":root {\n display: flex;\n background: #f1f2f3;\n flex-wrap: wrap;\n width: 100%;\n min-height: 260px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n",
"fieldId": "div_kxjtsnut",
"height": ""
},
"condition": {
"type": "variable",
"variable": "props.data.length === 0"
},
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": "",
"children": [
{
"componentName": "Image",
"id": "node_ocl11upczda",
"props": {
"preview": false,
"autoHeight": false,
"src": "https://img.alicdn.com/imgextra/i3/O1CN01EMpuq41EL1178gXoi_!!6000000000334-2-tps-360-360.png",
"alt": "Image 404",
"className": "image_l1bqb5ig",
"fit": "cover",
"round": "0",
"width": 180,
"autoWidth": false,
"roundRadius": "0",
"__style__": ":root {\n}\n",
"height": 180,
"fieldId": "image_l11ux3fx"
},
"condition": true,
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": ""
},
{
"componentName": "Text",
"id": "node_ocl11upczdb",
"props": {
"maxLine": 0,
"showTitle": false,
"contentPaddingMobile": "0",
"className": "text_l1bqb5ih",
"behavior": "NORMAL",
"content": {
"use": "zh_CN",
"en_US": "Tips content",
"zh_CN": "暂无数据",
"type": "i18n"
},
"__style__": ":root {\n font-family: PingFangSC-Regular;\n font-size: 17px;\n color: #160000;\n line-height: 24px;\n}\n",
"fieldId": "text_l11ux3fy"
},
"condition": true,
"loopArgs": [
"",
""
],
"hidden": false,
"title": "",
"isLocked": false,
"conditionGroup": ""
}
]
}
]
}
]
}
]
}
],
"actions": {
"module": {
"compiled": "\"use strict\";\n\nexports.__esModule = true;\nexports.onItemClick = onItemClick;\n\n// 每项的点击事件\nfunction onItemClick(event) {\n if (this.props.onItemClick) {\n this.props.onItemClick(this.item);\n } else if (this.item.url) {\n this.utils.router.push(this.item.url, {}, true, true);\n }\n}\n",
"source": "\n// 每项的点击事件\nexport function onItemClick(event) {\n if (this.props.onItemClick) {\n this.props.onItemClick(this.item);\n } else if (this.item.url) {\n this.utils.router.push(this.item.url,{}, true, true);\n }\n} \n"
},
"type": "FUNCTION",
"list": [
{
"id": "onItemClick",
"title": "onItemClick"
}
]
}
}
This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.
Is this document helpful?