Remind

• 基于vue2.x+antv x6实现可拖拽编辑拓流程拓扑图

www.cnblogs.com/gengzhen/p/…

• js tree 根据子节点找到所有父节点

www.bubuko.com/infodetail-…

• 抽奖程序

github.com/moshang-xc/…

• vue监听div变化，动态设置样式(element-resize-detector)

npm install element-resize-detector
import elementResizeDetectorMaker from 'element-resize-detector';
const erd = elementResizeDetectorMaker();
erd.listenTo(document.querySelector('.rightDiv'), function (element) {
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    console.log('Size: ' + width + 'x' + height);
    document.querySelector('.leftDiv').style.height = height + 'px';
});

• $nextTick与mounted理解

根据官方文档“Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted”，它意思是，mounted函数里面，只是说vm.$el被挂载到了Vue实例了，但所有dom还没渲染完成，如需等到所有dom被渲染完成后做某些动作，需在mounted函数里面的vm.$nextTick函数中写

• 超过4行后显示省略号

    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    /* autoprefixer: ignore next */ //防止编译后丢失
    -webkit-box-orient: vertical;

• 事件透传

/deep/ .ant-select-suffix {
     pointer-events: none;
}

• 配置服务地址时，在已存在一个/soc-api/的情况下，/soc-api-v2/会报404，/soc-v2-api/正常

• 获取焦点

<a-input-search  ref="searchInput"  v-model:value="searchValue" />
const searchInput = ref<any>(null);
function changeQuery() {
    nextTick(() => {
       searchInput.value.focus();
    });
}

• git 密码重置后认证不通过

git config --system --unset credential.helper --> 重新输入账号密码即可

• git 保存密码不用每次输入

git config --global credential.helper store

• 自定义a-checkbox-group

<a-checkbox-group v-model:value="titleCheckBox" @change="changeColumns">
<span v-for="data in alloptionsKeyShow"
    :key="data.value"
    :title="data.label"
    style="word-break: break-all; overflow: hidden; text-overflow: ellipsis"
    >
    <a-checkbox :value="data.value">{{ data.label }}</a-checkbox>
</span>
</a-checkbox-group>

• antd RangePicker设置showTime: true,会动态设置width：350px

.ant-form-item-children .ant-calendar-picker {
  width: 100% !important;
}

• setTimeout(()=>{debugger}, 1500)  和 dom断点（右键）

• antd select动态赋值option  当长度为7—10条时滚动条显示不出来且无法滚动

logAudit-soc\logaudit-web\node_modules\ant-design-vue\lib\vc-virtual-list\hooks\useFrameWheel.js 26行 if (!inVirtual.value) return;
logAudit-soc\logaudit-web\node_modules\ant-design-vue\es\vc-virtual-list\List.js  inVirtual
itemHeight 为24  但实际为42 导致计算异常  

解决1：virtual: false, 使用原生滚动

• js函数中传递对象参数

1. ECMAScript中所有函数的参数都是按值来传递的
2. 保存对象的变量，它里面装的值是这个对象在堆内存中的地址
3. 在 javascript 中数据类型可以分为两类： 原始数据类型值 primitive type，比如Undefined,Null,Boolean,Number,String。

引用类型值，也就是对象类型 Object type,比如Object,Array,Function,Date等

• js下载csv中文乱码

utf-8保存的csv格式文件要让Excel正常打开的话，必须加入在文件最前面加入BOM(Byte order)。如果接收者收到以EF BB BF开头的字节流，就知道这是UTF-8编码了

var content = "日期,用户名\r\n2018-08-01,张三"; 
content = "\uFEFF"+content; 
var blob = new Blob([content], {type: 'text/plain'});
var link = document.createElement('a');
link.download = '测试.csv'; 
link.href = window.URL.createObjectURL(blob);
link.style.display = 'none'; 
document.body.appendChild(link);
link.click();

• caniuse

caniuse.com/?search=ES%…

• MD5在线破解

www.cmd5.com/

• jtopo

www.jtopo.com/get_start.h…

• 富文本

tinymce.ax-z.cn/

simditor.tower.im/

• markdown

ckang1229.gitee.io/vue-markdow…

b3log.org/vditor/demo…

• 拖动布局

github.com/jbaysolutio…

• github加速器

gitee.com/docmirror/d…

• tree拖拽

www.cnblogs.com/yzyh/p/1199…

• qiankun

github.com/umijs/qiank… qiankun.umijs.org/zh mp.weixin.qq.com/s/juf_PPpSU…

