You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.5 KiB
77 lines
1.5 KiB
3 years ago
|
<docs>
|
||
|
---
|
||
|
order: 4
|
||
|
title:
|
||
|
zh-CN: 悬停点击弹出窗口
|
||
|
en-US: Hover with click popover
|
||
|
---
|
||
|
|
||
|
## zh-CN
|
||
|
|
||
|
以下示例显示如何创建可悬停和单击的弹出窗口。
|
||
|
|
||
|
## en-US
|
||
|
|
||
|
The following example shows how to create a popover which can be hovered and clicked.
|
||
|
|
||
|
</docs>
|
||
|
<template>
|
||
|
<a-popover
|
||
|
style="width: 500px"
|
||
|
title="Hover title"
|
||
|
trigger="hover"
|
||
|
:visible="hovered"
|
||
|
@visibleChange="handleHoverChange"
|
||
|
>
|
||
|
<template #content>
|
||
|
<div>This is hover content.</div>
|
||
|
</template>
|
||
|
<a-popover
|
||
|
title="Click title"
|
||
|
trigger="click"
|
||
|
:visible="clicked"
|
||
|
@visibleChange="handleClickChange"
|
||
|
>
|
||
|
<template #content>
|
||
|
<div>
|
||
|
<div>This is click content.</div>
|
||
|
<a @click="hide">Close</a>
|
||
|
</div>
|
||
|
</template>
|
||
|
<a-button>Hover and click / 悬停并单击</a-button>
|
||
|
</a-popover>
|
||
|
</a-popover>
|
||
|
</template>
|
||
|
<script lang="ts">
|
||
|
import { defineComponent, ref } from 'vue';
|
||
|
export default defineComponent({
|
||
|
setup() {
|
||
|
const clicked = ref<boolean>(false);
|
||
|
const hovered = ref<boolean>(false);
|
||
|
|
||
|
const hide = () => {
|
||
|
clicked.value = false;
|
||
|
hovered.value = false;
|
||
|
};
|
||
|
|
||
|
const handleHoverChange = (visible: boolean) => {
|
||
|
clicked.value = false;
|
||
|
hovered.value = visible;
|
||
|
};
|
||
|
|
||
|
const handleClickChange = (visible: boolean) => {
|
||
|
clicked.value = visible;
|
||
|
hovered.value = false;
|
||
|
};
|
||
|
|
||
|
return {
|
||
|
clicked,
|
||
|
hovered,
|
||
|
hide,
|
||
|
handleHoverChange,
|
||
|
handleClickChange,
|
||
|
};
|
||
|
},
|
||
|
});
|
||
|
</script>
|