Demo 在线地址:
https://sx00xs.github.io/test/45/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<template> <div class="msgBox"> <form @submit="handleSubmit" ref="myForm"> <h2>来 , 说说你在做什么 , 想什么</h2> <div> <input id="userName" class="f-text" v-model="username" ref="username" :class="{active:isusernameAcitve}" @focus="handleuserNameFocus" @blur="handleuserNameBlur" /> <p id="face"> <img v-for="(pic, index) in pics" :key="pic.src" :src="pic.src" :class="[{current:pic.isActive},{hover:pic.isOver}]" @mouseover="handleImgOver(pic)" @mouseout="handleImgOut(pic)" @click="handleImgClick(index)" > </p> </div> <div><textarea id="conBox" class="f-text" v-model="conbox" ref="conbox" :class="{active:isconboxActive}" @blur="hadnleconboxBlur" @keyup="confine" @focus="confine" @change="confine" ></textarea></div> <div class="tr"> <p> <span class="countTxt">{{countTxt}}</span><strong :class="[{maxNumColor:isMaxNumActive},maxNum]">{{maxNum}}</strong><span>个字</span> <input @click="handleSend" id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" @mouseover="handleSendOver" :class="{hover:isSendActive}" @mouseout="handleSendOut" /> </p> </div> </form> <div class="list"> <h3><span>大家在说</span></h3> <ul> <template v-if="lists.length"> <li v-for="(list,index) in lists" :key="index" :class="{hover:list.isLiActive}" @mouseover="handleLiover(index)" @mouseout="handleLiout" > <div class="userPic"><img :src="list.src"/></div> <div class="content"> <div class="userName"><a href="#">{{list.username}}</a></div> <div class="msgInfo">{{list.msg}}</div> <div class="times"><span>{{list.times}}</span><a @click="handleDelLi(index)" class="del" v-show="list.isLiActive" href="#">删除</a></div> </div> </li> </template> </ul> </div> </div> </template> <script> import {lists, pics} from './lists'; function format(str){ return str.toString().replace(/^(d)$/,'0$1'); } export default { name:'Navs', data(){ return{ pics:pics, lists:lists, username:'', conbox:'', bSend:false, isusernameAcitve:false, isconboxActive:false, maxNum:140, countTxt:'还能输入', isMaxNumActive:false, isSendActive:false } }, methods:{ handleDelLi(index){ this.lists.splice(index,1) }, handleLiover(index){ for(var i=0;i<this.lists.length;i++) this.lists[i].isLiActive=false; this.lists[index].isLiActive=true; }, handleLiout(){ for(var i=0;i<this.lists.length;i++) this.lists[i].isLiActive=false; }, handleSendOver(){ this.isSendActive=true; }, handleSendOut(){ this.isSendActive=false; }, handleuserNameFocus(){ this.isusernameAcitve=true; }, handleuserNameBlur(){ this.isusernameAcitve=false; }, hadnleconboxBlur(){ this.isconboxActive=false; }, confine(){ this.isconboxActive=true; var len=0; for(var i=0;i<this.conbox.length;i++) len += /[^x00-xff]/g.test(this.conbox.charAt(i)) ? 1 : 0.5; this.maxNum = Math.abs(140 - Math.floor(len)); 140 - Math.floor(len) >= 0 ? (this.isMaxNumActive=false,this.countTxt='还能输入',this.bSend=true) :(this.isMaxNumActive=true, this.countTxt='已超出',this.bSend=false); }, handleImgOver(pic){ pic.isOver=true; }, handleImgOut(pic){ pic.isOver=false; }, handleImgClick(index){ for(var i=0; i<this.pics.length;i++) this.pics[i].isActive=false; this.pics[index].isActive=true; }, handleSubmit(){ return false; }, handleSend(){ var reg=/^s*$/g; if(reg.test(this.username)){ alert("u8bf7u586bu5199u60a8u7684u59d3u540d"); this.$refs.username.focus() } else if(!/^[u4e00-u9fa5w]{2,8}$/g.test(this.username)){ alert("u59d3u540du75312-8u4f4du5b57u6bcdu3001u6570u5b57u3001u4e0bu5212u7ebfu3001u6c49u5b57u7ec4u6210uff01"); this.$refs.username.focus() } else if(reg.test(this.conbox)){ alert("u968fu4fbfu8bf4u70b9u4ec0u4e48u5427uff01"); this.$refs.conbox.focus() } else if(!this.bSend){ alert("u4f60u8f93u5165u7684u5185u5bb9u5df2u8d85u51fau9650u5236uff0cu8bf7u68c0u67e5uff01"); this.$refs.conbox.focus() } else{ var date = new Date(); var mySrc = ''; for(var i=0;i<this.pics.length;i++){ if(this.pics[i].isActive) mySrc =this.pics[i].src; } this.lists.unshift({ src:mySrc, username:this.username, msg:this.conbox, times:format(date.getMonth() + 1) + 'u6708' + format(date.getDate()) + 'u65e5 ' + format(date.getHours()) + ':' + format(date.getMinutes()), isLiActive:false }); this.username=''; this.conbox=''; for(var i=0;i<this.pics.length;i++) this.pics[i].isActive=false; this.pics[0].isActive=true; } }, handleDocKeyup(){ event.ctrlKey && event.keyCode == 13 && this.handleSend() } }, mounted(){ document.addEventListener('keyup',this.handleDocKeyup); this.confine(); } } </script>