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="default">点击我</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="default" size="small" inline>点击我</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
      name="md-tip-4"
      icon="security"
      content="完善信息，领取5元免息券"
      :offset="{top: -10}"
      fill
      @show="onShow"
      @hide="onHide"
    >
      <md-button type="default">点击我</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(name) {
      Toast({
        content: `显示了${name}`,
      })
    },
    onHide(name) {
      Toast({
        content: `隐藏了${name}`,
      })
    },
  },
}

</script>

<style lang="stylus">
.md-tip-4
  .md-tip-bg
    background-color #FFEBDF
    &:after
      border-width 10px 11px 0 11px
      border-color #FFEBDF transparent transparent transparent
  .md-tip-content
    padding-left 80px
    color #C37447
    .md-icon-security
      position absolute
      left 32px
      width 64px !important
      height 64px !important
  .md-tip-bg
    box-shadow none
    opacity 1
</style>


      

下方

        <template>
  <div class="md-example-child md-example-child-tip md-example-child-tip-1">
    <md-tip content="不错哟" placement="bottom">
      <md-button type="default">点击我</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="default" size="small" inline>点击我</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

Tip Props

Tip Events

@show()

提示框显示后触发的事件

@hide()

提示框隐藏后触发的事件