"framework7 vue With Messagebar实例"

<template> <f7-messages> <f7-message v-for=”message in messages” :text=”message.text” :label=”message.label” :date=”message.date” :name=”message.name” :avatar=”message.avatar” :type=”message.type” :day=”message.day” :time=”message.time” @click=”onClick” @click:text=”onTextClick” @click:name=”onNameClick” @click:avatar=”onAvatarClick” ></f7-message> </f7-messages> <f7-messagebar placeholder=”Message” send-link=”Send” @submit=”onSubmit”></f7-messagebar></template><script> export default { data: function () { return { name: ‘Vladimir’, avatar: ‘path/to/avatar-1.jpg’, messages: [ { day: ‘Wendesday’, time: ‘13:34’ }, { name: ‘Vladimir’, text: ‘How are you?’, label: ‘Sent in good mood :)’, avatar: ‘path/to/avatar-1.jpg’, date: ‘Yesterday 13:34’ }, { name: ‘Jane’, text: ‘I'm good, thank you!’, type: ‘received’, avatar: ‘path/to/avatar-2.jpg’, date: ‘Yesterday at 13:50’ } ] } }, methods: { onClick: function (event) { console.log(‘message click’); }, onAvatarClick: function () { console.log(‘avatar-click’); }, onTextClick: function () { console.log(‘text-click’); }, onNameClick: function () { console.log(‘name-click’); },

//提交时候获取内容并清空text.trim()内容 onSubmit: function (text, clear) { if (text.trim().length === 0) return; this.messages.push({ name: this.name, avatar: this.avatar, text: text, date: (function () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); return hours + ‘:’ + minutes; })() }); // Clear Message Bar clear(); } } } </script>