mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-07 05:38:37 +08:00
dd19cae2bc
* refactor(components): popper composables - Refactor popper composables * updates * updates for tooltip * Updates for popper. TODO: fix controlled tooltip animation * Fix controlled mode popper animation issue * Add new feature for customizing tooltip theme * Fix popover and popconfirm error * - Add Collection component for wrapping a collection of component - Add FocusTrap component for trap focus for popups - Add RovingFocus component for roving focus component type - Adjust dropdown component based on these newly added components - Add popper-trigger component for placing the trigger - TODO: Finish current dropdown component, and all component's tests plus documents * Refactor popper * Complete organizing popper * Almost finish dropdown * Update popper tests * update only-child test * Finish focus trap component test * Finish tooltip content test * Finish tooltip trigger tests * Finish tooltip tests * finish tests for Collection and RovingFocusGroup * Fix test cases for timeselect & select & popover * Fix popover, popconfirm, menu bug and test cases * Fix select-v2 test error caused by updating popper * Fix date-picker test issue for updating popper * fix test cases * Fix eslint * Rebase dev & fix tests * Remove unused code
57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
|
<el-popover
|
|
placement="top-start"
|
|
title="Title"
|
|
:width="200"
|
|
trigger="hover"
|
|
content="this is content, this is content, this is content"
|
|
>
|
|
<template #reference>
|
|
<el-button>Hover to activate</el-button>
|
|
</template>
|
|
</el-popover>
|
|
|
|
<el-popover
|
|
placement="bottom"
|
|
title="Title"
|
|
:width="200"
|
|
trigger="click"
|
|
content="this is content, this is content, this is content"
|
|
>
|
|
<template #reference>
|
|
<el-button>Click to activate</el-button>
|
|
</template>
|
|
</el-popover>
|
|
|
|
<el-popover
|
|
ref="popover"
|
|
placement="right"
|
|
title="Title"
|
|
:width="200"
|
|
trigger="focus"
|
|
content="this is content, this is content, this is content"
|
|
>
|
|
<template #reference>
|
|
<el-button>Focus to activate</el-button>
|
|
</template>
|
|
</el-popover>
|
|
|
|
<el-popover
|
|
v-model:visible="visible"
|
|
placement="bottom"
|
|
title="Title"
|
|
:width="200"
|
|
content="this is content, this is content, this is content"
|
|
>
|
|
<template #reference>
|
|
<el-button @click="visible = !visible">Manual to activate</el-button>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
|
|
const visible = ref(false)
|
|
</script>
|