上下结构，通常是上面是头部操作栏区域，下面是内容会出现滚动条区域，头部有标题内置修改操作，默认有一个返回按钮

基本使用

广州医保病种分值盈亏分析

<template>
    <div style="height:400px">
        <yb-edit-layout :title.sync="paneltitle">
            <template #headerRight>
                <el-button type="primary" size="small">保存</el-button>
            </template>
        </yb-edit-layout>
    </div>
</template>
<script>
    export default {
        components: {
            Splitpanes: () =>
                import('splitpanes/src/components/splitpanes/splitpanes.vue'),
            Pane: () => import('splitpanes/src/components/splitpanes/pane.vue'),
        },
        data() {
            return {
                paneltitle: '广州医保病种分值盈亏分析',
            };
        },
        mounted() {
            import('splitpanes/dist/splitpanes.css');
        },
        methods: {},
    };
</script>

显示 复制 复制

在 el-drawer 中使用

<template>
    <div>
        <el-button type="primary" @click="datasetDrawer=true"
            >打开drawer</el-button
        >
        <el-drawer
            :visible.sync="datasetDrawer"
            size="100%"
            append-to-body
            destroy-on-close
            :show-close="false"
            :with-header="false"
            :close-on-press-escape="false"
        >
            <yb-edit-layout
                :title.sync="paneltitle"
                v-if="datasetDrawer"
                @reback="datasetDrawer=false"
            >
                <template #headerRight>
                    <el-button type="primary" size="small">保存</el-button>
                </template>
                <div style="padding:20px">其他内容</div>
            </yb-edit-layout>
        </el-drawer>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                paneltitle: '广州医保病种分值盈亏分析',
                datasetDrawer: false,
            };
        },
        methods: {},
    };
</script>

显示 复制 复制

包含 splitpanes 结构时

需要安装 splitpanes@2.4.1 ， 使用文档：https://antoniandre.github.io/splitpanes/ (opens new window)

给 splitpanes 添加 yb-splitpanes-theme 类名

广州医保病种分值盈亏分析

1

2

3

4

5

<template>
    <div style="height:400px">
        <yb-edit-layout :title.sync="paneltitle">
            <template #headerRight>
                <el-button type="primary" size="small">保存</el-button>
            </template>
            <splitpanes class="yb-splitpanes-theme" style="height: 100%">
                <pane style="display: flex;align-items: center;justify-content: center;">1</pane>
                <pane>
                    <splitpanes horizontal>
                        <pane style="display: flex;align-items: center;justify-content: center;">2</pane>
                        <pane style="display: flex;align-items: center;justify-content: center;">3</pane>
                        <pane style="display: flex;align-items: center;justify-content: center;">4</pane>
                    </splitpanes>
                </pane>
                <pane style="display: flex;align-items: center;justify-content: center;">5</pane>
            </splitpanes>
        </yb-edit-layout>
    </div>
</template>
<script>
    export default {
        components: {
            // 这里是文档环境，只能使用 异步组件引入第三方库
            Splitpanes: () =>
                import('splitpanes/src/components/splitpanes/splitpanes.vue'),
            Pane: () => import('splitpanes/src/components/splitpanes/pane.vue'),
        },
        data() {
            return {
                paneltitle: '广州医保病种分值盈亏分析',
            };
        },
        mounted() {
            import('splitpanes/dist/splitpanes.css');
        },
        methods: {},
    };
</script>

显示 复制 复制

Props

参数	说明	类型	可选值	默认值
title	标题，支持 sync 修饰符	string	-	-
editable	标题是否支持修改	boolean	-	true
rebackable	是否显示返回按钮	boolean	-	true

插槽

事件名称	说明	参数
default	body 区域内容	-
headerLeft	头部左边区域内容	-
headerCenter	头部中间区域内容	-
headerRight	头部右边区域内容	-

事件

事件名称	说明	回调参数
reback	返回按钮的点击事件	event