login组件的两种用法_vue2组件系列第四十节：NoticeBar 通告栏

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

准备工作：

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

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

1. 在index.vue里添加一项

NoticeBar

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

代码演示NoticeBar 通告栏：

基础用法：

右侧显示关闭图标

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

data() { return { isShow: true } },  methods: { onClick() { this.isShow = false },}

右侧显示箭头：

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

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

speed：滚动速度

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

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