【零散知识记录】

一、sort排序

1. 数组
2. 排序元素为Number
3. 降序

let arr=[]
arr.sort((a,b)=> return b-a)

4. 升序

let arr=[]
arr.sort((a,b)=> return a-b)

5. 多字段排序

//按a的降序排序，当a相等时按b的降序排序
let obj = [{a:2,b:3},{a:2:5},{a:3:6}]
let data = obj.sort((a,b)=>{
    if(b.a === a.a){
      return b.b - a.b
    } else return b.a - a.a
}) // 结果[{a:3:6},{a:2:5},{a:2,b:3}]

二、vue 同一页面同一组件多用，页面互相影响问题

解决：
1、分使用引入即使用几次引用几次（正式vue项目同一页面同一组件只能引用一次即正式vue项目不可用） 参考：https://www.cnblogs.com/yanggb/p/12431367.html

2、避免同一dom多次出现并使用（eg：同一dom的id重复出现，调用其中一个时将会失效）

三、vue $emit 传递多个参数

动态验证之数组循环
iview之动态增减表单项 https://www.iviewui.com/view-ui-plus/component/form/form#dynamic

<Form ref="formInline" :model="formInline" :rules="ruleInline">
	<!--第一层-->
     <Row type="flex" :gutter="25" v-for="(item,index) in formInline.items" :key="index">
       <i-col>
     	<FormItem :prop="'items.' + index + '.id'" label="编号"
           :rules="dataInfo.includes('id')?{required: true,type:'number', message: '不能为空', trigger: 'blur'}:[{ required: false }]">
         </FormItem>
        </i-col>
        <i-col>
        	<!--第二层-->
        	<div v-for="(item2,index2) in item.datas" :key="index2">
        		<FormItem :prop="'items.' + index + '.datas.'+'index2'+'.xx'" label="编号"
                  :rules="dataInfo.includes('xx')?{required: true,type:'number', message: '不能为空', trigger: 'blur'}:[{ required: false }]">
         </FormItem>
        	</div>
        </i-col>
     </Row>       

//数据格式
formInline:{
	items:[
		{
		 id:'',
		 name:'',
		 datas:[{xx:''}]
		}
	]
}

四、echarts5与水球liquidFill3

(2021/10/14)目前liquidFill3.1.0与echarts5.0.1兼容
遇到 echarts/lib/visual/dataColor——v-charts版本1.19.0支持的liquidFill版本2.0.6，需要对echarts进行版本回退（至少4.9.0）

五、postgreSQL

1、group by 字段 查询的字段里必须包含在group by里或聚合函数里

2、时间查询 使用to_date(字段，‘fmt’) 详情看https://blog.csdn.net/weixin_44167504/article/details/120974653

3、mysql中类似于ISFULL（）的替代==>COALESCE(d.ID,0) AS “HasOBD”， 拓展参考。。。
MYSQL:

 IFNULL(expression,value) 

MSSQLServer:

ISNULL(expression,value) 

Oracle:

NVL(expression,value) 

postgreSQL:

COALESCE(expression,value) 

六、路由监听

watch:{
    $route(to,from){
      console.log(from.name);//从哪来
      console.log(to.name);//到哪去
    }
}

七、多个form表单使用同一表单验证（iview）

方法：在验证第一个form后再次验证第二个form ↓ ↓ ↓ ↓ ↓

FormItrem 记得添加 prop！

点击保存，验证

验证第一个form后验证第二个form

八、Viewer 图片预览 图片在弹出层之后

原因：viewer层级小于弹出层，弹出层层级根据关闭次数叠加2
解决：在main.js添加

 Vue.use(Viewer, {
   defaultOptions: {
     zIndex: 9999999,
 } });

viewer 图片预览 使用 ：
1、安装依赖

npm install v-viewer --save

2、main.js 引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
 
Vue.use(Viewer);

3、vue页面使用

//1、单个图片
<viewer>
	<img src="">
</viewer>
//2、多个图片
<viewer :images=[{Url:''}]>
	...
</viewer>

九、postgreSQL实现主键ID自增

博客： https://www.cnblogs.com/haolb123/p/14317774.html

十、yarn忽略版本提示

yarn config set ignore-engines true

十一、grpc下载地址

https://registry.npmmirror.com/binary.html?path=grpc/

十二、webGL(three.js)官网

webGL(three.js)官网

十三、测试UDP连通性

https://www.jianshu.com/p/e4b56518d914

十四、数据库-马克吐温社区

http://www.mark-to-win.com/tutorial/51590.html

