ant-design-vue/components/tooltip/demo/auto-adjust-overflow.vue

44 lines
895 B
Vue
Raw Normal View History

2018-01-11 10:53:51 +00:00
<template>
<div>
<md>
## 自动调整位置
气泡框不可见时自动调整位置
</md>
<div :style="wrapStyles">
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
2018-01-23 10:55:39 +00:00
<a-button>Adjust automatically / 自动调整</a-button>
2018-01-11 10:53:51 +00:00
</Tooltip>
<br />
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">
2018-01-23 10:55:39 +00:00
<a-button>Ingore / 不处理</a-button>
2018-01-11 10:53:51 +00:00
</Tooltip>
</div>
</div>
</template>
<script>
import { Tooltip, Button } from 'antd'
const wrapStyles = {
overflow: 'hidden',
position: 'relative',
padding: '24px',
border: '1px solid #e9e9e9',
}
export default {
data () {
return {
wrapStyles,
}
},
methods: {
getPopupContainer (trigger) {
return trigger.parentElement
},
},
components: {
Tooltip,
2018-01-23 10:55:39 +00:00
2018-01-11 10:53:51 +00:00
},
}
</script>