Element Plus Plus

中文

English

中文

English

Appearance

Panel 面板 ​

面板通常由头部、主体和脚注组成。Hongluan 中的面板大多数用做提示框、通知、对话框或当作勾勒内容区域的容器，当然不仅如此。

基本样式 ​

Panel 组件包括 header、body、footer 三个 slot, body 是为默认 slot

这是一个标题
这是一段body信息
示例代码
vue
<template>
  <epp-panel>
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-icon>
          <close />
        </el-icon>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>
<script setup lang="ts">
import { Close } from '@element-plus/icons-vue';
</script>

无边框样式 ​

borderless 属性会使 Panel 组件变成无边框状态，同时它们直接的间距也会产生变化。

这是一个标题
这是一段body信息
outlineless 属性可以移除 Panel 外侧轮廓的边框
vue
<template>
  <epp-panel borderless>
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle>
          <el-icon><Monitor /></el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>
<script setup lang="ts">
import { Monitor, FullScreen } from '@element-plus/icons-vue';
</script>

圆角属性 ​

radius 属性会改变 Panel 组件的圆角样式

这是一个标题
这是一段body信息
示例代码
vue
<template>
  <epp-panel radius="10px">
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle>
          <el-icon><Monitor /></el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>

<script setup lang="ts">
import { Monitor, FullScreen } from '@element-plus/icons-vue';
</script>

间距属性 ​

padding 属性会改变 Panel 组件的间距尺寸。body-padding 单独控制 body 的间距，优先级高于 padding。

padding
body-padding
标题
这是一段body信息
示例代码
vue
<template>
  <el-space size="large" class="m-b-lg">
    <el-select v-model="padding" clearable placeholder="padding" style="width: 150px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-select v-model="bodyPadding" clearable placeholder="body-padding" style="width: 150px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </el-space>

  <epp-panel :padding="padding" :body-padding="bodyPadding">
    <template #header>
      <div class="panel-title">标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle>
          <el-icon><Monitor /></el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Monitor, FullScreen } from '@element-plus/icons-vue';

const options = ref([
  {
    value: '0',
    label: 'none',
  },
  {
    value: '8px',
    label: '8px',
  },
  {
    value: '16px',
    label: '16px',
  },
  {
    value: '20px',
    label: '20px',
  },
]);
const padding = ref('');
const bodyPadding = ref('');
</script>

自定义类名 ​

header-class，body-class 和 footer-class 属性允许你向对应的header，body，footer 增加自定义类

标题
这是一段body信息
示例代码
vue
<template>
  <epp-panel padding="8px" header-class="new-header-class" body-class="new-body-class" footer-class="new-footer-class">
    <template #header>
      <div class="panel-title">标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle>
          <el-icon><Monitor /></el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>
<script setup lang="ts">
import { Monitor, FullScreen } from '@element-plus/icons-vue';
</script>

简单形态 ​

Panel 组件允许移除 header和footer 结构，这样你可以更灵活的定义它的用途。

仅保留body区域 (有边框)
示例代码
vue
<template>
  <epp-panel>
    <div>仅保留body区域 (有边框)</div>
  </epp-panel>
</template>
<script lang="ts" setup>
</script>

可扩展的 Header ​

header 插槽可以的承载你的自定义元素和组件，你甚至不需要定义样式。

Title
Panel-Body
测试
对方正在输入中...
Panel-Body
Title
Panel-Body
Title
Panel-Body
Title
Panel-Body
Title
小贴士
Panel-Body
在 header 的 slot 中提供了的 panel-header-left，panel-title，panel-header-right 三个布局样式。
vue
<template>
  <el-row :gutter="16">
    <el-col :span="12">
      <epp-panel footer-align="align-left">
        <template #header>
          <div class="panel-header-left">
            <el-icon size="20"><Monitor /></el-icon>
          </div>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <button class="panel-close"></button>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12">
      <epp-panel>
        <template #header>
          <div class="panel-header-left">
            <el-tag type="primary">测试</el-tag>
          </div>
          <div class="panel-title">
            <h5>对方正在输入中...</h5>
          </div>
          <div class="panel-header-right">
            <button class="panel-close"></button>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12" class="m-t-lg">
      <epp-panel>
        <template #header>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <el-input placeholder="请输入内容">
              <template #suffix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12" class="m-t-lg">
      <epp-panel>
        <template #header>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <el-button type="primary" icon-position="right">
              搜索
              <template #icon>
                <el-icon><Search /></el-icon>
              </template>
            </el-button>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12" class="m-t-lg">
      <epp-panel>
        <template #header>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <el-dropdown>
              <el-link type="primary">
                选择 <el-icon><ArrowDownBold /></el-icon>
              </el-link>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>数据流</el-dropdown-item>
                  <el-dropdown-item>传输属性值</el-dropdown-item>
                  <el-dropdown-item>已断线</el-dropdown-item>
                  <el-dropdown-item>待恢复</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12" class="m-t-lg">
      <epp-panel>
        <template #header>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <span class="text-danger">小贴士</span>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { Monitor, ArrowDownBold, Search } from '@element-plus/icons-vue';
</script>

高级功能 ​

panel 提供 收起 和 全屏 功能。你可以使用按钮来控制它们。

这是一个标题
这是一段body信息
可以设置 fullscreen 为 object 类型，初始化全屏的 Panel 位置
vue
<template>
  <epp-panel :fullscreen="maxStatus" :collapsed="minStatus">
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle @click="min">
          <el-icon><ZoomOut /></el-icon>
        </el-button>
        <el-button type="warning" circle @click="max">
          <el-icon><ZoomIn /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ZoomOut, ZoomIn } from '@element-plus/icons-vue';

const maxStatus = ref<boolean | Record<string, string>>(false);
const minStatus = ref(false);

const min = () => {
  minStatus.value = !minStatus.value;
};
const max = () => {
  if (maxStatus.value) {
    maxStatus.value = false;
  } else {
    maxStatus.value = { top: '16px', left: '16px', right: '16px', bottom: '16px' };
  }
};
</script>

自适应Body区域 ​

你可以为 panel 设置 full-body 属性，可使其 panel-body 根据panel的高度自动伸长

这是一个标题
这是一段body信息
你可以加上带有scroll属性的结构来使内容在面板内滚动，它可根据panel的高度自动适应而无需设置滚动区域的高度。
vue
<template>
  <epp-panel style="height: 220px" full-body>
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>
    </template>
    <el-scrollbar ref="scrollbarRef" height="100%" always>
      <div class="p-lg" style="height: 320px">这是一段body信息</div>
    </el-scrollbar>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue';
</script>

Attributes ​

参数说明类型可选值默认值
borderless是否无边框boolean—false
outlineless是否无轮廓边框boolean—false
radius圆角string—0
padding间距string—20px
body-paddingbody 间距string—20px
footer-paddingfooter 间距string—20px
header-class为 header 添加自定义类名string—-
header-style为 header 添加自定义样式string—-
body-class为 body 添加自定义类名string—-
body-style为 body 添加自定义样式string—-
footer-class为 footer 添加自定义类名string—-
footer-style为 footer 添加自定义样式string—-
fullscreen全屏模式boolean / object{top: string; left: string; bottom: stirng; right: string;}—false
collapsed收起模式，全屏模式下收起无效boolean—false
full-body可使其 panel-body 根据panel的高度自动伸长boolean—false

Slots ​

名称说明
—Panel 主体的内容
headerPanel 头部的内容
footerPanel 脚注的内容