Begda

# Panel 面板组件

# 无标题面板

面板
<template>
    <panel @resize="onResize" :is-navbar="false">面板</panel>
</template>
<script>
export default {
    data() {
        return {
            color1: '#409EFF',
            color2: null
        };
    },
    methods: {
        onResize(h, w) {
            console.log(h, w);
        }
    }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
显示代码 复制代码

# 加载状态

内容
<template>
    <panel @resize="onResize" :is-navbar="false" :loading="true">
        <div style="height: 200px">内容</div>
    </panel>
</template>
<script>
export default {
    data() {
        return {
            color1: '#409EFF',
            color2: null
        };
    },
    methods: {
        onResize(h, w) {
            console.log(h, w);
        }
    }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
显示代码 复制代码

# 面板投影

默认显示投影
面板
鼠标移入显示投影
面板
禁用投影
面板
<template>
    <div class="flex justify-around">
        <div><panel title="默认显示投影" shadow="always">面板</panel></div>
        <div><panel title="鼠标移入显示投影" shadow="hover">面板</panel></div>
        <div><panel title="禁用投影" shadow="never">面板</panel></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            color1: '#409EFF',
            color2: null
        };
    },
    methods: {}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
显示代码 复制代码

# 有标题面板

右侧右侧右侧右侧右侧
换背景色标题
面板 
<template>
    <panel title="换背景色标题" @left="onLeft" :headerStyle="{background:'#58C1C8'}" left-text="右侧右侧右侧右侧右侧">
        面板
    </panel>
</template>
<script>
    export default {
        data() {
            return {
                color1: '#409EFF',
                color2: null
            };
        },
        methods: {
            onLeft() {
                this.$message({
                    message: '你点的是左边',
                    type: 'success'
                });
            }
        }
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
显示代码 复制代码

# 有标题面板

左侧
标题
右侧
面板
<template>
    <panel title="标题" @left="onLeft" left-text="左侧" left-arrow right-text="右侧" rightArrow>面板</panel>
</template>
<script>
    export default {
        data() {
            return {
                color1: '#409EFF',
                color2: null
            };
        },
        methods: {
            onLeft() {
                this.$message({
                    message: '你点的是左边',
                    type: 'success'
                });
            }
        }
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
显示代码 复制代码

# 插槽

title
按钮
面板
左侧按钮
面板 
<template>
    <div>
        <panel title="title" title-position="left">
            <div slot="right">按钮</div>
            面板
        </panel>
        <panel>
            <div slot="left">左侧按钮</div>
            面板
        </panel>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
显示代码 复制代码

# 滚动条

默认 scroll=true 一直显示滚动条, scroll=false,就不显示了. height 的值 要小于内容高度,才会出现滚动条

标题
面板内容开始
面板结束
<panel title="标题" action="动作" :scroll="true" :height="200">
    <div class="box">面板内容开始</div>
    <div>面板结束</div>
</panel>

<script>
    export default {
        data() {
            return {
                color1: '#409EFF',
                color2: null
            };
        }
    };
</script>
<style>
    .box {
        height: 300px;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
显示代码 复制代码

# 插槽

header插槽
top内容显示
中间内容
bottom内容显示
bottombar内容显示
<template>
    <panel :padding="false">
        <template #header>header插槽</template>
        <div slot="top">top内容显示</div>
        <div>中间内容</div>
        <div slot="bottom">bottom内容显示</div>
        <div slot="bottombar">bottombar内容显示</div>
    </panel>
</template>
<script>
    export default {
        data() {
            return {
                color1: '#409EFF',
                color2: null
            };
        }
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
显示代码 复制代码

# 属性/事件/参数

# Attributes

参数 说明 类型 可选值 默认值
is-navbar 是否显示头部导航栏 boolean — true
title 标题 string — —
title-position 标题位置 string left / center/ right center
left-text 左侧动作文字 string — —
right-text 右侧动作文字 string — —
scroll 滚动条是否显示 boolean — true
full-window 充满窗口,这个不是全屏的 boolean — false
height 面板的高度 string — null
loading 加载状态 boolean — —
padding 中间区别填充 boolean — true
shadow 面板周围阴影的显示方式 boolean always / hover / never always
headerStyle 设置头部背景色 object {background:'#ffffff'}

# Events

事件名称 说明 回调参数
resize 获取窗口的实时高度宽度 高度 height, 宽度 width
left 右侧动作事件 无
right 右侧动作事件 无

# Slot

名称 说明
header 顶部导航插槽, is-navbar=true 的情况下生效
left 顶部导航 左侧插槽
right 顶部导航 右侧插槽
default 中间区域的内容
top 一般放搜索
bottom 一般放分页
bottombar 底部一般放底部菜单
更新时间: 2024/8/2 17:52:13

← PanelData 大数据面板 →