_blogs/vue-module.js

 //登录组件 login 
Vue.component('login',{
                    template:`
            <div type="login" v-on:click="on.button.exit()" v-bind:style="style.box" align="center">
                <div v-bind:style="style.frame">
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.head">登录</span>
                    </label>
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.i">*</span>
                        <span v-bind:style="style.title">账号</span>
                        <input maxlength="9" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
                    </label>
                    <span v-bind:style="style.info"></span>
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.i">*</span>
                        <span v-bind:style="style.title">密码</span>
                        <input maxlength="16" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
                    </label>
                    <span v-bind:style="style.info"></span>
                    <label v-bind:style="style.label">
                        <button v-on:click="on.button.QR_code()" v-bind:style="[style.button,style.button[2]]">扫码</button>
                        <button v-on:click="on.button.login()" v-bind:style="[style.button,style.button[2]]">登录</button>
                        <button v-on:click="on.button.exit()" type="quit" v-bind:style="[style.button,style.button[1]]">关闭</button>
                    </label>
                    <label v-bind:style="style.qr.box">
                        <img  v-bind:style="style.qr.img" width="100" height="100" alt=""/>
                        <br/>
                        <button v-on:click="on.button.account_login()" v-bind:style="style.qr.button" >账号登录</button>
                    </label>
                </div>
            </div>`,
                    data:function () {
                        return {
                            style:{
                                box:{
                                    width:'100%',
                                    height:'100%',
                                    position:'fixed',
                                    zIndex:$('*').length * 2,
                                    background:'rgba(0,0,0,.2)'
                                },
                                frame:{
                                    display:'inline-grid',
                                    position: 'absolute',
                                    top:0,
                                    bottom:0,
                                    left:0,
                                    right:0,
                                    margin:'auto',
                                    width:'300px',
                                    height:'200px',
                                    borderRadius:'2.5px',
                                    padding:'20px 50px',
                                    background: '#FFF',
                                },
                                label:{
                                    height:'30px',
                                },
                                head:{
                                    lineHeight: '24px',
                                    fontSize: '18px',
                                    color: '#303133',
                                },
                                i:{
                                    color:'red',
                                },
                                title:{
                                    letterSpacing: '2.5px',
                                    marginRight:'5px',
                                    fontSize:'14px',
                                    color: '#606266',
                                    height:'30px',
                                    lineHeight:'30px',
                                },
                                input:{
                                    padding: '5px 10px',
                                    width: '200px',
                                    height: '20px',
                                    border:'1px solid #c3c3c3',
                                    borderRadius: '2.5px',
                                    outline:'none',
                                },
                                button:{
                                    cursor:'pointer',
                                    marginRight: '15px',
                                    float:'right',
                                    height:'30px',
                                    width:'70px',
                                    border:'none',
                                    borderRadius:'2.5px',
                                    outline: 'none',
                                    1:{
                                        border:'1px solid #c3c3c3',
                                        background:'#FFF',
                                        color:'black'
                                    },
                                    2:{
                                        border:'1px solid #409EFF',
                                        background:'#409EFF',
                                        color:'#FFF'

                                    }
                                },
                                info:{
                                    textAlign:'left',
                                    margin:'0 70px',
                                    height:'15px',
                                    letterSpacing:'2px',
                                    lineHeight: '15px',
                                    color:'red',
                                    fontSize: '10px',
                                },
                                qr:{
                                    box:{
                                        display:'none',
                                        height:'150px',
                                    },
                                    img:{
                                        borderRadius:'2.5px',
                                    },
                                    button:{
                                        cursor: 'pointer',
                                        marginTop:'15px',
                                        height:'30px',
                                        background:'#FFF',
                                        border:'1px solid #c3c3c3',
                                        outline:'none',
                                        width:'150px',
                                    }
                                }
                            },
                            on:{
                                input:{
                                    focus:function () {
                                        event.target.style.borderColor = '#409EFF';
                                    },
                                    blur:function () {
                                        var input = event.target;
                                        var info = $(input).parent('label').next('span')[0];
                                        var title = $(input).prev('span')[0].innerText;
                                        if ($(input).val() === defaultStatus||$(input).val()===null){
                                            info.innerText = title+'不能为空';
                                        } else if ($(input).val().indexOf(' ') !== -1){
                                            info.innerText = title+'不能包含空格';
                                        } else {
                                            info.innerText = '';
                                        }
                                        input.style.borderColor = '#c3c3c3';
                                    }
                                },
                                button:{
                                    exit:function () {
                                        if ($("div[type='login']").is(event.target) || $("button[type='quit']").is(event.target)){
                                            $("div[type='login']").css('display','none');
                                        }
                                    },
                                    login:function () {
                                        var message = $(event.target).parent('label').prevAll('label');
                                        var account = $(message[1]).find('input').val();
                                        var password = $(message[0]).find('input').val();
                                        var account_info = $(message[1]).next('span')[0];
                                        var password_info = $(message[0]).next('span')[0];
                                        var account_title = $(message[1]).find('span').eq(1).text();
                                        var password_title = $(message[0]).find('span').eq(1).text();
                                        if (account === defaultStatus||account===null){
                                            account_info.innerText = account_title+'不能为空';
                                        } else if (account.indexOf(' ') !== -1){
                                            account_info.innerText = account_title+'不能包含空格';
                                        }
                                        if (password === defaultStatus||password ===null){
                                            password_info.innerText = password_title+'不能为空';
                                        } else if (password.indexOf(' ') !== -1){
                                            password_info.innerText = password_title+'不能包含空格';
                                        }
                                        if (account !== defaultStatus
                                            &&account!==null
                                            &&account.indexOf(' ') === -1
                                            &&password !== defaultStatus
                                            &&password !==null
                                            &&password.indexOf(' ') === -1){

                                            POST('login',{
                                                account:account,
                                                password:password,
                                            },function (data) {
                                                alert_s(data.msg);
                                                if (data.error === 1){
                                                    $.cookie('uuid',data.uuid,{exports:15});
                                                    document.location.href = document.location.href;
                                                }
                                            })
                                            
                                        }
                                    },
                                    QR_code:function(){
                                        let qr_info = {
                                            time:new Date(),

                                        }
                                        
                                        alert_s('功能暂不支持');
                                        $(event.target).parent('label').next('label').find('img').attr('src','http://qrs.kegood.com/?url='+JSON.stringify(qr_info))
                                        $(event.target).parent('label').parent('div').find('label').css('display','none')
                                        $(event.target).parent('label').prevAll('span').text('')
                                        $(event.target).parent('label').parent('div').find('label')[0].style.display = 'block';
                                        $(event.target).parent('label').parent('div').find('label')[4].style.display = 'block';
                                    },
                                    account_login:function () {
                                        $(event.target).parent('label').parent('div').find('label').css('display','block')
                                        $(event.target).parent('label').parent('div').find('label')[4].style.display = 'none';
                                    }
                                }
                            }
                        };
                    }
                });

