vue2组件系列第四十节:NoticeBar 通告栏

NoticeBar通造栏一般会出现在顶部或者是比较显眼的地方，目的就是引大家的注意。

准备工作：

1. 创建一个页面:NoticeBar.vue
2. 在router.js里配置NoticeBar页面的路由

{
 path: '/noticebar',
 name: 'noticebar',
 component: () => import('./views/NoticeBar.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/noticebar')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>NoticeBar</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了36个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示NoticeBar 通告栏：

基础用法：

<van-notice-bar
 text="公司最近开发了一款app，采用了混合式开发模式，由于时间比较紧张，所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。"
 left-icon="volume-o"
/>

右侧显示关闭图标

<van-notice-bar
 mode="closeable"
 text="公司最近开发了一款app，采用了混合式开发模式，由于时间比较紧张，所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。"
 left-icon="volume-o"
 />

如果想让关闭起作用，当然是触发click事件：

<van-notice-bar
 v-show="isShow"
 mode="closeable"
 text="公司最近开发了一款app，采用了混合式开发模式，由于时间比较紧张，所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。"
 left-icon="volume-o"
 @click="onClick"
 />
data() {
 return {
 isShow: true
 }
 },
 
 methods: {
 onClick() {
 this.isShow = false
 },
}

右侧显示箭头：

<van-notice-bar
 v-show="isShow"
 mode="link"
 text="公司最近开发了一款app，采用了混合式开发模式，由于时间比较紧张，所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。"
 left-icon="volume-o"
 @click="onClick"
 />

mode:通告栏模式，通常有两种模式：closeable, link，就是上面我们介绍的两种模式。

left-icon：设置左侧小图标。

speed：滚动速度

到目前为止呢，NoticeBar 通告栏就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油