Tip 气泡提示
引入
import { Tip } from 'mand-mobile'
Vue.component(Tip.name, Tip)
代码演示
上方
<template>
<div class="md-example-child md-example-child-tip md-example-child-tip-0">
<md-tip content="不错哟" placement="top">
<md-button type="ghost" size="small">点击我</md-button>
</md-tip>
</div>
</template>
<script>
import {Tip, Button} from 'mand-mobile'
export default {
name: 'tips-demo',
components: {
[Tip.name]: Tip,
[Button.name]: Button,
},
}
</script>
左侧
<template>
<div class="md-example-child md-example-child-tip md-example-child-tip-2">
<md-tip content="不错哟" placement="left">
<md-button type="ghost" size="small">点击我</md-button>
</md-tip>
</div>
</template>
<script>
import {Tip, Button} from 'mand-mobile'
export default {
name: 'tips-demo',
components: {
[Tip.name]: Tip,
[Button.name]: Button,
},
}
</script>
事件
<template>
<div class="md-example-child md-example-child-tip md-example-child-tip-4">
<md-tip content="不错哟" @show="onShow" @hide="onHide">
<md-button type="ghost" size="small">点击我</md-button>
</md-tip>
</div>
</template>
<script>
import {Tip, Button, Toast} from 'mand-mobile'
export default {
name: 'tips-demo',
components: {
[Tip.name]: Tip,
[Button.name]: Button,
},
methods: {
onShow() {
Toast({
content: '显示了',
})
},
onHide() {
Toast({
content: '隐藏了',
})
},
},
}
</script>
下方
<template>
<div class="md-example-child md-example-child-tip md-example-child-tip-1">
<md-tip content="不错哟" placement="bottom">
<md-button type="ghost" size="small">点击我</md-button>
</md-tip>
</div>
</template>
<script>
import {Tip, Button} from 'mand-mobile'
export default {
name: 'tips-demo',
components: {
[Tip.name]: Tip,
[Button.name]: Button,
},
}
</script>
右侧
<template>
<div class="md-example-child md-example-child-tip md-example-child-tip-3">
<md-tip content="点击拼车更有优惠,拼成还可能获得随机礼包" placement="right">
<md-button type="ghost" size="small">点击我</md-button>
</md-tip>
</div>
</template>
<script>
import {Tip, Button} from 'mand-mobile'
export default {
name: 'tips-demo',
components: {
[Tip.name]: Tip,
[Button.name]: Button,
},
}
</script>
API
Tips Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
content | 提示文本内容 | String, Number | - | - |
placement | 位置 | String | top | top , left , bottom , right |
Tip@show()
提示框显示后触发的事件
Tip@hide()
提示框隐藏后触发的事件