//注册组件 logon
Vue.component('logon',{
                    template:`
            <div type="login" v-on:click="on.button.exit()" v-bind:style="style.box" align="center">
                <input accept=".jpg,.png,.jpeg" type="file" hidden="hidden"/>
                <div v-bind:style="style.frame">
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.head">注册</span>
                    </label>
                    <label v-bind:style="style.label.portrait">
                        <span v-bind:style="style.i">*</span>
                        <span v-bind:style="[style.title,{marginRight:'0px'}]">头像</span>
                        <div v-on:mousedown="on.button.file" v-bind:style="style.portrait.box">
                            <i v-bind:style="style.portrait.x"></i>
                            <i v-bind:style="style.portrait.y"></i>
                        </div>
                    </label>
                    <span v-bind:style="style.info"></span>
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.i">*</span>
                        <span v-bind:style="style.title">昵称</span>
                        <input maxlength="9" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
                    </label>
                    <span v-bind:style="style.info"></span>
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.i">*</span>
                        <span v-bind:style="style.title">密码</span>
                        <input maxlength="16" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
                    </label>
                    <span v-bind:style="style.info"></span>
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.i">*</span>
                        <span v-bind:style="style.title">邮箱</span>
                        <input type="email" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
                    </label>
                    <span v-bind:style="style.info"></span>
                    <label v-bind:style="style.label">
                        <button v-on:click="on.button.logon()" v-bind:style="[style.button,style.button[2]]">注册</button>
                        <button v-on:click="on.button.exit()" type="quit" v-bind:style="[style.button,style.button[1]]">关闭</button>
                    </label>
                </div>
            </div>`,
                    data:function () {
                        return {
                            style:{
                                box:{
                                    width:'100%',
                                    height:'100%',
                                    position:'fixed',
                                    zIndex:$('*').length * 2,
                                    background:'rgba(0,0,0,.2)',
                                },
                                frame:{
                                    display:'inline-grid',
                                    position: 'absolute',
                                    top:0,
                                    bottom:0,
                                    left:0,
                                    right:0,
                                    margin:'auto',
                                    width:'300px',
                                    height:'350px',
                                    borderRadius:'2.5px',
                                    padding:'20px 50px',
                                    background: '#FFF',
                                },
                                label:{
                                    height:'30px',
                                    portrait:{
                                        marginTop:'10px',
                                        width:'100%',
                                        height:'70px',
                                        lineHeight:'70px',
                                    }
                                },
                                head:{
                                    lineHeight: '24px',
                                    fontSize: '18px',
                                    color: '#303133',
                                },
                                i:{
                                    color:'red',
                                },
                                title:{
                                    letterSpacing: '2.5px',
                                    marginRight:'5px',
                                    fontSize:'14px',
                                    color: '#606266',
                                    height:'30px',
                                    lineHeight:'30px',
                                },
                                input:{
                                    padding: '5px 10px',
                                    width: '200px',
                                    height: '20px',
                                    border:'1px solid #c3c3c3',
                                    borderRadius: '2.5px',
                                    outline:'none',
                                },
                                portrait:{
                                    box:{
                                        float:'right',
                                        position:'relative',
                                        marginRight:'163px',
                                        width:'70px',
                                        height:'70px',
                                        backgroundRepeat:'no-repeat',
                                        backgroundPosition:'center center',
                                        backgroundSize:'100% 100%',
                                        outline:'1px dotted #c3c3c3'
                                    },
                                    x:{
                                        left:'15px',
                                        right:'15px',
                                        top:'0px',
                                        bottom:'0px',
                                        margin:'auto',
                                        position:'absolute',
                                        height:'1px',
                                        background:'#c3c3c3',
                                    },
                                    y:{
                                        left:'0px',
                                        right:'0px',
                                        top:'15px',
                                        bottom:'15px',
                                        margin:'auto',
                                        position:'absolute',
                                        width:'1px',
                                        background:'#c3c3c3',
                                    }
                                },
                                button:{
                                    cursor:'pointer',
                                    marginRight: '15px',
                                    float:'right',
                                    height:'30px',
                                    width:'70px',
                                    border:'none',
                                    borderRadius:'2.5px',
                                    outline: 'none',
                                    1:{
                                        border:'1px solid #c3c3c3',
                                        background:'#FFF',
                                        color:'black'
                                    },
                                    2:{
                                        border:'1px solid #409EFF',
                                        background:'#409EFF',
                                        color:'#FFF'

                                    }
                                },
                                info:{
                                    textAlign:'left',
                                    margin:'0 70px',
                                    height:'15px',
                                    letterSpacing:'2px',
                                    lineHeight: '15px',
                                    color:'red',
                                    fontSize: '10px',
                                },
                                qr:{
                                    box:{
                                        display:'none',
                                        height:'150px',
                                    },
                                    img:{
                                        borderRadius:'2.5px',
                                    },
                                    button:{
                                        cursor: 'pointer',
                                        marginTop:'15px',
                                        height:'30px',
                                        background:'#FFF',
                                        border:'1px solid #c3c3c3',
                                        outline:'none',
                                        width:'150px',
                                    }
                                }
                            },
                            on:{
                                input:{
                                    focus:function () {
                                        event.target.style.borderColor = '#409EFF';
                                    },
                                    blur:function () {
                                        var input = event.target;
                                        var info = $(input).parent('label').next('span')[0];
                                        var title = $(input).prev('span')[0].innerText;
                                        if ($(input).val() === defaultStatus||$(input).val()===null){
                                            info.innerText = title+'不能为空';
                                        } else if ($(input).val().indexOf(' ') !== -1){
                                            info.innerText = title+'不能包含空格';
                                        } else {
                                            info.innerText = '';
                                        }
                                        input.style.borderColor = '#c3c3c3';
                                    }
                                },
                                button:{
                                    exit:function () {
                                        if ($("div[type='login']").is(event.target) || $("button[type='quit']").is(event.target)){
                                            $("div[type='login']").css('display','none');
                                        }
                                    },
                                    file:function () {
                                        let div_image = $(event.target);
                                        let input_file = $(event.target).parent('label').parent('div').prev('input');
                                       input_file.trigger('click').change(function(){
                                           if($(this).val().length > 0){
                                               var file_Reader = new FileReader();
                                               file_Reader.readAsDataURL(this.files[0]);
                                               // 获取成功
                                               file_Reader.onload = function(){
                                                   sessionStorage.setItem('image',this.result);
                                                   div_image.css({
                                                       backgroundImage:'url('+this.result+')',
                                                       outline:'none'
                                                   }).find('i').css('display','none');
                                               }
                                           } else {
                                               div_image.css({
                                                   backgroundImage: 'url()',
                                                   outline: 'rgb(195, 195, 195) dotted 1px',
                                               }).find('i').css('display','block');
                                           }
                                       });
                                    },
                                    logon:function () {
                                        var message = $(event.target).parent('label').prevAll('label');

                                        var input_file = $(event.target).parent('label').parent('div').prev('input').val();

                                        var username = $(message[2]).find('input').val();
                                        var password = $(message[1]).find('input').val();
                                        var email = $(message[0]).find('input').val();

                                        var username_info = $(message[2]).next('span')[0];
                                        var password_info = $(message[1]).next('span')[0];
                                        var email_info = $(message[0]).next('span')[0];

                                        var username_title = $(message[2]).find('span').eq(1).text();
                                        var password_title = $(message[1]).find('span').eq(1).text();
                                        var email_title = $(message[0]).find('span').eq(1).text();

                                        if(
                                            $(event.target).parent('label').parent('div').prev('input').val() === defaultStatus
                                            ||
                                            $(event.target).parent('label').parent('div').prev('input').val() === null
                                        )   {
                                            $(message[3]).next('span')[0].innerText = '请设置头像'
                                        } else {
                                            $(message[3]).next('span')[0].innerText = ''
                                        }

                                        if (username === defaultStatus||username===null){
                                            username_info.innerText = username_title+'不能为空';
                                        } else if (username.indexOf(' ') !== -1){
                                            username_info.innerText = username_title+'不能包含空格';
                                        }
                                        if (password === defaultStatus||password ===null){
                                            password_info.innerText = password_title+'不能为空';
                                        } else if (password.indexOf(' ') !== -1){
                                            password_info.innerText = password_title+'不能包含空格';
                                        }
                                        if (email === defaultStatus||email ===null){
                                            email_info.innerText = email_title+'不能为空';
                                        } else if (email.indexOf(' ') !== -1){
                                            email_info.innerText = email_title+'不能包含空格';
                                        } else if (email.indexOf('@') === -1){
                                            email_info.innerText = email_title+'缺少必要@标识符';
                                        }

                                        if (
                                            input_file !== defaultStatus
                                            &&input_file !== null
                                            &&username !== defaultStatus
                                            &&username !== null
                                            &&username.indexOf(' ') === -1
                                            &&password !== defaultStatus
                                            &&password !== null
                                            &&password.indexOf(' ') === -1
                                            &&email !== defaultStatus
                                            &&email !== null
                                            &&email.indexOf(' ') === -1
                                            &&email.indexOf('@') !== -1){

                                            POST('logon',{
                                                image:sessionStorage.getItem('image'),
                                                account:username,
                                                password:password,
                                                email:email,
                                            },function (data) {
                                                console.log(data)
                                                alert_s(data.msg);
                                                if (data.error === 1){
                                                    this.exit();
                                                }
                                            })

                                        }
                                    }
                                }
                            }
                        };
                    }
                });

//启用组件
                new Vue({
                    el:'#ifame'
                })