forked from opentiny/tiny-vue
61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<template>
|
||
<div>
|
||
<div class="block">
|
||
<tiny-popconfirm
|
||
title="这是气泡标题"
|
||
message="这是气泡确认框提示内容文本描述，这是两行的样是两行的样式，内容很长很长。"
|
||
>
|
||
<template #reference>
|
||
<tiny-button>悬浮我提示</tiny-button>
|
||
</template>
|
||
</tiny-popconfirm>
|
||
</div>
|
||
|
||
<div class="block">
|
||
<tiny-popconfirm
|
||
type="info"
|
||
title="这是提示气泡"
|
||
trigger="click"
|
||
placement="right"
|
||
:cancel-button="false"
|
||
message="内容很短"
|
||
>
|
||
<template #reference>
|
||
<tiny-button>点击弹出，info 信息，右侧显示</tiny-button>
|
||
</template>
|
||
</tiny-popconfirm>
|
||
</div>
|
||
|
||
<div class="block">
|
||
<tiny-popconfirm type="warning" title="这是警告气泡" placement="bottom" message="内容很短">
|
||
<template #reference>
|
||
<tiny-button>默认悬浮弹出，warning 警告，下面显示</tiny-button>
|
||
</template>
|
||
</tiny-popconfirm>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Popconfirm, Button } from '@opentiny/vue'
|
||
|
||
export default {
|
||
components: {
|
||
TinyPopconfirm: Popconfirm,
|
||
TinyButton: Button
|
||
},
|
||
data() {
|
||
return {
|
||
activeName: 1
|
||
}
|
||
},
|
||
methods: {}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.block {
|
||
margin-bottom: 100px;
|
||
}
|
||
</style>
|