Appearance
专项答疑
用按钮控制元素显隐
控制显隐意味着需要监听用户的鼠标事件，控制某一变量的值改变，再给元素绑定渲染条件为这一变量相关的不同值来控制其是否显示。
具体步骤：
- 编写元素，包含用于监听鼠标事件的元素和需要被控制显隐的元素
- 创建变量，确定默认值，如
isShow = true(写在全局模型的data中) - 监听交互，修改变量，如监听点击事件
this.isShow = !this.isShow; - 编写渲染条件
isShow
实例代码Json（粘贴到新页面根节点json即可查看）：
json
{
"version": "1.0",
"type": "div",
"title": "容器",
"id": "5KteFRxxNeiqX_0-av8IQ",
"options": {
"style": {
"height": "100%"
}
},
"children": [
{
"type": "el-button",
"title": "按钮",
"id": "0-TyKtLL1o7S319_YR-Nl",
"options": {
"props": {
"size": "mini"
}
},
"children": [
{
"type": "span",
"options": {
"domProps": {
"textContent": "切换显隐"
}
},
"id": "YfKVof_J8An2CPUS-paUS"
}
],
"events": [
{
"modifiers": [],
"name": "click",
"handler": "f:function(event){\n this.isShow = !this.isShow;\n}"
}
]
},
{
"type": "v-chart",
"title": "页面",
"id": "QV6_gu726SOuUClJJ_L6i",
"options": {
"style": {
"minHeight": "150px"
},
"props": {
"option": {
"grid": {
"left": 16,
"right": 16,
"top": 16,
"bottom": 16
},
"xAxis": [
{
"show": false,
"type": "category",
"boundaryGap": false,
"axisLabel": {},
"axisLine": {
"show": false
},
"axisTick": {
"show": false
}
}
],
"yAxis": [
{
"axisLabel": {},
"show": false,
"name": "",
"splitLine": {
"show": false
}
}
],
"tooltip": {
"show": true,
"trigger": "axis",
"valueFormatter": "f:d=>d.toFixed(2)+'万元'",
"axisPointer": {
"label": {
"show": false
},
"lineStyle": {
"type": "solid",
"opacity": 0.5
},
"animation": false
}
},
"series": [
{
"type": "line",
"smooth": true,
"lineStyle": {
"width": 4
},
"endLabel": {
"show": true,
"align": "right",
"verticalAlign": "bottom",
"distance": 0,
"offset": [
0,
-10
],
"fontSize": 16,
"formatter": "{b}"
},
"areaStyle": {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0,
"color": "rgba(26,129,255, 0.45)"
},
{
"offset": 1,
"color": "rgba(26,129,255, 0)"
}
],
"global": false
}
}
}
],
"dataset": {
"source": [
[
"时间",
"杭州"
],
[
"1月",
30
],
[
"2月",
50
],
[
"3月",
90
],
[
"4月",
80
],
[
"5月",
90
],
[
"6月",
120
],
[
"7月",
140
],
[
"8月",
100
],
[
"9月",
120
]
]
},
"animation": false
},
"theme": "zk-light",
"autoresize": true
}
},
"children": [],
"setter": "chart-editor",
"definition": "// 模型定义规范与Vue组件定义相同\n{\n data(){\n return {\n // 此处定义模型变量\n \n }\n },\n created(){\n this.$js(\"zk-light\", \"http://zhqtkz.cn/zktx/js/zk-light.js\")\n }\n}\n",
"setterNamespace": "app/lc-pcchart",
"vif": "v:isShow"
}
],
"definition": "{\n data(){\n return {\n isShow: true\n }\n }\n}\n",
"style": ""
}