PanelData 大数据面板组件

• 无标题面板
• 滚动条
• 主题切换
• 属性/事件/参数
  • Attributes
  • Events
  • Slot

无标题面板

啊上的发上

<template>
  <div style="background: #1f2f3d; padding: 40px">
    <BaPanelData @resize="onResize" :is-navbar="false"> 啊上的发上 </BaPanelData>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    onResize(h, w) {
      console.log(h, w);
    }
  }
};
</script>

显示代码 复制代码 复制代码

滚动条

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

标题

面板内容开始

面板结束

<div style="background: #1f2f3d; padding: 40px">
  <BaPanelData title="标题" action="动作" :scroll="true" :height="200" theme="panel-2">
    <div class="box">面板内容开始</div>
    <div>面板结束</div>
  </BaPanelData>
</div>
<script>
  export default {
    data() {
      return {
        color1: '#409EFF',
        color2: null
      };
    }
  };
</script>
<style>
  .box {
    height: 300px;
  }
</style>

显示代码 复制代码 复制代码

主题切换

通过 theme 切换面板主题

切换主题:

• panel-1
• panel-2
• panel-3
• panel-4

无数据

标题显示

中间内容

bottom内容显示

bottom内容显示adf

<template>
  <div>
    <div style="padding: 10px">
      切换主题:
      <el-select v-model="value" placeholder="请选择" @change="onChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>

    <div style="background: #1f2f3d; padding: 40px">
      <BaPanelData @resize="onResize" title="标题显示" :theme="theme">
        <div style="height: 300px">中间内容</div>
        <template #bottom>bottom内容显示</template>
        <template #bottombar>bottom内容显示adf</template>
      </BaPanelData>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      theme: 'panel-3',
      options: [
        { value: 'panel-1', label: 'panel-1' },
        { value: 'panel-2', label: 'panel-2' },
        { value: 'panel-3', label: 'panel-3' },
        { value: 'panel-4', label: 'panel-4' }
      ],
      value: ''
    };
  },
  methods: {
    onChange(e) {
      this.theme = e;
      console.log(e);
    },
    onResize(h, w) {
      console.log(h, w);
    }
  }
};
</script>

显示代码 复制代码 复制代码

属性/事件/参数

---

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
theme	面板主题	string	panel-1/panel-2/panel-3	panel-1

Events

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

Slot

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