mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
80 lines
2.1 KiB
Vue
80 lines
2.1 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 width="100" property="name" label="name" />
|
|
<el-table-column width="300" property="address" label="address" />
|
|
</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>
|