Notice 通告栏

通常用于系统提醒、活动提醒等通知

引入

import { NoticeBar } from 'mand-mobile'
Vue.component(NoticeBar.name, NoticeBar)

代码演示

基本

<template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-0">
    <md-notice-bar>为了确保您的资金安全，请设置支付密码</md-notice-bar>
  </div>
</template>
<script>
import {NoticeBar} from 'mand-mobile'
export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
  },
}
</script>
                

设置时间

5s后隐藏

<template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-2">
    <md-notice-bar :time="5000">为了确保您的资金安全，请设置支付密码</md-notice-bar>
  </div>
</template>
<script>
import {NoticeBar} from 'mand-mobile'
export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
  },
}
</script>
                

设置图标

<template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-1">
    <md-notice-bar
      :closable="false"
      icon="right"
    >
      为了确保您的资金安全，请设置支付密码
    </md-notice-bar>
  </div>
</template>
<script>
import {NoticeBar} from 'mand-mobile'
export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
  },
}
</script>
 
                

API

NoticeBar Props