/**
* 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);
});
