NoticeBar 通告栏

Scan me!

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

引入

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

代码演示

基本

NoticeBar 通知栏 - 图2

  1.         <template>
  2.   <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-0">
  3.     <md-notice-bar>为了确保您的资金安全，请设置支付密码</md-notice-bar>
  4.   </div>
  5. </template>
  7. <script>
  8. import {NoticeBar} from 'mand-mobile'
  10. export default {
  11.   name: 'notice-bar-demo',
  12.   components: {
  13.     [NoticeBar.name]: NoticeBar,
  14.   },
  15. }
  17. </script>
  18.

设置时间

5s后隐藏

NoticeBar 通知栏 - 图3

        <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>

样式

NoticeBar 通知栏 - 图4

        <template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-4">
    <md-notice-bar
      icon="warn"
      mode="closable"
      type="warning"
    >
      该银行3:00-12:00系统维护，请更换其他银行卡
    </md-notice-bar>
    <md-notice-bar
      icon="coupon"
      mode="link"
      type="activity"
      style="margin-top:10px;"
    >
      福利来啦，7日免息券发放中！
    </md-notice-bar>
  </div>
</template>

<script>
import {NoticeBar} from 'mand-mobile'

export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
  },
}

</script>

<style lang="stylus">
.md-example-child-notice-bar-4
  flex-direction column
  .md-notice-bar
    width 100%
</style>

滚动播放

NoticeBar 通知栏 - 图5

        <template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-6">
    <md-notice-bar
      mode="closable"
      icon="volumn"
      scrollable
    >
      为了确保您的资金安全，请设置支付密码为了确保您的资金安全，请设置支付密码为了确保您的资金安全，请设置支付密码
    </md-notice-bar>
  </div>
</template>

<script>
import {NoticeBar} from 'mand-mobile'

export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
  },
}

</script>

设置图标

NoticeBar 通知栏 - 图6

        <template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-1">
    <md-notice-bar
      mode="closable"
      icon="security"
    >
      为了确保您的资金安全，请设置支付密码
    </md-notice-bar>
  </div>
</template>

<script>
import {NoticeBar} from 'mand-mobile'

export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
  },
}

</script>

圆角

NoticeBar 通知栏 - 图7

        <template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-3">
    <md-notice-bar round>为了确保您的资金安全，请设置支付密码</md-notice-bar>
  </div>
</template>

<script>
import {NoticeBar} from 'mand-mobile'

export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
  },
}

</script>

多行显示

NoticeBar 通知栏 - 图8

        <template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-5">
    <md-notice-bar
      mode="link"
      icon="security"
      multi-rows
    >
      为了确保您的资金安全，请设置支付密码。为了确保您的资金安全，请设置支付密码。为了确保您的资金安全，请设置支付密码。
    </md-notice-bar>
  </div>
</template>

<script>
import {NoticeBar} from 'mand-mobile'

export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
  },
}

</script>

使用插槽自定义

NoticeBar 通知栏 - 图9

        <template>
  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-7">
    <md-notice-bar>
      <md-icon slot="left" class="md-notice-demo-icon md-notice-demo-icon-left" name="security"></md-icon>
      为了确保您的资金安全，请设置支付密码
    </md-notice-bar>
  </div>
</template>

<script>
import {NoticeBar, Icon} from 'mand-mobile'

export default {
  name: 'notice-bar-demo',
  components: {
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
  },
}

</script>

API

NoticeBar Props

属性说明类型默认值备注
mode右边提示类型String-closable, link
type主题样式Stringdefaultdefault, activity, warning
time显示时长Number0单位为ms，不需要自动消失可将其置为0
round圆角展示Booleanfalse-
multi-rows内容超出多行展示Booleanfalse优先级高于scrollable
scrollable内容超出滚动展示Booleanfalse优先级低于multiRows
icon左侧图标String--
icon-svg使用svg图标Booleanfalse-

NoticeBar Slots

default

默认内容插槽

left

左侧插槽，一般用于放置图标等

right

右侧插槽，一般用于放置图标等

NoticeBar Events

@close()

通告栏关闭事件（设置mode为closable）