DockContainer

Primarily used in conjunction with ModelessDialog. After a ModelessDialog is collapsed, it is stored in this container. If it needs to be maintained globally, place this component at the same level as the root router-view.

Basic

Only dialogs created via ModelessDialogManager can be stored in this container. Clicking a card within the container will automatically restore the previously stored ModelessDialog instance.

When snapshot is true, html2canvas will be used for automatic screenshotting, which may cause lag. Please use the true value with caution. When snapshot is an object, the available type values are image, video, and audio. When snapshot is a string, excessively long text will be truncated automatically.

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>

Customizing ModelessDialog Header

When using the header slot, the title displayed in the DockContainer will be the innerText value of the panel-header DOM element.

Example code

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

Parameter	Description	Type	Optional Values	Default Value
model-value / v-model	Whether to display the container	boolean	—	—
width	Width of the container, effective when placed on the left or right	string	—	-
height	Height of the container, effective when placed on the top or bottom	string	—	-
item-width	Width of each item in the container	string	—	150px
item-height	Height of each item in the container	string	—	150px
custom-class	Custom class name for the container	string	—	—
open-delay	Delay time for opening the container, in milliseconds	number	—	0
close-delay	Delay time for closing the container, in milliseconds	number	—	0
before-close	Callback before closing, pauses the dialog closing	`function(done)` where `done` is used to close the Dialog	—	—
animation-name	Container animation type	string	-	Different default values depending on the placement
z-index	Custom z-index	number	-	-
placement	Placement	string	bottom / top / left / right	bottom

Slots

Name	Description
default	Custom content, parameter is `array<{id, title, snapshot }>`
dock-item	Custom content for each item, parameter is `item: {id, title, snapshot }`

Events

Event Name	Description	Callback Parameter
open	Callback when the container opens	—
opened	Callback when the container's open animation finishes	—
close	Callback when the container closes	—
closed	Callback when the container's close animation finishes	—
item-closed	Callback when an item in the container is closed	(item, items)：the closed item, the remaining items
item-added	Callback when an item is added to the container	(item, items)：the added item, the displayed items
item-restored	Callback when an item in the container is restored	(item, items)：the restored item, the displayed items

DockContainer ​

Basic Play ​

Customizing ModelessDialog Header Play ​

Attributes ​