Vue练习四十五：06_02_仿腾讯微博效果_待完善淡入淡出

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("\u8bf7\u586b\u5199\u60a8\u7684\u59d3\u540d");
                this.$refs.username.focus()
            }
            else if(!/^[u4e00-\u9fa5\w]{2,8}$/g.test(this.username)){
                alert("\u59d3\u540d\u75312-8\u4f4d\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\u3001\u6c49\u5b57\u7ec4\u6210\uff01");
                this.$refs.username.focus()
            }
            else if(reg.test(this.conbox)){
                alert("\u968f\u4fbf\u8bf4\u70b9\u4ec0\u4e48\u5427\uff01");
                this.$refs.conbox.focus()
            }
            else if(!this.bSend){
                alert("\u4f60\u8f93\u5165\u7684\u5185\u5bb9\u5df2\u8d85\u51fa\u9650\u5236\uff0c\u8bf7\u68c0\u67e5\uff01");
                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>