• icon

at.alicdn.com/t/project/2…

• midway

www.midwayjs.org/docs/contai…

• 文档在线编辑、预览

baijiahao.baidu.com/s?id=170168… gitee.com/kekingcn/fi… mengshukeji.github.io/LuckysheetD… chang-xie.gitee.io/devdoc/#/co…

• Object.freeze

冻结后的对象不会在被修改, 不能对这个对象进行添加新属性, 不能删除已有属性, 不能修改该对象已有属性的可枚举性, 可配置性, 可写性. 此外冻结一个对象后该对象的原型也不能进行修改. freeze() 返回和传入的参数相同

const object1 = { property1: 42 }; const object2 = Object.freeze(object1) object2.property1 = 33; // Throws an error in strict mode console.log(object2.property1); // 42

• 自定义图表

ppchart.com/#/

www.makeapie.cn/echarts_cat…

madeapie.com/#/

www.isqqw.com/

• i18自动生成

github.com/RichieChoo/…

• MDN

developer.mozilla.org/zh-CN/

• 力扣

leetcode.cn/problems/lo…

• # Ant-Design-Vue 走马灯Carousel 数据绑定问题

在轮播元素上的数据绑定不生效，数据发生改变却在页面不进行渲染。正常轮播组件进行滚动式轮播，若想达到无缝连续循环滚动的效果是通过克隆轮播元素实现的。页面轮播展示的是原元素，而数据绑定的却在克隆的元素上，实际是对克隆元素有渲染的。

infinite，设置之后就不会克隆元素，数据绑定直接在原元素生效

<a-carousel
        vertical
        autoplay
        :autoplay-speed="autoplaySpeed"
        :infinite="isInfinite"
      >
...
</a-carousel>

PS:
1.官网API其他无提及但其实很常用的参数配置也可以在React Slick 里面找找，例如verical、autoplaySpeed，经验证这两个都可使用。
2.如果滚动形式是fade，也是不会克隆元素

• chart gpt

github.com/Chanzhaoyu/…

• # JS使用Blob导出csv文件中文乱码解决方案

在数据前面加上字符串"\ufeff"即可

• # JSON字符串格式化

vue2-ace-editor

• # IE与safari浏览器中时间格式问题

在js中处理Date时,发现IE与Safari和其他浏览器的支持方式不一致

1.例如:2017-01-01 12:00:00

在其他浏览器中,使用这个格式的字符串进行new Date操作没有问题,但是在Safari中会提示Invalid Date;

Safari中不支持'-'格式的日期字符串,将其替换成'/' 变成2017/01/01 12:00:00即可正常使用

2.例如:2017/01/01T11:00:00

此格式的日期字符串在Safari中也是不得到支持的,需要将字符串中的'T' 替换成空格

变成2017/01/01 11:00:00格式

这个问题直接导致IE与Safari浏览器中不能处理与Date相关的程序

二、解决办法

进行两个符号的替换即可。'-'替换成'/'；'T'替换成空格

• # # JS正则RegExp.test()，第一次true，第二次false

RegExp.test()异常分析

现象 代码如下：

const reg= /^\[0-9]+\$/g;
reg.test('123abcdef');
// true
reg.test('123abcdef');
// false

如上的代码，第一次测试返回true，第二次以及之后的调用都会返回false。

原因 这是因为RegExp.test()方法，第一次从位置0开始查找，可以匹配；第二次的查找位置就不是0了，说以就不能匹配了（加上了【g】修饰符才会有这个问题，第二次会从第一次匹配的位置后面开始查找，即lastIndex 属性规定的下次匹配的起始位置）。

解决方法： 方案1

去掉正则修饰符 g ，如下：

const reg= /^\[0-9]+\$/;
reg.test('123abcdef');
// true
reg.test('123abcdef');
// false

方案2 不要复用RegExp，每次测试前都使用新的RegExp对象。上述代码改为：

const getReg = () => {
const reg= /^\[0-9]+\$/g;
return reg;
}
getReg().test('123abcdef');
// true
getReg().test('123abcdef');
// true

方案3 很多时候，我们必须要执行 全局匹配（ g ），这时候就不能使用第一种方案了。 其实，我们的lastIndex 属性是可读可写的。 只要目标字符串的下一次搜索开始，就可以对它进行设置。

const reg= /^\[0-9]+\$/g;
reg.test('123abcdef');
// true
reg.lastIndex = 0;
reg.test('123abcdef');
// true