55 <f7-messagebar
66 :placeholder =" placeholder"
77 ref =" messagebar"
8- :attachmentsVisible =" attachmentsVisible"
9- :sheetVisible =" sheetVisible"
8+ :attachments-visible =" attachmentsVisible"
9+ :sheet-visible =" sheetVisible"
10+ :value =" messageText"
11+ @input =" messageText = $event.target.value"
1012 >
1113 <f7-link
12- icon-if-ios =" f7:camera_fill"
13- icon-if-md =" f7:camera_alt"
14+ icon-ios =" f7:camera_fill"
15+ icon-aurora =" f7:camera_fill"
16+ icon-md =" material:camera_alt"
1417 slot =" inner-start"
15- @click =" sheetToggle "
18+ @click =" sheetVisible = !sheetVisible "
1619 ></f7-link >
1720 <f7-link
18- icon-if-ios =" f7:arrow_up_fill"
19- icon-if-md =" material:send"
21+ icon-ios =" f7:arrow_up_round_fill"
22+ icon-aurora =" f7:arrow_up_round_fill"
23+ icon-md =" material:send"
2024 slot =" inner-end"
2125 @click =" sendMessage"
2226 ></f7-link >
4549 v-for =" (message, index) in messagesData"
4650 :key =" index"
4751 :type =" message.type"
48- :text =" message.text"
4952 :image =" message.image"
5053 :name =" message.name"
5154 :avatar =" message.avatar"
5255 :first =" isFirstMessage(message, index)"
5356 :last =" isLastMessage(message, index)"
5457 :tail =" isTailMessage(message, index)"
58+ >
59+ <span slot =" text" v-if =" message.text" v-html =" message.text" span >
60+ </f7-message >
61+ <f7-message v-if =" typingMessage"
62+ type =" received"
63+ :typing =" true"
64+ :first =" true"
65+ :last =" true"
66+ :tail =" true"
67+ :header =" `${typingMessage.name} is typing`"
68+ :avatar =" typingMessage.avatar"
5569 ></f7-message >
5670 </f7-messages >
5771 </f7-page >
5872</template >
5973<script >
74+ import { f7Navbar , f7Page , f7Messages , f7MessagesTitle , f7Message , f7Messagebar , f7Link , f7MessagebarAttachments , f7MessagebarAttachment , f7MessagebarSheet , f7MessagebarSheetImage } from ' framework7-vue'
75+
6076 export default {
77+ components: {
78+ f7Navbar,
79+ f7Page,
80+ f7Messages,
81+ f7MessagesTitle,
82+ f7Message,
83+ f7Messagebar,
84+ f7MessagebarAttachments,
85+ f7MessagebarAttachment,
86+ f7MessagebarSheet,
87+ f7MessagebarSheetImage,
88+ f7Link,
89+ },
6190 data () {
6291 return {
6392 attachments: [],
6493 sheetVisible: false ,
94+ typingMessage: null ,
95+ messageText: ' '
6596 messagesData: [
6697 {
6798 type: ' sent'
75106 name: ' Kate'
76107 type: ' received'
77108 text: ' Hi, I am good!'
78- avatar: ' http ://lorempixel.com/100/100/ people/9 '
109+ avatar: ' https ://cdn.framework7.io/placeholder/ people-100x100-9.jpg '
79110 },
80111 {
81112 name: ' Blue Ninja'
82113 type: ' received'
83114 text: ' Hi there, I am also fine, thanks! And how are you?'
84- avatar: ' http ://lorempixel.com/100/100/ people/7 '
115+ avatar: ' https ://cdn.framework7.io/placeholder/ people-100x100-7.jpg '
85116 },
86117 {
87118 type: ' sent'
93124 },
94125 {
95126 type: ' sent'
96- image: ' http ://lorempixel.com/200/260/ cats/4/ '
127+ image: ' https ://cdn.framework7.io/placeholder/ cats-200x260-4.jpg '
97128
98129 },
99130 {
100131 name: ' Kate'
101132 type: ' received'
102133 text: ' Nice!'
103- avatar: ' http ://lorempixel.com/100/100/ people/9 '
134+ avatar: ' https ://cdn.framework7.io/placeholder/ people-100x100-9.jpg '
104135 },
105136 {
106137 name: ' Kate'
107138 type: ' received'
108139 text: ' Like it very much!'
109- avatar: ' http ://lorempixel.com/100/100/ people/9 '
140+ avatar: ' https ://cdn.framework7.io/placeholder/ people-100x100-9.jpg '
110141 },
111142 {
112143 name: ' Blue Ninja'
113144 type: ' received'
114145 text: ' Awesome!'
115- avatar: ' http ://lorempixel.com/100/100/ people/7 '
146+ avatar: ' https ://cdn.framework7.io/placeholder/ people-100x100-7.jpg '
116147 },
117148 ],
118149 images: [
119- ' http ://lorempixel.com/300/300/ cats/1/ '
120- ' http ://lorempixel.com/200/300/ cats/2/ '
121- ' http ://lorempixel.com/400/300/ cats/3/ '
122- ' http ://lorempixel.com/300/150/ cats/4/ '
123- ' http ://lorempixel.com/150/300/ cats/5/ '
124- ' http ://lorempixel.com/300/300/ cats/6/ '
125- ' http ://lorempixel.com/300/300/ cats/7/ '
126- ' http ://lorempixel.com/200/300/ cats/8/ '
127- ' http ://lorempixel.com/400/300/ cats/9/ '
128- ' http ://lorempixel.com/300/150/ cats/10/ '
150+ ' https ://cdn.framework7.io/placeholder/ cats-300x300-1.jpg '
151+ ' https ://cdn.framework7.io/placeholder/ cats-200x300-2.jpg '
152+ ' https ://cdn.framework7.io/placeholder/ cats-400x300-3.jpg '
153+ ' https ://cdn.framework7.io/placeholder/ cats-300x150-4.jpg '
154+ ' https ://cdn.framework7.io/placeholder/ cats-150x300-5.jpg '
155+ ' https ://cdn.framework7.io/placeholder/ cats-300x300-6.jpg '
156+ ' https ://cdn.framework7.io/placeholder/ cats-300x300-7.jpg '
157+ ' https ://cdn.framework7.io/placeholder/ cats-200x300-8.jpg '
158+ ' https ://cdn.framework7.io/placeholder/ cats-400x300-9.jpg '
159+ ' https ://cdn.framework7.io/placeholder/ cats-300x150-10.jpg '
129160 ],
130161 people: [
131162 {
132163 name: ' Kate Johnson'
133- avatar: ' http ://lorempixel.com/100/100/ people/9 '
164+ avatar: ' https ://cdn.framework7.io/placeholder/ people-100x100-9.jpg '
134165 },
135166 {
136167 name: ' Blue Ninja'
137- avatar: ' http ://lorempixel.com/100/100/ people/7 '
168+ avatar: ' https ://cdn.framework7.io/placeholder/ people-100x100-7.jpg '
138169 },
139170 ],
140171 answers: [
154185 responseInProgress: false ,
155186 };
156187 },
157- // Resize page when attachments or sheet become visible
158- watch: {
159- attachmentsVisible () {
160- const self = this ;
161- self .$nextTick (() => {
162- self .messagebar .resizePage ();
163- });
164- },
165- sheetVisible () {
166- const self = this ;
167- self .$nextTick (() => {
168- self .messagebar .resizePage ();
169- });
170- },
171- },
172188 computed: {
173189 attachmentsVisible () {
174190 const self = this ;
179195 return self .attachments .length > 0 ? ' Add comment or Send' : ' Message'
180196 },
181197 },
198+ mounted () {
199+ const self = this ;
200+ self .$f7ready (() => {
201+ self .messagebar = self .$refs .messagebar .f7Messagebar ;
202+ self .messages = self .$refs .messages .f7Messages ;
203+ });
204+ },
182205 methods: {
183206 isFirstMessage (message , index ) {
184207 const self = this ;
201224 if (! nextMessage || nextMessage .type !== message .type || nextMessage .name !== message .name ) return true ;
202225 return false ;
203226 },
204- sheetToggle () {
205- const self = this ;
206- self .sheetVisible = ! self .sheetVisible ;
207- },
208227 deleteAttachment (image ) {
209228 const self = this ;
210229 const index = self .attachments .indexOf (image);
224243 },
225244 sendMessage () {
226245 const self = this ;
227- const text = self .messagebar . getValue () .replace (/ \n / g' <br>' trim ();
246+ const text = self .messageText .replace (/ \n / g' <br>' trim ();
228247 const messagesToSend = [];
229248 self .attachments .forEach ((attachment ) => {
230249 messagesToSend .push ({
231250 image: attachment,
232251 });
233252 });
234- if (text .trim (). length ) {
253+ if (text .length ) {
235254 messagesToSend .push ({
236255 text,
237256 });
238257 }
258+ if (messagesToSend .length === 0 ) {
259+ return ;
260+ }
261+
239262 // Reset attachments
240263 self .attachments = [];
241264 // Hide sheet
242265 self .sheetVisible = false ;
243266 // Clear area
244- self .messagebar . clear () ;
267+ self .messageText = ' '
245268 // Focus area
246269 if (text .length ) self .messagebar .focus ();
247270 // Send message
253276 setTimeout (() => {
254277 const answer = self .answers [Math .floor (Math .random () * self .answers .length )];
255278 const person = self .people [Math .floor (Math .random () * self .people .length )];
256- self .messages . showTyping ( {
257- header : ` ${ person .name } is typing `
279+ self .typingMessage = {
280+ name : person .name ,
258281 avatar: person .avatar ,
259- }) ;
282+ };
260283 setTimeout (() => {
261284 self .messagesData .push ({
262285 text: answer,
263286 type: ' received'
264287 name: person .name ,
265288 avatar: person .avatar ,
266289 });
267- self .messages . hideTyping () ;
290+ self .typingMessage = null ;
268291 self .responseInProgress = false ;
269292 }, 4000 );
270293 }, 1000 );
271- }
294+ },
272295 },
273- mounted () {
274- this .$f7ready ((f7 ) => {
275- const self = this ;
276- self .messagebar = self .$refs .messagebar .f7Messagebar ;
277- self .messages = self .$refs .messages .f7Messages ;
278- })
279- }
280296 };
281297script >
0 commit comments