十五、Windows查看端口占用

1、查看所有

netstat -ano

2、查看某个端口

netstat -aon|findstr “端口号”

3、查看占用进程程序

tasklist|findstr “PID”

十六、JS 定位相当于a标签href定位，优于a标签

 <div id="idname" @click="tabClick("idname")"></div>

tabClick(idname){
	document.getElementById(idname).scrollIntoView({ 
		behavior: "smooth", block: "start", inline: "nearest"})
}

十七、vue 之 监听页面滚动

<div ref="Platform_box" class="classname"></div>

mounted() { 
	this.$refs.Platform_box.addEventListener("scroll", this.handleScroll) 
}

 destroyed() {
    this.$refs.Platform_box.removeEventListener("scroll", this.handleScroll)
 }

 methods() {
 handleScroll(){
 	console.log("滚动了")
    let scrollTop = this.$refs.Platform_box.scrollTop
   }
 }

拓展之根据滚动事件判断定位

let step = 0 //当前定位到第几个
let menu=[{name:'位置1'value:1},{name:'位置2'value:2}]
tabClick(idname,index){
    step = index + 1
	document.getElementById(idname).scrollIntoView({ 
		behavior: "smooth", block: "start", inline: "nearest"})
}

 handleScroll(){
    let scrollItems = document.querySelectorAll(".scroll-item");//各个定位DIV
 	console.log("滚动了")
    let scrollTop = this.$refs.Platform_box.scrollTop
    for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
       if (!scrollTop) {
          step  = 0;
          currentTab = menu[0].value;
           break;
       }
       let judge = scrollTop - 1 >= scrollItems[i].offsetTop - scrollItems[0].offsetTop;
       if (judge) {
           step = i + 1 >= scrollItems.length ? i : i + 1;
           currentTab = menu[step ].value;
           break;
       }
    }
  }

十八、js正则 匹配 汉字、数字、英文字母、下划线 正则表达式

js正则 匹配 汉字、数字、英文字母、下划线 正则表达式…

十九、iview 多个Drawer层级覆盖问题

问题：打开多个抽屉，后打开抽屉层级小于先打开的抽屉导致置于先打开抽屉之下。
解决：关闭在某个元素内打开的设置=>:inner="false"。

二十、WebStorm + Egg.js + Chrome 进行断点调试

https://www.123si.org/ide/article/webstorm-egg-js-chrome-for-breakpoint-debugging/

二十一、SQL之JOIN的用法

JOIN 的用法按照功能划分，可分为如下三类：

INNER JOIN（内连接，或等值连接）：获取两个表中字段匹配关系的记录；
LEFT JOIN（左连接）：获取左表中的所有记录，即使在右表没有对应匹配的记录；
RIGHT JOIN（右连接）：与 LEFT JOIN 相反，用于获取右表中的所有记录，即使左表没有对应匹配的记录。

如下例，table1为左表，table2为右表，不论table2有无匹配值都输出table1的所有数据：

select a.id,a.code,b.name from table1 a left join table2 b on a.code=b.code where a.code>10

二十二、echarts 获取chart实例

<template>
    <div class="echarts-single-bar" v-resize="resize">
        <div ref="echartsSingleBar" style="height:100%;width:100%"></div>
    </div>
</template>

/**
 * 画图
 * */
async loadData() {
	// 获取实例
    this.myChart = this.$echarts.getInstanceByDom(this.$refs.echartsSingleBar);
    if (!this.myChart) {
    	// 初始化实例
        this.myChart = await this.$echarts.init(this.$refs.echartsSingleBar);
    }
    if (this.myChart) {
    	// 数据的动态更新
        await this.myChart.setOption(this.option);
    }
},

二十三、vue之组件封装 - 简单版

法1模板、创建文件 input.vue

<template>
    <div class="echarts-single-bar">
        <Input v-model="value" :placeholder="placeholder" style="width: 300px" />
    </div>
</template>

<script>
	 export default {
        name: "input",
        props:{
			value: {
				type: Number|String
			},
			placeholder:{
				type: String,
				default:()=>'请输入...'
			}
		},
		watch:{
			value:{
				handler(val){
					// 双向绑定
					this.$emit('input',val) 
					// 自定义回调
					this.$emit('on-change',value)
				}
			}
		},
		data(){},
		methods:{}
	}
</script>

法2语法糖、创建input.js

