Tip 气泡提示

Scan me!

引入

  1. import { Tip } from 'mand-mobile'
  2. Vue.component(Tip.name, Tip)

代码演示

上方

  1. <template>
  2. <div class="md-example-child md-example-child-tip md-example-child-tip-0">
  3. <md-tip content="不错哟" placement="top">
  4. <md-button type="ghost" size="small">点击我</md-button>
  5. </md-tip>
  6. </div>
  7. </template>
  8. <script>
  9. import {Tip, Button} from 'mand-mobile'
  10. export default {
  11. name: 'tips-demo',
  12. components: {
  13. [Tip.name]: Tip,
  14. [Button.name]: Button,
  15. },
  16. }
  17. </script>
  18.  

左侧

  1. <template>
  2. <div class="md-example-child md-example-child-tip md-example-child-tip-2">
  3. <md-tip content="不错哟" placement="left">
  4. <md-button type="ghost" size="small">点击我</md-button>
  5. </md-tip>
  6. </div>
  7. </template>
  8. <script>
  9. import {Tip, Button} from 'mand-mobile'
  10. export default {
  11. name: 'tips-demo',
  12. components: {
  13. [Tip.name]: Tip,
  14. [Button.name]: Button,
  15. },
  16. }
  17. </script>

事件

  1. <template>
  2. <div class="md-example-child md-example-child-tip md-example-child-tip-4">
  3. <md-tip content="不错哟" @show="onShow" @hide="onHide">
  4. <md-button type="ghost" size="small">点击我</md-button>
  5. </md-tip>
  6. </div>
  7. </template>
  8. <script>
  9. import {Tip, Button, Toast} from 'mand-mobile'
  10. export default {
  11. name: 'tips-demo',
  12. components: {
  13. [Tip.name]: Tip,
  14. [Button.name]: Button,
  15. },
  16. methods: {
  17. onShow() {
  18. Toast({
  19. content: '显示了',
  20. })
  21. },
  22. onHide() {
  23. Toast({
  24. content: '隐藏了',
  25. })
  26. },
  27. },
  28. }
  29. </script>
  30.  

下方

  1. <template>
  2. <div class="md-example-child md-example-child-tip md-example-child-tip-1">
  3. <md-tip content="不错哟" placement="bottom">
  4. <md-button type="ghost" size="small">点击我</md-button>
  5. </md-tip>
  6. </div>
  7. </template>
  8. <script>
  9. import {Tip, Button} from 'mand-mobile'
  10. export default {
  11. name: 'tips-demo',
  12. components: {
  13. [Tip.name]: Tip,
  14. [Button.name]: Button,
  15. },
  16. }
  17. </script>
  18.  

右侧

  1. <template>
  2. <div class="md-example-child md-example-child-tip md-example-child-tip-3">
  3. <md-tip content="点击拼车更有优惠,拼成还可能获得随机礼包" placement="right">
  4. <md-button type="ghost" size="small">点击我</md-button>
  5. </md-tip>
  6. </div>
  7. </template>
  8. <script>
  9. import {Tip, Button} from 'mand-mobile'
  10. export default {
  11. name: 'tips-demo',
  12. components: {
  13. [Tip.name]: Tip,
  14. [Button.name]: Button,
  15. },
  16. }
  17. </script>
  18.  

API

Tips Props

属性说明类型默认值备注
content提示文本内容String, Number--
placement位置Stringtoptop, left, bottom, right

Tip@show()

提示框显示后触发的事件

Tip@hide()

提示框隐藏后触发的事件