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
Uh oh!
There was an error while loading. Please reload this page.
-
left和right这两个插槽要怎么配罝json?
TinySplit.json
Beta Was this translation helpful? Give feedback.
All reactions