mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +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
92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template>
|
|
<div style="display: flex; align-items: center">
|
|
<el-popover placement="right" :width="400" trigger="click">
|
|
<template #reference>
|
|
<el-button style="margin-right: 16px">Click to activate</el-button>
|
|
</template>
|
|
<el-table :data="gridData">
|
|
<el-table-column
|
|
width="150"
|
|
property="date"
|
|
label="date"
|
|
></el-table-column>
|
|
<el-table-column
|
|
width="100"
|
|
property="name"
|
|
label="name"
|
|
></el-table-column>
|
|
<el-table-column
|
|
width="300"
|
|
property="address"
|
|
label="address"
|
|
></el-table-column>
|
|
</el-table>
|
|
</el-popover>
|
|
|
|
<el-popover
|
|
:width="300"
|
|
popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
|
|
>
|
|
<template #reference>
|
|
<el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />
|
|
</template>
|
|
<template #default>
|
|
<div
|
|
class="demo-rich-conent"
|
|
style="display: flex; gap: 16px; flex-direction: column"
|
|
>
|
|
<el-avatar
|
|
:size="60"
|
|
src="https://avatars.githubusercontent.com/u/72015883?v=4"
|
|
style="margin-bottom: 8px"
|
|
/>
|
|
<div>
|
|
<p
|
|
class="demo-rich-content__name"
|
|
style="margin: 0; font-weight: 500"
|
|
>
|
|
Element Plus
|
|
</p>
|
|
<p
|
|
class="demo-rich-content__mention"
|
|
style="margin: 0; font-size: 14px; color: var(--el-color-info)"
|
|
>
|
|
@element-plus
|
|
</p>
|
|
</div>
|
|
|
|
<p class="demo-rich-content__desc" style="margin: 0">
|
|
Element Plus, a Vue 3 based component library for developers,
|
|
designers and product managers
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const gridData = [
|
|
{
|
|
date: '2016-05-02',
|
|
name: 'Jack',
|
|
address: 'New York City',
|
|
},
|
|
{
|
|
date: '2016-05-04',
|
|
name: 'Jack',
|
|
address: 'New York City',
|
|
},
|
|
{
|
|
date: '2016-05-01',
|
|
name: 'Jack',
|
|
address: 'New York City',
|
|
},
|
|
{
|
|
date: '2016-05-03',
|
|
name: 'Jack',
|
|
address: 'New York City',
|
|
},
|
|
]
|
|
</script>
|