描述问题：
3.5.2版，className里使用表达式动态添加样式类失效，3.3.0以前有效。
菜单中的btn-status样式类应该默认是第2个有下划线，第1、3是没有的。
截图或视频：
如何复现（请务必完整填写下面内容）：
- 你是如何使用 amis 的？
sdk、npm或其他... - amis 版本是什么？请先在最新 beta 版本测试问题是否存在
amis@3.5.2 - 粘贴有问题的完整
amis schema代码：
{
"type": "page",
"body": [
{
"type": "container",
"id": "u:214049d3d44a",
"style": {
"boxShadow": " 0px 0px 0px 0px transparent",
"position": "fixed",
"display": "block"
},
"body": [
{
"type": "flex",
"items": [
{
"type": "container",
"body": [
],
"id": "u:767e350bfd1c",
"style": {
"align-self": "center",
"position": "static",
"display": "block",
"boxShadow": " 0px 0px 0px 0px transparent",
"flex": "0 0 auto"
},
"isFixedHeight": false,
"themeCss": {
"baseControlClassName": {
"boxShadow:default": " 0px 0px 0px 0px transparent"
}
}
},
{
"type": "container",
"body": [
{
"type": "button-group",
"buttons": [
{
"type": "button",
"label": "应用市场",
"id": "u:2fba42a0aaa2",
"className": {
"btn-status": "${pageIndex == '1' ? false:false}"
},
"onEvent": {
"click": {
"actions": [
{
"actionType": "url",
"args": {
"url": "/open/appStore/appStore",
"blank": false
}
}
]
}
},
"level": "default"
},
{
"type": "button",
"label": "解决方案",
"level": "default",
"id": "u:956c287002ca",
"className": {
"btn-status": "this.pageIndex == '2' || this.pageIndex == '999'"
},
"onEvent": {
"click": {
"actions": [
{
"actionType": "url",
"args": {
"url": "/open/appStore/appSolution",
"blank": false
}
}
]
}
}
},
{
"type": "button",
"label": "联系我们",
"level": "default",
"id": "u:956c287002ca",
"className": {
"btn-status": "this.pageIndex == '3'"
},
"onEvent": {
"click": {
"actions": [
{
"actionType": "url",
"args": {
"url": "/open/appStore/connectUs",
"blank": false
}
}
]
}
}
}
],
"id": "u:32e37ca8e88e",
"vertical": false,
"tiled": false,
"className": "nav-btns",
"btnClassName": ""
}
],
"id": "u:3b5950ef5e96",
"style": {
"display": "flex",
"flex": 1,
"margin-left": "110px",
"position": "static",
"flexWrap": "nowrap",
"boxShadow": " 0px 0px 0px 0px transparent"
},
"isFixedHeight": false,
"themeCss": {
"baseControlClassName": {
"boxShadow:default": " 0px 0px 0px 0px transparent",
"padding-and-margin:default": {
"margin-left": "110px"
}
}
}
}
],
"id": "u:10de1966a745",
"justify": "space-between",
"alignItems": "stretch",
"direction": "row",
"style": {
"height": "64px",
"padding": "0 40px",
"position": "static",
"flexWrap": "nowrap",
"boxShadow": " 0px 0px 0px 0px transparent"
},
"isFixedHeight": false,
"isFixedWidth": false,
"themeCss": {
"baseControlClassName": {
"boxShadow:default": " 0px 0px 0px 0px transparent",
"padding-and-margin:default": {
"padding": "0 40px"
}
}
}
}
],
"className": "website-top",
"hidden": false,
"isFixedHeight": false,
"isFixedWidth": false,
"hiddenOn": "${isMobile}",
"themeCss": {
"baseControlClassName": {
"boxShadow:default": " 0px 0px 0px 0px transparent"
}
}
},
{
"type": "container",
"id": "u:140678574875",
"body": [
],
"className": "",
"style": {
"position": "absolute",
"display": "block",
"boxShadow": " 0px 0px 0px 0px transparent",
"maxWidth": "1180px",
"margin": "0 auto",
"top": "64px",
"margin-top": "30px",
"margin-left": "calc(50% - 590px)",
"width": "1180px"
},
"isFixedHeight": false,
"isFixedWidth": false,
"wrapperComponent": "div",
"hiddenOn": "${pageIndex!='999' || isMobile}",
"themeCss": {
"baseControlClassName": {
"boxShadow:default": " 0px 0px 0px 0px transparent",
"padding-and-margin:default": {
"margin": "0 auto",
"margin-top": "30px",
"margin-left": "calc(50% - 590px)"
}
}
}
}
],
"id": "u:5eeeba2a6155",
"data": {
"status": 3,
"pageIndex": "2",
"listIndex": 0
},
"asideResizor": false,
"style": {
"height": "auto",
"boxShadow": " 0px 0px 0px 0px transparent",
"position": "relative"
},
"pullRefresh": {
"disabled": true
},
"css": {
".content-html p": {
"padding": "10px"
},
".content-html img": {
"max-height": "100vh",
"max-width": "100vw",
"object-fit": "contain"
},
".cxd-Image--thumb": {
"padding": "0px",
"border": "none"
},
".detail-carousel .cxd-Grid": {
"margin-left": "0px",
"margin-right": "0px"
},
".left-img .cxd-Image": {
"border": "none"
},
".detail-carousel .cxd-Carousel-leftArrow": {
"left": "-20px !important"
},
".class6c32d2597085": {
"border": "none !important"
},
".class6c32d2597085 .tox-statusbar": {
"display": "none"
},
".classbd23dc1d8a7c .cxd-Image": {
"border": "none"
},
".app-info-list .cxd-Divider": {
"margin": "5px 0px"
},
".card-bg": {
"background-image": "linear-gradient(to bottom, #f1f3fe, #ffffff)"
},
".website-top .nav-btns, .website-top .nav-btns .cxd-Button": {
"height": "100%"
},
".website-top": {
"width": "100%",
"border": "0px",
"background-color": "rgba(255, 255, 255, 1)",
"backdrop-filter": "blur(4px)",
"left": "0",
"box-shadow": "0px 4px 8px rgba(0, 0, 0, 0.1)",
"position": "fixed",
"z-index": "999"
},
".btn-status": {
"border": "0px",
"border-bottom": "2px solid #3778fa !important",
"color": "#3778fa",
"border-radius": "0"
},
".website-top .cxd-Button": {
"width": "120px",
"border": "0",
"background-color": "rgba(255, 255, 255, 0)",
"font-size": "15px",
"font-weight": "500"
},
".website-top .cxd-Image": {
"border": "0px"
},
".website": {
"padding": "0px"
},
"amis-container": {
"padding": "0px"
},
".website-top .cxd-Button:hover": {
"border-left-width": "0px !important",
"border-top-width": "0px !important",
"border-right-width": "0px !important",
"border-bottom-width": "0px !important"
},
".modal-carousel .cxd-Image": {
"border": "0px"
},
".modal-carousel .cxd-Carousel-dotsControl": {
"bottom": "-25px"
},
".detail-carousel .cxd-Carousel-dotsControl": {
"bottom": "-5px !important"
},
".modal-carousel .cxd-Carousel-leftArrow": {
"width": "5%",
"left": "-30px"
},
".modal-carousel .cxd-Carousel-rightArrow": {
"width": "5%",
"right": "-30px"
},
".label-default": {
"background": "#2468f2"
},
".self-list-control .cxd-ListControl-items .cxd-ListControl-item": {
"boder": "none",
"width": "auto",
"position": "relative",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"-ms-user-select": "none",
"user-select": "none",
"font-size": "14px",
"display": "inline-block",
"vertical-align": "middle",
"margin": "0 0.3rem",
"border": "none",
"background": "transparent",
"color": "#151b26",
"-webkit-transition": "none",
"transition": "none",
"max-width": "13.625rem",
"padding": "0 0.3rem"
},
".self-list-control .cxd-ListControl-items .cxd-ListControl-item.is-active, .self-list-control .cxd-ListControl-items .cxd-ListControl-item:hover:active": {
"border": "none",
"color": "#2468f2"
},
".self-list-control .cxd-ListControl-items .cxd-ListControl-item.is-active:before, .self-list-control .cxd-ListControl-items .cxd-ListControl-item:hover:active:before, .self-list-control .cxd-ListControl-items .cxd-ListControl-item.is-active:after, .self-list-control .cxd-ListControl-items .cxd-ListControl-item:hover:active:after": {
"display": "none"
},
".classffbd084cf9d6 .cxd-Carousel-container": {
"overflow": "visible"
},
".form-bg-img": {
"background-image": "linear-gradient(180deg, #d2e7ff 0%, #deedff 50%, #ffffff 100%)",
"padding": "27px 27px 13px 27px",
"box-shadow": "0px 0px 20px 5px rgba(33, 98, 227, 0.1)!important"
},
".mobile-container .cxd-Container--xs, .cxd-Wrapper--xs": {
"padding": "0px"
},
".detail-carousel .cxd-Carousel-rightArrow": {
"right": "-20px !important"
},
".detail-carousel .cxd-Grid-col--sm4": {
"padding": "0px !important"
},
".solution-container .cxd-Grid-col--sm4": {
"padding-left": "0px",
"padding-right": "0px"
},
".solution-container .cxd-Grid": {
"margin-left": "0px",
"margin-right": "0px"
},
".small-input .cxd-Select-value": {
"font-size": "12px"
},
".content-html p > img": {
"margin-left": "-10px"
},
".small-input .cxd-Select.is-mobile .cxd-Select-valueWrap": {
"text-align": "center"
}
},
"regions": [
"body"
],
"themeCss": {
"baseControlClassName": {
"boxShadow:default": " 0px 0px 0px 0px transparent"
}
},
"bodyClassName": "website",
"onEvent": {
"init": {
"weight": 0,
"actions": [
{
"script": "/* 自定义JS使用说明：\n * 1.动作执行函数doAction，可以执行所有类型的动作\n * 2.通过上下文对象context可以获取当前组件实例，例如context.props可以获取该组件相关属性\n * 3.事件对象event，在doAction之后执行event.stopPropagation();可以阻止后续动作执行\n*/\ndoAction({\n componentId: \"u:5eeeba2a6155\",\n groupType: \"component\",\n actionType: \"setValue\",\n args: {\n \"value\": {\n \"origin\": window.location.origin,\n \"isMobile\": /Mobi|Android|iPhone/i.test(navigator.userAgent)\n }\n }\n});\n",
"actionType": "custom"
}
]
}
}
}
2条答案
按热度按时间oxcyiej71#
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.
qncylg1j2#
通过在源码里调试找到原因：
原因是这个组件要是像buttonGroup这种里面有子元素的（buttons），当buttons里的按钮配置className表达式会失效。失效的原因是10.17(commit ID: 7f851fe )提交的代码修改filter-schema.ts里的过滤逻辑中，添加了一个优先props的条件，但在buttonGroup里渲染buttons时，进入到这个判断时，props里的className好像是已经计算好了表达式的结果（但结果是永远为true)，所以buttons里的className就会无视表达式，永远加上class。
目前我自己的处理方法里在filter-schema.ts里的这个位置加特定类型组件的判断或去掉。。