export default {
    template:`<Input v-model="value" :placeholder=":placeholder" :type="type" style="width: 300px" />`,
    props:{
			value: {
				type: Number|String
			},
			placeholder:{
				type: String,
				default:()=>'请输入...'
			},
			type:{
				type: String,
				default:()=>'text'
			},
		},
		watch:{
			value:{
				handler(val){
					// 双向绑定
					this.$emit('input',val) 
					// 自定义回调
					this.$emit('on-change',value)
				}
			}
		},
		data(){},
		methods:{}
}

全局注册 main.js

import component from './input.vue'
// 参数 1 注册组件名，参数2 组件
Vue.component("self-input", component);

// 创建全局组件构造器
import input from './input.js'
const component = Vue.extend(input);
Vue.component("self-input", component);

或按需引入及使用

components:{
	'self-input':() => import('./input.vue') // 懒加载
},
data(){
	return{
		inputValue: ''
	}
}

<self-input v-model="inputValue" type="text" placeholder="请输入..."></self-input>

二十四、JS上传文本并读取文本信息

<button @click="textUpload">上传</button>
<input type="file" @change="callUpload($event)" style="display: none" ref="fileId" accept="text/plain"/>

// 点击上传
textUpload() {
   this.$refs.fileId.dispatchEvent(new MouseEvent('click')); //触发file方法
},
// 处理上传事件
callUpload(event) {
    // const self = this;
    let text = '';
    let files = event.target.files[0];
    const reader = new FileReader(); // 创建FileReader对象

    reader.onload = (e) => {
        // 读取文件内容完成后，将文件内容赋值给变量
        text = e.target.result;
        // 二次上传同一文件失败问题解决，将输入框的value清空，下一次上传同一文件才能触发change事件
        self.$refs.fileId.value = ''
    };
    reader.readAsText(files); // 以文本格式读取文件内容
},

二十五、iview render写法之Form表单验证

<Form ref="formInline" :model="formInline" :rules="ruleValidate">
	<FormItem prop="name"><Input v-model="formInline.name"/></FormItem>
	<Table :columns="columns" :data="data"></Table>
</Form>

data(){
	return{
		data:[],// 表单数据
		ruleValidate:{name:[{required:true}]},// 验证
		formInline:{name:'',systems:[]},// 表单数据
		itemList:[{name:'1',value:'1'}],// 选择
		columns:[
			{ // 例：选择，需要验证添加FormItem外包裹
		    title: '产品',
		    align: 'center',
		    key: 'type_name',
		    render: (h, params) => {
		        return h('FormItem',
		            {
		                props: {
		                    'label-width': 0,
		                    prop: 'systems.' + params.index + '.type_name',
		                    rules: [{ required: true, message: '产品不能为空', trigger: 'change' }]
		                }
		            },
		            [h(
		                'Select',
		                {
		                    style: {},
		                    props: {
		                        placeholder: '请选择产品',
		                        transfer: true,
		                        value: this.formInline.systems[params.index].type_name
		                    },
		                    on: {
		                        'on-change': (value) => {
		                            this.formInline.systems[params.index].type_nam = value
		                        },
		                    },
		                },
		                this.itemList.map((obj) => {
		                    return h('Option', {
		                        props: { value: obj.value },
		                    }, obj.name)
		                })
		            )]);
		    }
		},
		{ // 例：输入，不需要验证不用包裹FormItem
		    title: '名称',
		    align: 'center',
		    key: 'name',
		    render: (h, params) => {
		        return h('Input',
		            {
		                props: {
		                    type: 'text',
		                    placeholder: '请输入名称',
		                    value: this.formInline.systems[params.index].name
		                },
		                on: {
		                    input: (value) => {
		                        this.formInline.systems[params.index].name = value
		                    }
		                }
		            },
		            params.row.name);
		    }
		},
		]
	}
},
methods:{
	// 表单验证
	handleValidate(name){
		this.$refs[name].validate(valid => {
		    if (valid) {
		      // 通过验证
		    } else {
		     // 不通过验证
		    }
		});
	}
}

render 写法说明

render: (h, params) => {
	return h('div',{style:{}},'内容，与html相同的写法，如div里嵌套div')
	// 嵌套div
	return h('div',{style:{}},[h('div',{style:{width:'120px',height:'120px'}},,'值')])
	// 嵌套button
	return h('div',{style:{display:'flex'}},[h('Button',{style:{},props:{size:'small'}},'编辑'),h('Button',{style:{},props:{size:'small'}},'删除')])
}

二十六、vue: 使用下拉树组件@riophae/vue-treeselect - 含详细配置

博客：https://blog.csdn.net/qq_43340606/article/details/132755638
官方npm：https://www.npmjs.com/package/@riophae/vue-treeselect

