element-plus/docs/examples/popover/basic-usage.vue

77 lines
1.6 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 class="m-2">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 class="m-2">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 class="m-2">Focus to activate</el-button>
</template>
</el-popover>
<el-popover
ref="popover"
title="Title"
:width="200"
trigger="contextmenu"
content="this is content, this is content, this is content"
>
<template #reference>
<el-button class="m-2">contextmenu to activate</el-button>
</template>
</el-popover>
<el-popover
:visible="visible"
placement="bottom"
title="Title"
:width="200"
content="this is content, this is content, this is content"
>
<template #reference>
<el-button class="m-2" @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>
<style scoped>
.el-button + .el-button {
margin-left: 8px;
}
</style>