Appearance
专项答疑
怎么实现一个存在两种状态的Tab按钮，并实现点击切换内容
- 使用“自定义Tab”创建一个Tab
- 创建数量等于Tab的标签页
- 创建一个变量用于关联Tab并用于标签页的渲染条件
- 绑定变量和Tab标签（设置初始值和监听组件change事件更新变量值）
- 标签页添加渲染条件
实现案例：
json
{
"version": "1.0",
"type": "div",
"title": "容器",
"id": "5KteFRxxNeiqX_0-av8IQ",
"options": {
"style": {
"height": "100%"
}
},
"children": [
{
"type": "UIBlock",
"id": "JdGuls3jmlIsrE8PY_l6N",
"options": {
"props": {
"code": "foa-tab-base",
"namespace": "app/lc-zkcomponents"
},
"attrs": {
"arr": [
{
"value": "1",
"label": "执行率"
},
{
"value": "2",
"label": "问题数"
},
{
"value": "3",
"label": "评价"
}
],
"option": {
"select": "1",
"vertical": false,
"padding": "12px 20px",
"margin": "0 8px",
"radius": "4px",
"fontSize": "18px",
"fonwWeight": "normal",
"background": "#1b2f4d",
"activeBackground": "#024ba5",
"borderColor": "#1a61bb",
"activeBorderColor": "#1a61bb",
"color": "#fff",
"activeColor": "#fff"
}
},
"style": {
"marginBottom": "10px"
}
},
"setter": "foa-tab-setter",
"events": [
{
"modifiers": [],
"name": "change",
"handler": "f:function(value){\n this.tabValue = value\n}"
}
],
"title": "自定义Tab",
"setterNamespace": "app/lc-zkcomponents"
},
{
"type": "div",
"title": "标签页1",
"id": "WOeNPDqaKeiwWYWpcQdGL",
"options": {
"domProps": {
"textContent": "标签页1"
},
"style": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center",
"height": "300px",
"backgroundColor": "rgba(221, 221, 221, 1)"
}
},
"children": [],
"vif": "v:tabValue == '1'"
},
{
"type": "div",
"title": "标签页2",
"id": "xSSNiYfU-kM5nZPdI9ncY",
"options": {
"domProps": {
"textContent": "标签页2"
},
"style": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center",
"height": "300px",
"backgroundColor": "rgba(221, 221, 221, 1)"
}
},
"children": [],
"vif": "v:tabValue == '2'"
},
{
"type": "div",
"title": "标签页3",
"id": "ofNzQtu92WNyGiWjSwtgJ",
"options": {
"domProps": {
"textContent": "标签页3"
},
"style": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center",
"height": "300px",
"backgroundColor": "rgba(221, 221, 221, 1)"
}
},
"children": [],
"vif": "v:tabValue == '3'"
}
],
"definition": "{\n data(){\n return {\n tabValue: '1'\n }\n }\n}\n",
"style": ""
}