JView UI

Appearance

Popover 组件，可以认为是一个浮层卡片组件，相较于 Tooltip 组件，Popover 可以承载更复杂的内容，它的浮层内容区域被大致分为了 title 和 content 两大块，结构性更加明显。其中 content 部分可以收纳更复杂的交互，内容可以是按钮或一些高级组件。

基本展示 ​

展开查看代码
vue
<template>
    <j-popover placement="right" title="我是卡片标题">
        <j-button>鼠标放在这里</j-button>

        <template #content>
            <div>Content 1</div>
            <div>Content 2</div>
        </template>
    </j-popover>
</template>
<template>
    <j-popover placement="right" title="我是卡片标题">
        <j-button>鼠标放在这里</j-button>

        <template #content>
            <div>Content 1</div>
            <div>Content 2</div>
        </template>
    </j-popover>
</template>

调整位置 ​

使用placement属性指定气泡卡片显示的位置。

展开查看代码
vue
<template>
    <div style="width: 460px; max-width: 100%; margin: 50px auto 60px">
        <j-space style="width: 100%; margin-top: 20px; justify-content: center">
            <j-popover placement="top-start" title="Top Start">
                <j-button>Top Start</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="top" title="Top">
                <j-button>Top</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="top-end" title="Top End">
                <j-button>Top End</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popover placement="left-start" title="Left Start">
                <j-button>Left Start</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="right-start" title="Right Start">
                <j-button>Right Start</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popover placement="left" title="Left">
                <j-button>Left</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="right" title="Right">
                <j-button>Right</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popover placement="left-end" title="Left End">
                <j-button>Left End</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="right-end" title="Right End">
                <j-button>Right End</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: center">
            <j-popover placement="bottom-start" title="Bottom Start">
                <j-button>Bottom Start</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="bottom" title="Bottom">
                <j-button>Bottom</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="bottom-end" title="Bottom End">
                <j-button>Bottom End</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
    </div>
</template>
<template>
    <div style="width: 460px; max-width: 100%; margin: 50px auto 60px">
        <j-space style="width: 100%; margin-top: 20px; justify-content: center">
            <j-popover placement="top-start" title="Top Start">
                <j-button>Top Start</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="top" title="Top">
                <j-button>Top</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="top-end" title="Top End">
                <j-button>Top End</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popover placement="left-start" title="Left Start">
                <j-button>Left Start</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="right-start" title="Right Start">
                <j-button>Right Start</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popover placement="left" title="Left">
                <j-button>Left</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="right" title="Right">
                <j-button>Right</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popover placement="left-end" title="Left End">
                <j-button>Left End</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="right-end" title="Right End">
                <j-button>Right End</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: center">
            <j-popover placement="bottom-start" title="Bottom Start">
                <j-button>Bottom Start</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="bottom" title="Bottom">
                <j-button>Bottom</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
            <j-popover placement="bottom-end" title="Bottom End">
                <j-button>Bottom End</j-button>

                <template #content>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popover>
        </j-space>
    </div>
</template>

浮层内关闭 ​

浮层内部也可以操作open属性，实现关闭浮层的效果。

展开查看代码
vue
<template>
    <j-popover placement="right" title="我是标题" v-model:open="open">
        <j-button>Hover</j-button>

        <template #content>
            <div>我是内容</div>
            <j-button size="small" style="margin-top: 10px" @click="onClickClose">点我关闭</j-button>
        </template>
    </j-popover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const open = ref(false)

const onClickClose = () => {
    open.value = false
}
</script>
<template>
    <j-popover placement="right" title="我是标题" v-model:open="open">
        <j-button>Hover</j-button>

        <template #content>
            <div>我是内容</div>
            <j-button size="small" style="margin-top: 10px" @click="onClickClose">点我关闭</j-button>
        </template>
    </j-popover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const open = ref(false)

const onClickClose = () => {
    open.value = false
}
</script>

属性 ​

参数说明类型默认值必填
title气泡卡片的标题，支持字符串/属性/插槽string | VNode无否
disabled禁止弹出浮层boolean无否
content气泡卡片的内容，支持字符串/属性/插槽string | VNode无否
placement浮层位置，可选top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-endPlacement'bottom'否
open控制浮层显隐，支持 v-model，仅在必要时使用 openbooleanundefined否
getPopupContainer指定浮层的容器，默认渲染到 body 下；如需渲染到父级元素下，可返回 null() => null | HTMLElement() => document.body否
destroyWhenHide控制隐藏后是否销毁浮层boolean无否
mouseEnterDelay鼠标移入后延时多少才显示 Tooltip，单位：秒number0.1否
mouseLeaveDelay鼠标移出后延时多少才隐藏 Tooltip，单位：秒number0.1否
overlayClassName浮层classstring无否
overlayStyle浮层styleCSSProperties无否
overlayInnerStyle浮层内容区styleCSSProperties无否
overlayColor浮层背景颜色string无否
trigger触发方式"click" | "hover"'hover'否
arrowVisible是否显示箭头booleantrue否
offsetOptionoffset 配置OffsetOptions12否

Copyright © 2022-2024 All Rights Reserved by Tusi.