js，vue常见问题和方法记录
1.动态控制元素高度时如何让滚动条同步在底部
//选中元素
var content = document.getElementById('content');
setTimeout(function(){ //高度变化后执行操作
content.scrollIntoView(false)
})
2.获取当前日期时间 返回格式 2020-03-18 11:52:10
getNowFormatDate() {//获取当前时间
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
var strDate = date.getDate()<10? "0" + date.getDate():date.getDate();
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
3.获取数组最大值下标
//方式一
var nvalue = 0, index = -1;
for (var i = 0; i < arrData.length; i++) {
if (arrData[i] > nvalue) {
nvalue = arrData[i];
index = i
}
}
//最大的那个值
console.log(nvalue)
//最大值的索引
console.log(index)
//方式二
var max = Math.max(...arrData); //最大值
var indexOfMax = arrData.indexOf(max); //最大值下标
4.秒数/毫秒转为天时分秒
//秒数转换
function secondsFormat( s ) {
var day = Math.floor( s/ (24*3600) ); // Math.floor()向下取整
var hour = Math.floor( (s - day*24*3600) / 3600);
var minute = Math.floor( (s - day*24*3600 - hour*3600) /60 );
var second = s - day*24*3600 - hour*3600 - minute*60;
return day + "天" + hour + "时" + minute + "分" + second + "秒";
}
secondsFormat(60) //"0天0时1分0秒"
//毫秒转换
function checkTime(i) { //将0-9的数字前面加上0，例1变为01
return (i < 10 ? "0" + i : i);
}
function leftTimer(time) {
leftTime = time; //计算剩余的毫秒数
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds); var timeData = (days + "天" + hours + "小时" + minutes + "分" + seconds + "秒");
return timeData
}
leftTimer(6000) //"00天00小时00分06秒"
5.随机返回颜色或随机返回数组中一个元素
//返回随机颜色
function randomColor(index) {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
return color;
}
//随机返回数组中一个元素
var colorList = ['#24D0C6','#FA766B','#3898EC','#F68411'];
var randomItem = colorList[Math.floor(Math.random()*colorList.length)];
console.log("返回的随机元素",randomItem)
6.获取点击的当前元素距离浏览器边界的坐标
showCard:function(ev){
var oEvent=ev||event;
this.cardX = oEvent.clientX - 100;
this.cardY = oEvent.clientY - 70;
console.log("x",this.cardX,"y",this.cardY)
}
7.鼠标移入移出事件
@mouseenter="showBtn()" @mouseleave="hideBtn()"
8.超过4位数字转为1w，并保留两位小数
function convertJoinCount(num) {
num = Number(num);
if (isNaN(num)) {
return 0;
}
var w = num / 10000;
w = w.toFixed(2);
if (w > 99) {
w = 99;
}
if (w >= 1) {
return w + 'w';
}
return num;
}
9.H5点击表单后界面上移
var _pagePanel = $('#page-panel'),_eventBtn = _pagePanel.find('input');
_eventBtn.on('blur', function () {
window.scrollTo(0, 0);
});
_eventBtn.on('focus', function () {
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var offsetTop = $(this).offset().top - (clientHeight / 4);
window.scrollTo(0, offsetTop);
});
10.生成随机数
function generateNonceString() {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var length_1 = 16;
var noceStr = '';
var maxPos = chars.length;
while (length_1--)
noceStr += chars[Math.random() * maxPos | 0];
return noceStr;
}
11.表单浏览器回填问题
<form role="form" autocomplete="off">
<!--文本类-->
<input type="text" autocomplete="off"/>
<!--密码类-->
<input type="password" autocomplete="new-password"/>
</form>
现在浏览器带有自动填充，一般在input标签中增加autocomplete="off" 可以进行控制
12.vue中循环一个列表，点击其中一个进入详情，跳转路径正确，但有的显示空白？
解决：查看接口返回字段进行对比，如果有的字段在子列表详情中没有，则需要做容错处理，否则会显示空白
13.父组件向子组件传值后，子组件内props显示为空，但是在父组件中又能打印出来
解决：在引入的自组件上加v-if=“传入的值”
14.vue中tab菜单做权限，切换时根据权限判断，没权限返回到第一个菜单？
（1）在需要判断的页面事件中
this.$router.push('随便一个路径')
（2）再随便路径的页面中，加路由守卫钩子
//在当前路由改变，但是该组件被复用时调用，可以达到刷新页面的作用
beforeRouteEnter (to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
15.动态修改el-select中的label
当value是数字label是文字时
修改model中的值然后.toString()
16.获取当前终端
function getPlatform() {
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = "pc";
for (var v = 0, len = Agents.length; v < len; v++) {
if (userAgent.indexOf(Agents[v]) > 0) {
flag = "mobile";
break;
}
}
return flag;
}
17.获取手机系统
function getPhoneSystem() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("android") != -1) return "android";
if (ua.indexOf("iphone") != -1) return "ios";
return "others";
}
18.是否是公众号，小程序环境
let userAgent = navigator.userAgent;
//是否微信浏览器（公众号）
function isWX() {
if (/(micromessenger)\/([\w\.]+)/i.test(userAgent) && !/miniprogram/i.test(userAgent)) {
return true;
}
return false;
}
//是否小程序
function isMiniprogram() {
if (/(micromessenger)\/([\w\.]+)/i.test(userAgent) && /miniprogram/i.test(userAgent)) {
return true;
}
return;
},
19.获取当前url参数
function getQueryString(name) {
//构造一个含有目标参数的正则表达式对象
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
//匹配目标参数
var r = location.search.substr(1).match(reg);
//获取hash参数
//var r = location.hash.substr(1).match(reg);
if (r != null) {
var ret = r[2];
try {
ret = decodeURIComponent(ret);
} catch (e) {
ret = unescape(ret);
}
return ret;
}
return null; //返回参数值
}
20.html引用js文件
function createScript(url, cb) {
if (!!url) {
var $script = $('');
$script.one('load', cb || emptyFn);
$script.attr('src', url);
$('body').append($script);
}
}
21.获取模板内容，动态修改
//模板例子 比如在ceshi.html中
<script id="ceshitpl" type="text/template">
<style>
//html样式
</style>
<p class="share_text">${text1}</p>
<p class="share_text">${text2}</p>
</script>
//获取模板内容
function getTemplate(data, id) {
var reg1 = new RegExp(' + id + '"[^>]*?>[\\s\\S]*?<\\/script>', 'gi');
return data.match(reg1)[0].replace(/]*?>/ , '').replace(/<\/script>/gi, '');
}
//在js中动态修改模板内容
new Promise(function (resolve, rej) {
$.get("./ceshi.html", function (data) {
resolve(self.getTemplate(data, 'ceshitpl'));
});
}).then(function (result) {
var tpl = result.replace('${text1}','我是新text1')
.replace('${text2}','我是新text2');
//tpl就是修改后的模板html 根据不同业务进行操作
})
22.pc调起qq聊天
//qq号可以修改 uin = qq号
<a href="tencent://message/?uin=66518442&Site=Sambow&Menu=yes">QQ咨询</a>
23.秒数转换成录音时间
function timeToFormat(times){
var result = '00:00:00';
var hour,minute,second
if (times > 0) {
hour = Math.floor(times / 3600);
if (hour < 10) {
hour = "0"+hour;
}
minute = Math.floor((times - 3600 * hour) / 60);
if (minute < 10) {
minute = "0"+minute;
}
second = Math.floor((times - 3600 * hour - 60 * minute) % 60);
if (second < 10) {
second = "0"+second;
}
result = hour+':'+minute+':'+second;
}
return result;
}
timeToFormat(60)
24.使用emit出现的问题及解决方法
1.父组件无法触发监听事件
解决：emit事件名不要使用驼峰写法，全部小写
原因：
源码中vm._events里面的事件名（也就是你模板里监听的事件名）都是会转成小写的
而触发传入的是大写字母的方法 找不到 就不会走到下面的if事件 也就不会触发事件效果
2.
起因：父组件中循环一个列表，每个子级中的按钮都会触发一个相同的子组件（比如一个Dialog）并且调用了子组件中的emit，此时会出现一个问题，第一次调用子组件是没问题的，但是第二次调用子组件则会触发2次emit，以此类推
解决：在子组件中beforeDestroy销毁组件时，移除emit事件(例：this.$off("事件名"))