tiny-vue/examples/sites/demos/mobile-first/app/popover/custom-tip-text.vue

44 lines
1.1 KiB
Vue

<template>
<div>
<div class="inline-block mr-32">
<tiny-popover placement="top-start" title="标题" width="200" trigger="hover" :content="content">
<template #reference>
<tiny-button>悬浮我触发</tiny-button>
</template>
</tiny-popover>
</div>
<div class="inline-block mr-32">
<tiny-popover
placement="top-start"
title="标题"
v-model="visiable"
width="200"
trigger="hover"
:content="content"
>
<div>这是一段内容,这是一段内容,这是一段内容,这是一段内容</div>
<template #reference>
<tiny-button>悬浮我触发</tiny-button>
</template>
</tiny-popover>
</div>
</div>
</template>
<script>
import { Popover, Button } from '@opentiny/vue'
export default {
components: {
TinyPopover: Popover,
TinyButton: Button
},
data() {
return {
visiable: true,
content: '这是一段内容,这是一段内容,这是一段内容,这是一段内容。'
}
}
}
</script>