DockContainer 停靠容器

主要用来配合ModelessDialog使用。在ModelessDialog折叠后，收纳在此容器中。如果需要全局保持，请把此组件放在和根 router-view 同级。

基础用法

只有通过 ModelessDialogManager 创建的的对话框才能收纳在此容器中。点击容器内卡片，将自动还原此前收纳的 ModelessDialog 实例。

snapshot 为 true 时，会自动使用html2canvas进行截图，可能造成卡顿，请谨慎使用 true 值。当snapshot为对象时，type可选值为image，video，audio。当 snapshot 为 string 时，过长的文本会被自动截掉。

vue

<template>
  <el-space size="large">
    <el-button @click="show1">无snapshot(no snapshot)</el-button>
    <el-button @click="show2">自动截屏(auto capture)</el-button>
  </el-space>
  <br /><br />
  <el-space size="large">
    <el-button @click="show3">文本(Text)</el-button>
    <el-button @click="show4">图片(Image)</el-button>
    <el-button @click="show5">视频(Video)</el-button>
    <el-button @click="show6">音频(Audio)</el-button>
  </el-space>
  <hr />
  <el-space size="large" class="m-t-lg">
    <el-button @click="showDock">显示/隐藏Dock(Show/Hide Dock)</el-button>
    <el-button @click="placement = 'bottom'">底部(Bottom)</el-button>
    <el-button @click="placement = 'right'">右侧(Right)</el-button>
    <el-button @click="placement = 'top'">顶部(Top)</el-button>
    <el-button @click="placement = 'left'">左侧(Left)</el-button>
  </el-space>
  <epp-dock-container v-model="visible" :placement="placement" />
</template>
<script setup lang="ts">
import { ref, h } from 'vue';
import { ElEmpty } from 'element-plus';
import { ModelessDialogManager } from 'element-plus-plus';

const visible = ref(false);
const placement = ref('bottom');

const showDock = () => {
  visible.value = !visible.value;
};

const show1 = () => {
  ModelessDialogManager.show({
    title: '无Snapshot',
    useDock: true,
  });
};
const show2 = () => {
  ModelessDialogManager.show({
    title: '自动截屏',
    snapshot: true,
    useDock: true,
    body: h(ElEmpty, { description: '自定截屏测试' }),
  });
};
const show3 = () => {
  ModelessDialogManager.show({
    title: '文本',
    useDock: true,
    snapshot:
      '“历史将继续被书写，加油，法国队！”帮助法国队拿到欧国联冠军之后，姆巴佩在自己的社交平台上晒出了亲吻冠军奖杯的照片。今年夏天那个失意的姆巴佩，终于在国家队重获幸福。',
    body: h('span', ['文字测试']),
  });
};
const show4 = () => {
  ModelessDialogManager.show({
    title: '图片类型',
    useDock: true,
    snapshot: { type: 'image', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
    body: h('span', ['图片类型测试']),
  });
};
const show5 = () => {
  ModelessDialogManager.show({
    title: '视频类型',
    useDock: true,
    snapshot: { type: 'video', url: 'https://vjs.zencdn.net/v/oceans.mp4' },
    body: h('span', ['视频类型测试']),
  });
};
const show6 = () => {
  ModelessDialogManager.show({
    title: '音频类型',
    useDock: true,
    snapshot: { type: 'audio', url: 'https://www.w3school.com.cn/i/horse.ogg' },
    body: h('span', ['音频类型测试']),
  });
};
</script>

自定义ModelessDialog header

使用 header slot 时，DockContainer容器中显示的title为 panel-header DOM元素的innerText值。

示例代码

vue

<template>
  <el-space gap="var(--md)">
    <el-button @click="show1">Custom header</el-button>
    <el-button @click="showDock">Show/Hide Dock</el-button>
  </el-space>
  <epp-dock-container v-model="visible" />
</template>

<script setup lang="ts">
import { ref, h } from 'vue';
import { ElIcon } from 'element-plus';
import { Hide, Close } from '@element-plus/icons-vue';
import { ModelessDialogManager } from 'element-plus-plus';

const visible = ref(false);

const showDock = () => {
  visible.value = !visible.value;
};

const show1 = () => {
  const dialog = ModelessDialogManager.show({
    useDock: true,
    header: h(
      'div',
      { style: 'display: flex; column-gap: 8px; justify-content: space-between; align-items: center;' },
      [
        h('h6', { innerHTML: 'Custom' }),
        h('h5', { innerHTML: 'Header' }),
        h(
          ElIcon,
          {
            size: '20px',
            title: '点我折叠(Click to fold)',
            style: 'cursor: pointer',
            onClick: () => dialog.toggleCollapse(),
          },
          [h(Hide)],
        ),
        h(
          ElIcon,
          {
            size: '20px',
            title: '点我关闭(Click to close)',
            style: 'cursor: pointer',
            onClick: () => dialog.close(),
          },
          [h(Close)],
        ),
      ],
    ),
  });
};
</script>

Attributes

参数	说明	类型	可选值	默认值
model-value / v-model	是否显示对话框	boolean	—	—
width	容器的宽度，在左右侧时起作用	string	—	-
height	容器的高度，在顶底部时起作用	string	—	-
item-width	容器中每一项的宽度	string	—	150px
item-height	容器中每一项的高度	string	—	150px
custom-class	容器的自定义类名	string	—	—
open-delay	容器打开的延时时间，单位毫秒	number	—	0
close-delay	容器关闭的延时时间，单位毫秒	number	—	0
before-close	关闭前的回调，会暂停对话框的关闭	function(done)，done 用于关闭 Dialog	—	—
animation-name	容器动画类型	string	-	根据不同的位置，会有不同的默认值
z-index	自定义层级	number	-	-
placement	位置	string	bottom / top / left / right	bottom

Slots

名称	说明
default	自定义内容，参数为data: `array<{id, title, snapshot }>`
dock-item	自定义每项内容，参数为item：`{id, title, snapshot }`

Events

事件名称	说明	回调参数
open	容器打开的回调	—
opened	容器打开动画结束时的回调	—
close	容器关闭的回调	—
closed	容器关闭动画结束时的回调	—
item-closed	容器中项目关闭的回调	(item, items)：关闭的项目，显示的项目
item-added	容器中项目添加的回调	(item, items)：添加的项目，显示的项目
item-restored	容器中项目还原的回调	(item, items)：还原的项目，显示的项目

DockContainer 停靠容器 ​

基础用法 Play ​

自定义ModelessDialog header Play ​

Attributes ​