vue2.0 技巧汇总

/**
 * 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、模态窗口如何使用

 

JavaScript 获取当前时间戳：
第一种方法：
var timestamp = Date.parse(new Date());

结果：1280977330000
第二种方法：
var timestamp = (new Date()).valueOf();

结果：1280977330748

第三种方法：
var timestamp=new Date().getTime()；

结果：1280977330748

第一种：获取的时间戳是把毫秒改成000显示，

第二种和第三种是获取了当前毫秒的时间戳。

 

如何给tab栏添加点击样式；
vue更新数据是异步的
1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了
$nextTick(() => {}) 与DOM相关操作写在该函数回调中，确保DOM已渲染

什么是Vue.nextTick()
官方文档解释如下：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码，
什么时候需要用的Vue.nextTick()
你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，
原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，
所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，
因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中

 

功能：vue2.0 实现click点击当前li，动态切换class
addBagStyle(item, index) {
			console.log('this is addBagStyle click')
			this.$nextTick(function () {
				this.conList.forEach(function (item) {
					Vue.set(item, 'active', false);
				});
				Vue.set(item, 'active', true);
			});
		}

	},
html代码
<li :class="{'active':item.active}" 
@contextmenu.prevent="rightShow()" 
contextmenu="supermenu"
 v-for="(item,index) in conList"
 v-if="item.conversationType===1"
 @click.stop="addBagStyle(item,index)"
 ref="li">

 

使用this.$router.push()

[javascript] view plain copy

    this.$router.push({name: '你路由的名字', query: {id: '可以是变量'}})  


获取的方法为

[javascript] view plain copy

    this.$route.query.id  


文档中提到

[html] view plain copy

    提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。  
      
    复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：  

[html] view plain copy

    <pre name="code" class="javascript">watch: {  
        '$route' (to, from) {  
          // 对路由变化作出响应...  
        }  
      }</pre><p></p>  
    <pre></pre>  
    <br>  
    <p></p>  
    <p><span style="font-size:18px">也就是说当你把参数绑定到节点里后</span></p>  
    <p><span style="font-size:18px"></span></p><pre name="code" class="html"><p>{{params}}</p></pre><p></p>  
    <p><span style="font-size:18px"></span></p><pre name="code" class="html">data () {  
          return {  
            params: this.$route.query.id  
          }  
        }</pre>当参数发生变化时，你需要<p></p>  
    <p><span style="font-size:18px"></span></p><pre name="code" class="javascript">watch: {  
          '$route' (to, from) {  
            this.params = this.$route.query.id  
          }  
        }</pre><p></p>  
    <p><span style="font-size:18px">不然p标签里的值不会发生改变</span></p>  
    <br>  
    <br>  

 

数组对象里添加属性
// for (let i = 0; i < this.conList.length; i++) {
		// 	var els = this.conList[i];
		// 	    els.active = false;
		// 		console.log(this.conList[i])
		// }

this.$nextTick(function () {
				this.conList.forEach(function (item) {
					Vue.set(item, 'active', false);
				});
				Vue.set(item, 'active', true);
			});