二十七、transition 使用及动画卡顿问题解决

语法：

transition: property duration timing-function delay;

如：

will-change: width,transform;
transition: width,transform .3s ease;

参数说明：

参数	释义
transition-property	指定CSS属性的name，transition效果，列表以逗号分隔，可选（none,all,应用过渡效果的 CSS 属性名称列表如width，transform）
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线，可选（linear,ease,ease-in,ease-out,ease-in-out）
transition-delay	效果延迟时间s或ms

改变容器的width，height，margin，padding并添加transition动画时会引发浏览器重新计算，因此建议优先使用transform，transform无法解决则可以使用will-change，设置will-change即告诉浏览器提前做好优化准备（详看参考）；

参考：
CSS3动画卡顿性能优化 : https://segmentfault.com/a/1190000013045035
will-change : https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change

二十八、excel文件时间格式转时间戳

js获取Excel日期格式转换成时间戳：https://blog.csdn.net/vayne_1/article/details/129748002

二十九、CSS 文字按宽度自由分散对其/首尾对其

width: 70px;
text-align-last: justify;
text-align: justify;

三十、解决 iview Tooltip 内容高度比自适应高

解决：ivu-tooltip 的display:inline-block 改为 block或flex；
参考：https://blog.csdn.net/qq_25650505/article/details/121575391

三十一、原生JS阻止事件冒泡

eg1：

<button onclick="event.stopPropagation()">Click me</button>

eg2：

button.onclick = function(event) {
	event.stopPropagation()
	// ...dosomething
}

vue render 写法点击阻止事件冒泡 即 使用js原生事件处理

参考：冒泡和捕获：https://zh.javascript.info/bubbling-and-capturing

三十二、web入门

学习：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web

三十三、JS forEach与for循环的break，continue

for 循环中 continue 跳出本次循环进入下一次循环， break 终止循环；
在 forEach 中 return 相当于 continue ，return false 相当于 break；

 let a = 1
 if (a < 3) return;       // 相当于 continue
 if (a > 3) return false; // 相当于 break

三十四、table高自适应并超出滚动

table组件父级组件必须有规定高

.table{
	overflow:hidden;
	::v-deep .ivu-table-wrapper {
    height: 100%;
    overflow: hidden;

    .ivu-table {
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .ivu-table-body {
            flex: 1;
            overflow: hidden auto;
        }

        .ivu-table-tip {
            flex: 1;
            overflow: hidden;
        }
    }
}
}

三十五、JS 抛物线运动

抛物线公式：y=a*x²+b*x+c，本质是通过公式+CSS3动画translate实现物体的位置移动；

/**
 * 点击测试
 * */
enter() {
    let fly = document.getElementsByClassName('animate-dot')[0],// 初始点
        cart = document.getElementsByClassName('capture-item-cart')[0] // 定点
    let a = funParabola(fly, cart, { // 调用方法
        speed: 200,
        curvature: 0.002,
        complete: function () {
        	fly.style.visibility = "hidden";
	        fly.style.right = 0;
	        fly.style.top = 0;
        	fly.style.transform = 'translate(0,0)'; // 返回初始位置
        }
    })
    if (fly && cart) {
        fly.style.visibility = "visible";

        // 抛物线运动触发
        a.position().move();
    }
}

参考张鑫旭大牛的文章：小折腾：JavaScript与元素间的抛物线轨迹运动；
抛物线方法文件：https://gitee.com/niceguy802/js-parabolic-fun-parabola

三十六、vue 列表中的元素或组件的插入、移除 添加动画效果

<transition-group class="content" name="list" tag="div">
    <div v-for="(item,index) in tableData" :key="item.code" class="content-item">
       <span>{{item.name}}</span>
       <span>{{item.time}}</span>
    </div>
</transition-group>

.content {
    width: 100%;
    height: 18.5rem;
    /*overflow: hidden;*/
    position: relative;
}

.content-item {
	width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    border:1px solid red;
    border-radius: 100px 0 0 100px;
    transition: all 1s;        
}

.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateY(30px);
}

参考官网：https://cn.vuejs.org/guide/built-ins/transition-group.html

三十七、vue-seamless-scroll 无缝滚动

本质滚动的是两组数据，一组走完接第二组，添加点击事件会有二次滚动点击事件不生效的问题，解决办法是在组件外部div添加点击事件检测点击，拿到点击的具体内容，如设置了data-自定义参数名，可通过event.target.dataset 拿到设置的code值，或event.target.innerHTML等…

