vue2.0 技巧汇总

Posted 2020-09-23

/**
 * Created by 
 */
export default {
    trim: (str) => { //删除左右两端的空格
        return str.replace(/(^\s*)|(\s*$)/g, "");
    },
//显示当天的时间，超过一天显示昨天，大于一天，显示，星期，年
    formatMessageTime: (time) => {
        const week = {
            "0": "星期日",
            "1": "星期一",
            "2": "星期二",
            "3": "星期三",
            "4": "星期四",
            "5": "星期五",
            "6": "星期六"
        };
        const oneDay = 24 * 60 * 60 * 1000,
            oneWeek = 6 * 24 * 60 * 60 * 1000,
            oneYear = 365 * 24 * 60 * 60 * 1000;
        // return function (time) {
        if (!time) {
            return ‘‘;
        }
        if (typeof (time) === ‘string‘) {
            return time;
        }
        const sendTime = new Date(time),
            currentTime = new Date();
        const yesterdayTime = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate());

        let minutes = sendTime.getMinutes();
        let hours = sendTime.getHours();
        minutes = minutes > 9 ? minutes : ‘0‘ + minutes;
        hours = hours > 9 ? hours : ‘0‘ + hours;

        const showSendTime = hours + ‘:‘ + minutes;
        let showDate;
        // 今天
        if (sendTime >= yesterdayTime) {
            return showSendTime;
        }
        // 昨天
        else if (sendTime >= yesterdayTime - oneDay) {
            showDate = ‘昨天‘;
        }
        // 一周内
        else if (sendTime >= yesterdayTime - oneWeek) {
            showDate = week[sendTime.getDay().toString()];
        }
        // 今年内
        else if (sendTime.getFullYear() == currentTime.getFullYear()) {
            showDate = (sendTime.getMonth() + 1) + ‘/‘ + sendTime.getDate();
        }

        // 本世纪
        else if (sendTime.getFullYear().toString().slice(0, 2) == currentTime.getFullYear().toString().slice(0, 2)) {
            showDate = sendTime.getFullYear().toString().slice(2) + ‘/‘ + (sendTime.getMonth() + 1) + ‘/‘ 
+ sendTime.getDate();
        }
        //
        else {
            showDate = sendTime.getFullYear() + ‘/‘ + (sendTime.getMonth() + 1) + ‘/‘ + sendTime.getDate();
        }
        return showDate + ‘ ‘ + showSendTime;
        // };
    },
    formatTime: (time) => {
        var d = new Date(time);
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate() < 10 ? ‘0‘ + d.getDate() : ‘‘ + d.getDate();
        var hour = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        // return year + ‘-‘ + month + ‘-‘ + day + ‘ ‘ + hour + ‘:‘ + minutes + ‘:‘ + seconds;
        return hour + ‘:‘ + minutes;
    }
}

 

ctrl +enter 换行的获取光标的函数：
 placeCaretAtEnd(el) {
            el.focus();
            if (typeof window.getSelection != "undefined" &&
                typeof document.createRange != "undefined") {
                var range = document.createRange();
                range.selectNodeContents(el);
                range.collapse(false);
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (typeof document.body.createTextRange != "undefined") {
                var textRange = document.body.createTextRange();
                textRange.moveToElementText(el);
                textRange.collapse(false);
                textRange.select();
            }
        },

 

 功能：根据id 查找id在数组的索引index
indexOfTargetId(id) {
            for (var i = 0; i < this.length; i++) {
                if (this[i].targetId == id) return i;
            } return -1;
        },

 

/*	formatMsgTime(time) {
			const week = {
				"0": "星期日",
				"1": "星期一",
				"2": "星期二",
				"3": "星期三",
				"4": "星期四",
				"5": "星期五",
				"6": "星期六"
			};
			const oneDay = 24 * 60 * 60 * 1000,
				oneWeek = 6 * 24 * 60 * 60 * 1000,
				oneYear = 365 * 24 * 60 * 60 * 1000;

			// return function (time) {
			debugger
			if (!time) {
				return ‘‘;
			}
			if (typeof (time) === ‘string‘) {
				return time;
			}
			const sendTime = new Date(time),
				currentTime = new Date();
			const yesterdayTime = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate());

			let minutes = sendTime.getMinutes();
			let hours = sendTime.getHours();
			minutes = minutes > 9 ? minutes : ‘0‘ + minutes;
			hours = hours > 9 ? hours : ‘0‘ + hours;

			const showSendTime = hours + ‘:‘ + minutes;
			let showDate;
			// 今天
			if (sendTime >= yesterdayTime) {
				return showSendTime;
			}
			// 昨天
			else if (sendTime >= yesterdayTime - oneDay) {
				showDate = ‘昨天‘;
			}
			// 一周内
			else if (sendTime >= yesterdayTime - oneWeek) {
				showDate = week[sendTime.getDay().toString()];
			}
			// 今年内
			else if (sendTime.getFullYear() == currentTime.getFullYear()) {
				showDate = (sendTime.getMonth() + 1) + ‘/‘ + sendTime.getDate();
			}

			// 本世纪
			else if (sendTime.getFullYear().toString().slice(0, 2) == currentTime.getFullYear().toString().slice(0, 2)) {
				showDate = sendTime.getFullYear().toString().slice(2) + ‘/‘ + (sendTime.getMonth() + 1) + ‘/‘ 
+ sendTime.getDate();
			}
			//
			else {
				showDate = sendTime.getFullYear() + ‘/‘ + (sendTime.getMonth() + 1) + ‘/‘ + sendTime.getDate();
			}
			return showDate + ‘ ‘ + showSendTime;
			// };
		}*/

 

右键功能 

@contextmenu.prevent="rightShow()"
v-on:contextmenu.prevent = "事件名称"

 

数据的json和对象的转换
1、console.log(JSON.stringify(json));
2.JSON.parse()

 

1、颜色的渐变
background:-webkit-linear-gradient(left, #1290e9,#00d7da );
background: -webkit-linear-gradient(left, #1815e0 20%, #00d7da);
2、模态窗口如何使用