美文网首页
vue项目小问题集锦

vue项目小问题集锦

作者: 书简虫子 | 来源:发表于2019-10-12 14:47 被阅读0次

    1、路由传参:

    params传参,刷新会被刷掉

    query刷新不掉

    storage最老实的办法

    vuex也可

    2、判断输入是否为空

    isNull( str ){

            if ( str == "" ) return true;

            var regu = "^[ ]+$";

            var re = new RegExp(regu);

            return re.test(str);

          }

    if(this.isNull(this.username)){

                  this.$toast('请输入内容')

                  return

              }

    3、时间戳转换时间:

    changetimestyle(times){   

                var a, jsdate=((times) ? new Date(times*1000) : new Date());  

                var pad = function(n, c){  

                    if((n = n + "").length < c){  

                        return new Array(++c - n.length).join("0") + n;  

                    } else {  

                        return n;  

                    }  

                };  

                var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];  

                var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"};  

                var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];   

                var f = {  

                    // Day  

                    d: function(){return pad(f.j(), 2)},  

                    D: function(){return f.l().substr(0,3)},  

                    j: function(){return jsdate.getDate()},  

                    l: function(){return txt_weekdays[f.w()]},  

                    N: function(){return f.w() + 1},  

                    S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'},  

                    w: function(){return jsdate.getDay()},  

                    z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0},  

                    // Week  

                    W: function(){  

                        var a = f.z(), b = 364 + f.L() - a;  

                        var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;  

                        if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){  

                            return 1;  

                        } else{  

                            if(a <= 2 && nd >= 4 && a >= (6 - nd)){  

                                nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");  

                                return date("W", Math.round(nd2.getTime()/1000));  

                            } else{  

                                return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);  

                            }  

                        }  

                    },  

                    // Month  

                    F: function(){return txt_months[f.n()]},  

                    m: function(){return pad(f.n(), 2)},  

                    M: function(){return f.F().substr(0,3)},  

                    n: function(){return jsdate.getMonth() + 1},  

                    t: function(){  

                        var n;  

                        if( (n = jsdate.getMonth() + 1) == 2 ){  

                            return 28 + f.L();  

                        } else{  

                            if( n & 1 && n < 8 || !(n & 1) && n > 7 ){  

                                return 31;  

                            } else{  

                                return 30;  

                            }  

                        }  

                    },  

                    // Year  

                    L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0},  

                    Y: function(){return jsdate.getFullYear()},  

                    y: function(){return (jsdate.getFullYear() + "").slice(2)},  

                    // Time  

                    a: function(){return jsdate.getHours() > 11 ? "pm" : "am"},  

                    A: function(){return f.a().toUpperCase()},  

                    B: function(){  

                        var off = (jsdate.getTimezoneOffset() + 60)*60;  

                        var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off;  

                        var beat = Math.floor(theSeconds/86.4);  

                        if (beat > 1000) beat -= 1000;  

                        if (beat < 0) beat += 1000;  

                        if ((String(beat)).length == 1) beat = "00"+beat;  

                        if ((String(beat)).length == 2) beat = "0"+beat;  

                        return beat;  

                    },  

                    g: function(){return jsdate.getHours() % 12 || 12},  

                    G: function(){return jsdate.getHours()},  

                    h: function(){return pad(f.g(), 2)},  

                    H: function(){return pad(jsdate.getHours(), 2)},  

                    i: function(){return pad(jsdate.getMinutes(), 2)},  

                    s: function(){return pad(jsdate.getSeconds(), 2)},  

                    O: function(){  

                        var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);  

                        if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;  

                        return t;  

                    },  

                    P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))},  

                    c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()},  

                    U: function(){return Math.round(jsdate.getTime()/1000)}  

                };  

                var dateStr = 'Y-m-d H:i:s' ;//xxxx-x-x x:x:x

                //var dateStr = 'Y-m-d';//xxxx-x-x

                return dateStr.replace(/[\\]?([a-zA-Z])/g, function(t, s){ 

                    var ret; 

                    if( t!=s ){  

                        ret = s;  

                    } else if( f[s] ){  

                        ret = f[s]();  

                    } else{  

                        ret = s;  

                    }  

                    return ret;  

                });  

            },

    4、localstorage存储和获取数组、对象(原文:https://www.cnblogs.com/ranyonsue/p/6402687.html

    过期策略:localstorage永久存储,不过期,除非手动删除,sessionstorage在重启浏览器、关闭页面或新开页面时失效。

    demo:

    var obj = {};

    var str = JSON.stringify(obj);

    //存入

    localstorage.obj = str;

    //读取

    str = localstorage.obj;

    //重新转换为对象

    obj = JSON.parse(str);

    5、验证码倒计时:

    var waits=59;

                        var timers = setInterval(() => {

                            if(waits < 1){

                                waits=1;

                                clearTimeout(timers)

                                _this.txts = '获取验证码'

                            }else{

                                _this.txts = waits+'秒后重发'

                                waits--;

                            }

                        }, 1000)

    6、抢购倒计时(endDateStr为时间戳格式)

    TimeDown(id,endDateStr) {

        var endDate = (new Date(endDateStr)).valueOf();

        //当前时间

        var nowDate = (new Date()).valueOf();

        //相差的总秒数

        var totalSeconds = parseInt((endDate*1000 - nowDate) / 1000);

        //天数

        var days = Math.floor(totalSeconds / (60 * 60 * 24));

        //取模(余数)

        var modulo = totalSeconds % (60 * 60 * 24);

        //小时数

        var hours = Math.floor(modulo / (60 * 60));

        modulo = modulo % (60 * 60);

        //分钟

        var minutes = Math.floor(modulo / 60);

        //秒

        var seconds = modulo % 60;

        this.djscont = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";

        //延迟一秒执行自己

        let that = this

        setTimeout(function () {

            that.TimeDown(id, endDateStr);

        }, 1000)

    },

    未完待续。。。。。

    相关文章

      网友评论

          本文标题:vue项目小问题集锦

          本文链接:https://www.haomeiwen.com/subject/fiwcqftx.html