文章目录
项目框架的自适应
我们的代码 要适应不同分辨率的设备 常规的方法 单位采用rem
在框架的html文件中 加入以下代码即可
<script>
let html = document.documentElement || document.getElementsByTagName("html")[0]
let clientWidth = html.clientWidth
html.style.fontSize = clientWidth / 19.2 + "px"
window.addEventListener("resize", () =>
{
clientWidth = html.clientWidth
html.style.fontSize = clientWidth / 19.2 + "px"
})
</script>
vscode 代码片段
https://blog.csdn.net/m0_46165586/article/details/127248606
级联选择器的坑点
https://blog.csdn.net/sakialice/article/details/126107567
数组的一些方法
不改变元素原数组
遍历
map forEach every some
查找
filter find findIndex slice
concat join
改变原数组
push pop unshift shift sort reverse splice
push
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var arr = []
var length = arr.push('first')
console.log(arr) // ['first']
console.log(length) // 1 push方法会改变原有数组，且返回改变后数组的长度
pop
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
var a = [1,2,3,4,5];
var b = a.pop(); //a：[1,2,3,4] b：5
unshift
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
var a = [1,2,3,4,5];
var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5] b：7
shift
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var a = [1,2,3,4,5];
var b = a.shift(); //a：[2,3,4,5] b：1
concat
方法用于连接两个或多个数组。
方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。
var a = [1,2,3,4,5];
var b = a.concat(6,7); //a：[1,2,3,4,5] b：[1,2,3,4,5,6,7]
join
方法将数组作为字符串返回。 不会改变原始数组。
元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。
let arr = [1, 2, 3];
console.log(arr.join()); 1,2,3
console.log(arr.join('')); 123
console.log(arr.join(' ')); 1 2 3
console.log(arr.join('-')); 1-2-3
splice
splice 方法用于数组或伪数组，根据参数个数和形式的不同，可以在数组中删除指定元素或者插入元素、替换元素。
改变原数组
https://blog.csdn.net/qq_45685275/article/details/123647699
slice
截取
arr.slice(i, j) 表示将数组/字符串从 [i, j)（分界是前开后闭）切片，然后返回取出的片段，非原地操作，不改变原数组/字符串。
包前不包后
var arr = [1, 2, 3, 4, 5]
var sub = arr.slice(1, 4)
console.log(sub) // [2, 3, 4]
find
array:数组。 item:当前循环的项。 index:循环项的下标 。 arr：当前循环的数组。
会返回数组中符合条件的第一个值，在数组中找到的话则不会往下执行。 如果数组中没有符合条件的值则返回undefined
arr.find( ( item , index , array ) => {} )
var array = [1, 2, 3, 4, 5, 6, 6, 6]
var result = array.find(function (item, index, arr) {
console.log(this); // [1, 2, 3, 4, 5, 6, 6, 6]
return item > 6;
}, array)
console.log(result); // undefined
console.log(array); //[1, 2, 3, 4, 5, 6, 6, 6]
var result = array.find(function (item, index, arr) {
console.log(this); // [1, 2, 3, 4, 5, 6, 6, 6]
return item > 5;
}, array)
console.log(result); // 6
console.log(array); //[1, 2, 3, 4, 5, 6, 6, 6]
map
按照某种映射关系,把数组的每一个元素给修改了
map()方法不会改变原始数组
map() 方法按照原始数组元素顺序依次处理元素
我的理解就是map首先会创建一个新的数组，其中新数组的每一个元素就是原数组中每一个元素经过咱们设置的给定函数变化后的结果。也就是说对原始数组中的每一项运行给定的函数，然后按原数组的顺序组装成新的数组，该方法也不会改变原始的数组，还产生一个新数组。
array.map( function ( item, index, arr) {} )
let dataList = res.list.map(item => {
return {
name: item.name,
sex: item.sex ==1? '男':'女',
age: item.age
}
})
filter
filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
字符串用的比较多的方法 split 字符串转数组
split() 方法用于把一个字符串分割成字符串数组。
var data= "烈日当头已数月有余，天气高温，汗流浃背，不知所言。";
var str = data.split(',');
['烈日当头已数月有余，天气高温，汗流浃背，不知所言。']
各种循环
for of
for in
forEach
map
filter
首先讲下for of 和for in 的区别
区别一：for in 和 for of 都可以循环数组，for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。
const arr = [1,2,3,4]
// for ... in
for (const key in arr){
console.log(key) // 输出 0,1,2,3
}
// for ... of
for (const key of arr){
console.log(key) // 输出 1,2,3,4
}
区别二：for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array
const object = { name: 'lx', age: 23 }
// for ... in
for (const key in object) {
console.log(key) // 输出 name,age
console.log(object[key]) // 输出 lx,23
}
// for ... of
for (const key of object) {
console.log(key) // 报错 Uncaught TypeError: object is not iterable
}
https://zhuanlan.zhihu.com/p/268685817 forEach 和 map
forEach() 方法不会返回执行结果, 而是 undefined. 也就是说, forEach() 会修改原来的数组.
map() 方法会得到一个新的数组并返回.
filter 方法不会更改原始数组，但会返回一个新数组，其中包含满足提供的测试条件的所有元素。
本月功能
级联选择器回显
https://mip.yht7.com/news/223267
后端返回的值只有最后一级的id 根据这个id去回显
value 属性才是回显的关键，只有绑定了value属性才会让 <el-cascader /> 回显（单选情况下是一维数组、多选是二维数组），
而且数组中的值一定是最后一级的id加上它父级的id组成
上述函数返回的是根据最后一层id 返回一棵树上父id
控制树形控件 有无 +
知识点 v-show 的函数使用方法 结合 computed
https://zhuanlan.zhihu.com/p/526584210
<el-tree
:data="dataSource"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
@node-click="getCurrentId"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<a @click="append(data)" v-show="isShow(data)">
<el-icon><Plus /> </el-icon>
</a>
<a @click="edit(data)">
<el-icon><EditPen /></el-icon>
</a>
<a @click="remove(node, data)">
<el-icon><DeleteFilled /></el-icon>
</a>
</span>
</span>
</template>
</el-tree>
// 当层级=4 并且 nodeType为标签的时 不可增加子
const isShow: boolean = computed(() => (data) => {
if ((data.data.level = 4 && data.data.nodeType == 'label')) {
return false;
}
return true;
});
文件上传借助第三方平台
1 先点击请求一个借口 拿到 一些参数 比如 token pid …
const handleUpload = async () => {
let { code, data } = await taskInfosysMeta();
if (code == 200) {
uploadParams.value.type = 'FILE';
uploadParams.value.pid = data.pid;
uploadParams.value.currentDir = data.currentDir;
uploadParams.value.token = data.token;
setTimeout(() => {
uploadParams.value.token = '';
}, 600000);
}
};
2 请求第二个接口
这里将文件转化为二进制
请求的时候 headers content-type 也需要改变 form提交的格式
const uploadFile = (item) => {
// 名字
form.value.config.fileName = item.file.name;
uploadParams.value.name = item.file.name;
FormDatas.value = new FormData();
for (let key in uploadParams.value) {
FormDatas.value.append(key, uploadParams.value[key]);
}
FormDatas.value.append('file', item.file);
axios
.post(
'http://10.103.1.174:12345/dolphinscheduler/resources',
FormDatas.value,
{
headers: {
token: uploadParams.value.token,
'Content-Type':
'multipart/form-data; boundary=----WebKitFormBoundaryBR9UErfmy3bncHz4',
},
}
)
.then((res) => {
if (res.data.code == 0) {
form.value.config.filePath = res.data.data.id;
}
});
};
el-radio 怎么选中
这种一组的el-radio 当被选中时 form.value=label
<el-radio-group v-model="form.radio" class="ml-4">
<el-radio label="日期" size="large"> 固定时间</el-radio>
<el-radio label="CRON表达式" size="large">
固定频率
</el-radio>
</el-radio-group>
el-date-picker 时间格式化
value-format=“YYYY-MM-DD HH:mm:ss”
增删改查
递归
简单来讲 递归就是自己调用自己
1 先处理父亲的逻辑
2 假设有儿子 在复制父亲的逻辑
举个例子
将对象中所有的name 值改为cz
console.log(changeName(obj));
let obj = {
name: 'zc',
children: {
name: 'zc',
children: {
name: 'zc'
}
}
}
第一步先写父亲逻辑
function changeName (obj){
obj.name = 'cz'
return obj
}
第二步 假设有儿子 在复制父亲的逻辑
function changeName (obj){
obj.name = 'cz'
if (obj.children) {
obj.children = changeName(obj.children)
}
return obj
}
例2
递归是先执行完整个递归 在进行方法销毁 释放内存
function fn (i)
{
if (i < 10) {
i++
fn(i)
}
console.log(i);
}
fn(0)
打印的结果 10 10 9 8 7 6 5 4 3 2 1
分析
第一次 f(0) 0<10 i++ i=1 f(1) .log(1) 打印被堵住
第二次 f(1) 1<10 i++ i=2 f(2) .log(2) 打印被堵住
.
.
.
第九次 f(9) 9<10 i++ i=10 f(10) .log(10) 打印被堵住
第10次 f(10) .log(10) 打印被堵住
最后一层层往外回收
css 文字让第几行开始显示省略号
overflow: hidden;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
滚动条不显示
* {
scrollbar-width: none;
-ms-overflow-style: none;
::-webkit-scrollbar {
display: none
}
}
style 的函数写法
这是我自己封装的card组件 背景照片如果后端返回则用后端返回的url 如果没有则用自己本地的url
返回的数据如上
在fileList中只有当type为1的时候才是照片的地址
<div
class="top"
:style="{
background: getImageUrl(item.fileList)? getImageUrl(item.fileList): '@/assets/images/Pic.png',
}"
>
去找fileList中type===1的数据 如果找到了 将数据返回 如果没有找到则 用本地默认的url
const getImageUrl = (fileList: any) => {
if (!fileList) return;
const image = fileList.find((item: any) => item.type === 1);
if (image.url) {
return `url(${image.url})`;
} else {
return false;
}
};
el-upload 取消上传
:before-remove
el-upload 普通上传
:http-request="uploadFile" 手动上传
:file-list="fileList" 上传的文件列表
// 文件上传
const fileList = ref([]);
const FormDatas = ref(null);
const uploadFile = (item) => {
FormDatas.value = new FormData();
FormDatas.value.append('file', item.file); 文件上传得要formData形式
const uploadInterFace = async () => {
let { data } = await fileUsingPOST(FormDatas.value);
recordUrl.value = data;
};
uploadInterFace();
};
在请求中加 headers: { "Content-Type": "multipart/form-data" }
855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