<!--外层检测点击-->
<div @click="open($event)">
	<vue-seamless-scroll :data="table" :class-option="Opts">
		<span :data-code="123"></span>
	</vue-seamless-scroll>
</div>

data(){
	return{
		table:[],// 内容数据
		Opts: {
		    step: 1, // 数值越大速度滚动越快，step 值不建议太小
		    limitMoveNum: 3,
		    singleHeight: 70, // 单步运动停止的高度(默认值 0 是无缝不停止的滚动)
		    waitTime: 2000 // 停顿时间 - 未设置停顿无限滚动很消耗性能
		},
	}
}

参考文档：https://chenxuan0000.github.io/vue-seamless-scroll/zh/

三十八、地图厂商坐标系

地理坐标系：GIS】地理坐标系WGS84、GCJ-02、BD-09、GCS2000

三十九、CSS3 背景毛玻璃

搭配伪元素after、before 使用 filter: blur(5px)模糊背景。
父级组件相对定位，内容文字等也需要加定位，伪元素添加背景并设置blur，over。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

四十、uniapp 小程序包大小优化

1、分包（本质减小主包，主包/分包均不能大于2M）
manifest.json 设置 "subPackages" : true;

根目录下（pages同目录）添加分包文件夹，如pages-second，tabbar目录只能在pages；
pages.json配置pages分包配置，如下其目录为 /pages/second/test/index：

2、hbuilder运行时压缩，目录unpackage/dist/dev

3、hbuilder发行，目录unpackage/dist/build

四十一、弹性布局 flex与网格布局grid

1、弹性布局 flex

• 默认不换行：display:flex;flex-warp:nowarp
• 内容居中：父级容器 align-items:center;justufy-content:center;
• 等分：子容器 flex:1

2、网格布局grid

• 默认内容撑开：display:grid;

• 3列宽度等分：grid-template-columns:1fr 1fr 1fr 或 grid-template-columns:repeat(3 ,1fr) repeat函数，简化重复的值；

• 规定宽度：grid-template-columns:repeat(3 ,100px)，即三列宽度为100px；

• 行：第一行高100,2/3行占剩余等分：grid-template-rows:100px 1fr 1fr; 多于三行剩余行按内容撑开；

• 间隔：grid-gap:10px; 等同于grid-row-gap: 20px; grid-column-gap: 20px;；

• 容器上下左右边框位置（类似宽高及位置设置），设置为网格线位置，适合有固定行列：
  指定容器左右开始和结束位置，占1-2列

grid-column-start: 1;
grid-column-end: 3;

指定容器上下开始和结束位置，占1-3行

grid-row-start: 1;
grid-row-end: 4;

• 设置容器宽高占行列宽高多少：
  span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格
  宽度占2个默认列宽（如默认列宽设置为grid-auto-column:10px;）

grid-column-start: span 2;
/*与grid-column-end: span 2;效果一样*/ 

行高占3个默认行高（如默认行高设置为grid-auto-row:10px;）

grid-row-start: span 3;
/*与grid-row-end: span 2;效果一样*/ 

即容器宽为20px，高为30px;

网格布局的瀑布流：https://blog.csdn.net/weixin_44167504/article/details/138613440?spm=1001.2014.3001.5502

参考：
1、菜鸟教程 - CSS3 弹性盒子(Flex Box)
2、阮一峰 - Flex 布局教程：语法篇
3、菜鸟教程 - CSS 网格布局
4、阮一峰 - CSS Grid 网格布局教程
5、一文搞懂grid布局 和 flex 布局及其区别

四十二、折叠面板折叠实现

使用网格布局，不设高度，行默认1fr，收起时设为0fr，同时设置动画过渡效果，如 transition: all .3s; ；

<div class="card-box-content" :style="{'grid-template-rows':tempValue?'':'0fr'}">
	<!--插槽内容自适应，不设高，设min-height至少为0（关键）-->
    <slot name="content"></slot>
</div>

三角箭头同步设置动画过渡效果，如下

<!--使用变量控制，三角使用图片或Icon-->
<Img src="" :class="{'down-active':false,'down-normal':true}"/>

/* 具体角度按实际的内容确定 */
.down-normal {
    transition: all linear 0.1s;
    animation: down-to-open .1s linear;
}

.down-active {
    transition: all linear 0.1s;
    transform: rotate(-90deg)
}

@keyframes down-to-open {
    from {
        transform: rotate(-90deg)
    }
    to {
        transform: rotate(0)
    }
}