Vue DevUI
主题

Panel 面板

内容面板，用于内容分组。

何时使用

当页面内容需要进行分组显示时使用，一般包含头部、内容区域、底部三个部分。

基本用法

Click me to expand
<template>
  <d-panel>
    <d-panel-header>Click me to expand</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
</template>

默认状态

Panel header
This is body
通过设置is-collapsed为true可以默认展开面板。
<template>
  <d-panel :is-collapsed="true">
    <d-panel-header>Panel header</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
</template>

面板类型

Panel with info Type
This is body

Panel with primary Type
This is body

Panel with success Type
This is body

Panel with warning Type
This is body

Panel with danger Type
This is body
面板类型有5种：primary / success / danger / warning / info，默认为info。
<template>
  <d-panel :is-collapsed="true">
    <d-panel-header>Panel with info Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel type="primary" :is-collapsed="true">
    <d-panel-header>Panel with primary Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel type="success" :is-collapsed="true">
    <d-panel-header>Panel with success Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel type="warning" :is-collapsed="true">
    <d-panel-header>Panel with warning Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel type="danger" :is-collapsed="true">
    <d-panel-header>Panel with danger Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
</template>

面板样式

Panel has no left padding
This is body

Panel with header and footer
This is body
This is footer
<template>
  <d-panel @toggle="toggle" :is-collapsed="true" :has-left-padding="false">
    <d-panel-header>
      Panel has no left padding
      <em :class="`icon icon-chevron-${toggleState ? 'down' : 'up'}`"></em>
    </d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel :is-collapsed="true">
    <d-panel-header>Panel with header and footer</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
    <d-panel-footer>This is footer</d-panel-footer>
  </d-panel>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const toggleState = ref(true);

    const toggle = (value) => {
      toggleState.value = value;
    };

    return {
      toggle,
      toggleState
    };
  }
});
</script>

阻止折叠

Panel header
This is body

我们可以使用before-toggle来阻止面板的收起。根据条件判断，当Panel展开时，点击阻止折叠按钮，将无法折叠Panel，当Panel展开时不影响操作。
<template>
  <d-panel
    type="primary"
    :is-collapsed="isCollapsed"
    @toggle="handleToggle"
    :before-toggle="beforeToggle"
  >
    <d-panel-header>
      Panel header
      <i :class="`icon-chevron-${toggle ? 'down' : 'up'}`"></i>
    </d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-button @click="panelToggle = !panelToggle">
    {{ panelToggle ? '阻止折叠' : '允许折叠' }}
  </d-button>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    let isCollapsed = ref(true);
    let panelToggle = ref(true);
    let toggle = ref(true);
    let showAnimation = ref(true);

    const handleToggle = (value) => {
      toggle.value = value;
    };
    
    const beforeToggle = () => {
      return panelToggle.value;
    };

    return {
      toggle,
      panelToggle,
      beforeToggle,
      isCollapsed,
      handleToggle,
    };
  }
});
</script>

Panel 参数

参数名类型默认说明
typePanelType'info'可选，面板的类型
is-collapsedbooleanfalse可选，是否默认展开
has-left-paddingbooleantrue可选，是否显示左侧填充
show-animationbooleantrue可选，是否显示动画
before-toggle(value: boolean, done?: () => void) => void--可选，面板折叠状态改变前的回调函数。
参数value代表当前状态，
参数done()可以控制Panel开合

Panel 事件

事件名类型说明
toggle(value: boolean) => void可选，切换面板的事件

Panel 类型定义

PanelType 

export type PanelType = 'primary' | 'success' | 'danger' | 'warning' | 'info';
Contributors
粤A2-20044005号