tiny-vue/examples/sites/demos/pc/app/popover/content.vue

39 lines
906 B
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="container">
<tiny-popover content="这是一段内容">
<template #reference>
<tiny-button style="margin-right: 16px">通过属性</tiny-button>
</template>
</tiny-popover>
<tiny-popover>
<div>
这是一段<span style="color: red">红色的</span>内容 <tiny-icon-refres fill="red" style="cursor: pointer" />
</div>
<template #reference>
<tiny-button>通过插槽</tiny-button>
</template>
</tiny-popover>
</div>
</template>
<script lang="jsx">
import { Popover, Button } from '@opentiny/vue'
import { IconRefres } from '@opentiny/vue-icon'
export default {
components: {
TinyPopover: Popover,
TinyButton: Button,
TinyIconRefres: IconRefres()
}
}
</script>
<style scoped>
.container {
display: flex;
flex-direction: row;
justify-content: start;
flex-wrap: wrap;
}
</style>