Fes Design

浮动面板 ​

浮动面板

组件注册 ​

js
import { FFloatPane } from '@fesjs/fes-design';

app.use(FFloatPane);

代码演示 ​

基础用法 ​

play
<template>
    <FSpace>
        <FButton @click="show[0] = true">常规</FButton>
        <FButton @click="show[1] = true">不可拖动</FButton>
        <FFloatPane v-model:visible="show[0]" title="常规" displayDirective="show" @afterEnter="handleAfterEnter" @afterLeave="handleAfterLeave">
            <div style="padding: 8px">
                <div>我是内容...</div>
                <div>我是内容...</div>
                <div>我是内容...</div>
            </div>
        </FFloatPane>
        <FFloatPane v-model:visible="show[1]" title="不可拖动" :draggable="false" cachePosition="" @afterEnter="handleAfterEnter" @afterLeave="handleAfterLeave">
            <div style="padding: 8px">
                <div>我是内容...</div>
                <div>我是内容...</div>
                <div>我是内容...</div>
            </div>
        </FFloatPane>
    </FSpace>
</template>

<script>
import { reactive } from 'vue';

export default {
    setup() {
        const show = reactive([]);

        const handleAfterEnter = (e) => {
            console.log('[floatPane.common] handleAfterEnter, e:', e);
        };
        const handleAfterLeave = (e) => {
            console.log('[floatPane.common] handleAfterLeave, e:', e);
        };

        return {
            show,
            handleAfterEnter,
            handleAfterLeave,
        };
    },
};
</script>

Props ​

属性说明类型默认值
visiblev-model:visible，是否显示浮动面板Booleanfalse
draggable是否可拖动Booleantrue
displayDirective选择渲染使用的指令，if 对应 v-if，show 对应 v-show，使用 show 的时候不会被重置stringshow
title标题String-
width宽度String/Number520
zIndex浮层优先级Number3000
defaultPosition默认浮动面板位置PanePosition{top: '50px', right: '50px'}
cachePosition缓存拖动位置session locallocal
contentClass可用于设置内容的类名String-
getContainer指定 FloatPane 挂载的 HTML 节点() => HTMLElement() => document.body

PanePosition ​

ts
interface PanePosition {
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
}

Event ​

事件名称说明回调参数
afterEnter出现后的回调event
afterLeave关闭后的回调event

Slots ​

名称说明
default浮动面板的内容
title浮动面板的标题