用户登录

在 AppNotification 组件里面可以显示一些通知提示信息,我们可以给这个通知提示信息单独再去创建一个组件。回到项目,先打开 app-notification 组件,在组件里面手工添加一个数据,名字叫 messages ,它的值是一个数组,数组里的每个项目都是一个对象。

这个对象数据就是提示信息组件里需要用的一些数据。它应该有一个 id 属性,还有 content 属性,对应的值就是要显示的信息内容。还可以添加一个 icon 属性,用它设置要使用的小图标。 用同样的方法,可以再添加两个信息对象。每个对象里都有 id,content 属性, 如果忽略 icon 属性,在通知提示信息组件里可以显示一个默认的小图标。

AppNotificationMessage

下面去创建一个组件,放在 src/app/notificaiton/components 的下面,名字是 app-notification-message.vue, 在这个文件里定义一个组件,组件的名字叫 AppNotificationMessage。

在组件的模板里的这个包装元素上面,可以添加一个类,名字是 app-notificaiton-message 。等会儿用这个类可以设计一下这个组件的样式。

在组件里声明一个属性,属性的名字叫 message,这个属性值的类型是 Object。

继续编辑这个组件模板,添加一个 div,上面加上 icon,里面可以包装一个小图标。 下面再添加一个 div,加上 content 这个类,它里面包装的是信息内容。这里可以绑定输出 message 里的 content 。

在组件里导入使用 AppIcon ,位置是 @/app/components/app-icon ,在组件的 components 里面,添加一个 AppIcon。

然后在组件的模板里再用一下这个 AppIcon,把它放在这个带 icon 类的元素里面。绑定一下它的 name 属性,值可以设置成 messageIcon。

在这个组件里添加一个 computed 属性,名字叫 messageIcon,它返回的值就是要显示的小图标的名字。 return 的东西可以先判断一下 this.message.icon 有没有值,如果有,就返回 this.message,如果没有就返回一个 info ,也就是 info 是默认显示的小图标。

AppNotification

在 AppNotification 这个组件里面,用一下刚才我们定义的这个组件,导入 AppNotificationMessage,位置是当前目录 components 下面的 app-notification-message

在组件的 components 里面,要添加一个 AppNotificationMessage 。然后在组件的模板里再用一下这个组件,AppNotificationMessage,在这个组件上,用一下 v-for 指令循环一组数据, message in messages, 绑定 :key 属性,值可以设置成 message 里的 id 这个属性的值。再绑定一下 message 属性,对应的值就是当前被循环的这个项目,这里就是 message 。

预览

回到浏览器预览一下,现在页面右下角会显示一组通知提示信息。

定义通知提示信息组件(AppNotificationMessage)《 Vue.js 项目实践:消息提示 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点