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

Tip@show()

提示框显示后触发的事件

Tip@hide()

提示框隐藏后触发的事件