记录一些工作中学习到的东西和常用的东西

最新推荐文章于 2024-07-22 14:10:07 发布

小渔条儿

最新推荐文章于 2024-07-22 14:10:07 发布

阅读量79

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/m0_53934275/article/details/129399183

版权

前端笔记

1.app更换路由时页面实现左右滑动的效果

改变路由时，页面可以左右滑动,vue左右滑动切换路由 - 开发者博客

2,通过多个id 拼接展示对应的名字

输入id='1607251333809700864,1608699227846737920,1611256341752446976'

返回活动风采、战地风云、党政奖单

fileitem (id) {

const arr = id.split(",")

console.log(arr);

console.log(this.dataTypeId, id);

let allName = ''

arr.forEach(item => {

id = item

const name = this.dataTypeId.find(o => o.id === id).name;

allName += name + "、";

});

return allName.slice(0, allName.length - 1)

},

方法2

fileitem(id){

const arr = id.split(",")

const str = []

for (const i of arr){

for (const j of this.dataTypeId){

if (i === j.id){

str.push(j.name)

}

}

}

return str.join(",")

},

3.git提交规范

4.js除法保留两位小数

function percentNum(num,num2) {

return (Math.round(num / num2 * 10000) / 100.00 + "%"); //小数点后两位百分比

}

5.判断类型是否为undefined

let nothing = []

if (typeof nothing === 'undefined') {

}

6.css 文字超出部分显示省略号

6.1一行超出部分显示省略号

.line-clamp1 {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

}

6.2两行超出部分显示省略号

.line-clamp2 {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

7.vue刷新当前页面

方法一:

location.reload();

方法二：

this.$router.go(0);

8.img等比例缩放

9.localStorage的使用

localStorage.getItem(key):获取指定key本地存储的值

localStorage.setItem(key,value)：将value存储到key字段

localStorage.getItem("key"); //获取指定key本地存储的值

10.break-all 和break-wrod 区别

1，word-break:break-all

2，word-wrap:break-word

3，word-break;break-all

11.CSS中cursor:pointer的作用

cursor : 网页浏览时用户鼠标指针的样式或图形形状。

属性值：

default：默认光标（通常是一个箭头）

auto：默认，浏览器设置的光标

crosshair：光标为十字线

pointer：光标为一只手

move：光标为某对象可移动

text：光标指示文本

wait：光标指示程序正在忙（通常是一只表或者一个沙漏）

12.Document.createElement（）

在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement

13.下载模板导入表格导出表格

13.1 下载表格模板

13.2 导入表格

13.3 导出表格

14.qs.stringify 的基本用法

qs.stringify 的基本用法_Marko柏森的博客-CSDN博客

15.qs.parse()、qs.stringify()、JSON.stringify() 用法及区别

qs是一个npm仓库所管理的包，可通过npm install qs命令进行安装。

qs.stringify()将对象序列化成URL的形式，以&进行拼接。

qs.parse()将URL解析成对象的形式。

JSON.stringify()是正常类型的JSON。

16.获取当前最新时间new Date()

17.为el-table表格选择添加默认选择

this.$refs.xxx.toggleRowSelection

获取数据后在外部加上一个$nextTick即可

this.$nextTick(function () {

this.trainPeopleTable.forEach(row=>{

if(this.selectList.indexOf(row.staffId) >= 0){

this.$refs.trainPersonTable.toggleRowSelection(row);

}

})

})