Replies: 2 comments
-
{
"materials": {
"components": [
{
"name": {
"zh_CN": "面板分割"
},
//...
"schema': {
// 这里配置右侧面板显示插槽开关
"slots": {
"bottom": {
"label": {
"zh_CN": "下面板插槽"
}
},
"left": {
"label": {
"zh_CN": "左面板插槽"
}
},
"right": {
"label": {
"zh_CN": "右面板插槽"
}
},
"top": {
"label": {
"zh_CN": "上面板插槽"
}
},
"trigger": {
"label": {
"zh_CN": "拖拽插槽"
}
}
}
}
}
]
}
} {
"snippets": {
//...
{
"name": {
"zh_CN": "面板分割"
},
"icon": "input",
"screenshot": "",
"snippetName": "TinySplit",
"schema": {
"componentName": "Template",
// 这里预置 children。避免拖拽出来不可见
"children": [
{
"componentName": "Template",
"props": {
"slot": "left"
},
"children": [
{
"componentName": "div",
"children": [
{
"componentName": "div"
}
]
}
]
},
{
"componentName": "Template",
"props": {
"slot": "right"
},
"children": [
{
"componentName": "div",
"children": [
{
"componentName": "div"
}
]
}
]
}
]
}
}
}
} 注意点:在OpentinyVue 官方示例中,还需要有一个额外的父容器,指定高度(不然拖拽出来不可见) <template>
// 父容器指定高度
<div style="height:200px">
<tiny-split>
<template #left>
<div class="demo-split-pane">左面板</div>
</template>
<template #right>
<div class="demo-split-pane">右面板</div>
</template>
</tiny-split>
</div>
</template> |
Beta Was this translation helpful? Give feedback.
0 replies
-
按照配置已经可以了。thanks |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
left和right这两个插槽要怎么配罝json?
TinySplit.json
Beta Was this translation helpful? Give feedback.
All reactions