前端开发记录

导出

<a :href="`${api}${url}`" target="_blank" ref="dcRef"></a>

vue3 回调

const dcRef = ref()

nextTick(()=>{

dcRef.value.click();

})

Vue开发的坑

1、element el-form按回车刷新页面

@submit.native.prevent

2、el-input type number类型

.clear-number-input ::v-deep input[type="number"]::-webkit-outer-spin-button,

.clear-number-input ::v-deep input[type="number"]::-webkit-inner-spin-button {

-webkit-appearance: none !important;

}

时间格式化

1、new Date(this.form.startTime).format("yyyy-MM-dd")

2、formatDate(time) {

let date = new Date(time);

let YY = date.getFullYear() + '-';

let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';

let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());

let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';

let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';

let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

return YY + MM + DD;

}

获取今天明天时间

时间当个位数 前面加个0方法

format(number) {

return number.toString().padStart(2, '0')

}

// 今天的日期

let date = new Date();

let YY = date.getFullYear() + '-';

let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';

let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());

form.value.startdate = `${YY}${MM}${DD}`

//明天的日期

let finalDate = new Date(date)

let nextDate = new Date(finalDate.setDate(date.getDate() + 1))

let nextYY = nextDate.getFullYear() + '-';

let nextMM = (nextDate.getMonth() + 1 < 10 ? '0' + (nextDate.getMonth() + 1) : nextDate.getMonth() + 1) + '-';

let nextDD = (nextDate.getDate() < 10 ? '0' + (nextDate.getDate()) : nextDate.getDate());

form.value.enddate = `${nextYY}${nextMM}${nextDD}`

自定义字体

@font-face {

font-family: 'zzgyht';//使用

src: url('../image/SuCaiJiShiKuFangTi-2.ttf');//引入

}

求和

const array = [5,4,7,8,9,2];

array.reduce((a,b) => a+b);// 输出: 35

array.reduce((a,b) => a>b?a:b);//最大9

array.reduce((a,b) => a<b?a:b);//最小2

多个if优化

if(a=='red')b=1

else if(a=='green')b=2

else b=0

优化一

const arr = {

red:1

green:2

}

b=arr[a] || ''

接口请求两种方式

$.ajax({

url:'',

type:'post',

dataType:'json',

data:{},

success:function(res){

console.log(res)

}

})

axios({

method:'post',

url:'',

params:{}

}).then(res=>{})

js处理

reverse()数组倒叙

typeof获取数据类型 //console.log(typeof num);//number

instanceof判断数据类型 //console.log(bool instanceof Boolean);// false

JSON.stringify(obj/arr)//js对象(数组) –> json对象(数组)

JSON.parse(json)//json对象(数组) –> js对象(数组)

//去重

let arr = Array.from(new Set(数组))

//禁止滑动

@touchmove.prevent

//根据月份查出月初月底

hqMonth(){

let y = 2021

let m = 10

let monthLastDay = new Date(y,m,0).getDate();

let syqxks = y + '-' + (m < 10 ? '0'+m : m) + '-' + '01';

let syqxjs = y + '-' + (m < 10 ? '0'+m : m) + '-' + (monthLastDay < 10 ? '0'+monthLastDay : monthLastDay);

console.log(syqxks);

console.log(syqxjs);

},

//url传参 取值

<script> // 利用正则表达式

let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100" // // 返回对象

function queryURLParams(url) {

let pattern = /(\w+)=(\w+)/ig; //定义正则表达式

let parames = {}; // 定义参数对象

url.replace(pattern, ($, $1, $2) => { parames[$1] = $2; }); return parames; }

console.log(queryURLParams(url))

</script>