init_yanxiao的博客

原创 jointjs从0到1实现dataMapping(数据连接器)遇到的所有问题以及总结(全网最详细)

jointjs官网文档写的太差劲了 而且国内根本没有几个正经的joint文章 所以全部记录下来 希望可以帮到更多的人

原创 命令自用.

【代码】命令自用.

原创 el-table多选+树形table 使用toggleAllSelection全部勾选以后 只有父节点被勾选 父节点下的子节点都没被勾选 —— 已解决

【代码】el-table多选+树形table 使用toggleAllSelection全部勾选以后 只有父节点被勾选 父节点下的子节点都没被勾选 —— 已解决。

原创 antv/X6拖拽节点变成圆形

Shape.Circle 是定义圆形的一个工厂方法，它返回一个对象，包含 Shape.Circle.define() 方法生成的图形的形状信息。它的 attrs 属性用来定义节点的样式，attrs.circle 表示绘制的圆形的样式信息，可以设置圆心位置和半径等属性。在实现拖拽功能时，可以在 Shape.Circle.define() 方法内部添加一些逻辑，比如记录节点的坐标等信息。然后，可以在进行节点拖拽时，调用 node.position(x, y) 方法来修改节点的坐标信息，从而实现节点拖拽的功能。

原创 vue3 +element upload 组件应该避免遇到的问题

这里有一个坑-----------------------注意！然后后端这个时候返回一般都是二进制 通常为这种格式。然后是下载功能---------------

原创 Vue3 TypeError: Cannot read properties of null

缺少emit绑定的事件，导致双向绑定失败，v-model写成v-modle 写错字。

原创 /* eslint-disable no-eval *eslint 不报错

把这段加到页面的最上面就可以了/* eslint-disable no-eval */

原创 将git分支的一次提交代码转到另一个分支上

git cherry-pick 后面跟git commit 提交的编码 fe18dd58a6e969ae9ddfb8082f46c0a81cf076d2 // 类似与这种格式

原创 使用nvm时遇到的所有问题（集合版）

1. 使用nvm use xxx （版本号） 出现exit status 1: �ܾ����ʡ�当时用的是 1.1.9版本，网上说文件名有空格所以会报错，不过当时文件名是没有空格的，解决办法是我重新下载了低版本的 1.1.7版本 下载链接：https://github.com/coreybutler/nvm-windows/releases/download/1.1.7/nvm-setup.zip该版本目前稳定==============================================

原创 vue使用http-server看手机上的效果

今天想看下签名版这个组件在手机端的效果，不过是vue项目，接下来我们看一下怎么操作手机端和PC端必须要在同一个IP下访问首先在项目终端 使用命令npm run build打包成功打开dist文件输入CMD 打开小黑框接下来输入这些命令npm install http-server -g // 下载输入http-server然后连接Ip...

原创 浏览器断点如何使用(测试工具)

首先在我们需要的地方加上 debugger然后我们跑动我们的页面的时候记得 CTRL + ` 打开调试器，然后帮到我们那一段逻辑最后希望大家的开发一路顺风

原创 element 时间选择器禁用 秒 选项

需求是不要时间选择器的秒选项已解决只需要 标签中的format不设置 ss 就可以了

原创 webpack path模块(也是Node.js中的path模块)

path是一个构造类，他的原型上挂载了很多API使用方法const path = require("path"); // 首先我们在webpack.config.js中引入path模块然后我们在resolve对象中挂载 alias 对象alias = { main: path.resolve(__dirname, "../src"), // 其中__dirname就是绝对路径，也就是做了一次拼接 packages: path.resolve(__dirname, "../packages"

原创 dayjs day()常犯错的一个Bug

// 如果当前天是周日,返回值是0，因为美国每周把周一当第二天，所以我们前端做星期判断时候应该把0转成7dayjs(new Date).day() // 0

原创 算出两个时间范围是否有交集（前后端通用算法）

var start = 12:00 // avar end = 18:00 // b var startTime = 14:00 // cvar endTime = 19:00 // d// 两个起始时间是有交集的// 带入算法if(a > d || c < b){// true 无交集 false 有交集 // 解决}

原创 elementui 日期选择器 单选多选都可以控制时间 （原理）

<el-date-picker v-model="value1" align="right" type="date" placeholder="选择日期" format="MM月DD日" :picker-options="{ disabledDate(time){ // 参数 time 是日期选择器中的每一天，所以不管是多选还是单选的选择器都可以进行开始和结

原创 拼接数组的高级语法 concat 每天一个JS小tips

直接举栗子var arr1 = [1,2,3]var arr2 = [4,5,6]arr1.concat(arr2) // arr1不会变 此函数返回值为arr1 拼接 arr2 的副本新数组consele.log(arr1.concat(arr2)) // [1,2,3,4,5,6]

原创 使用new Array(x)初始化数组 高级进阶语法

var arr = new Array(5)consele.log(arr) // [empty × 5] 他本身是不具有迭代器的，所以没有数组原型上的API// 这个时候需要初始化我们的数组让我们的数组，所以扩展出了fill方法var arr = new Array(5).fill([])consele.log(arr) // [Array[0] * 5] 这样我们就初始化好了我们的数据,那如果需要更复杂的数据呢?var arr = new Array(5).fill([]).map(i

原创 Vue.use个人理解

首先在注册全局API或者全局组件的时候，都需要在注册install方法，也就是手写

原创 vue项目 高德/腾讯地图的地图实例中没有对应的API方法如何进行添加

直接讲原因和解决方案原因：:高德地图的实例JS里的API太多一般不会全部给你，所以通常是根据用户的需求进行API配置解决方法： 在public/index.html文件夹中 会有引入高德地图实例的script标签,在引入的url后面添加你想要的API就可以了<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxx我的Key&plugin=Map3D,添加你想要的API

原创 git刷新远程分支 并且不影响本地仓库

// 他可以使你拉取最新的git分支并且不影响你的本地仓库git fetch

原创 git提交到本地仓库了，但是分支却推送不上去怎么回退到提交之前的状态

// 他可以使你把本地仓库的代码回到带储存区git reset --soft HEAD^

原创 数组每隔X项就插入一个新的元素

// 算法为 1 + x * index var arr = [1,3,5,7,9] //这一套算法适用所有插入数组的条件，用单双数只是让人更好理解var arr1 = [2,4,6,8,10]for (let i = 0; i < arr.length; i++) { arr.splice(1 + 2 * i, 0, arr1[i]); // 1 为起始位置, 2为每两项插入一次 } log(arr) // [1,2,3,4,5,6,7,8,9,10].

原创 后端传base64位的数据，怎么转化成excel表格下载链接，干货

可以看见点击完导出按钮后端反的是base64的值下面是解法 ，这是转化函数，我是将他放到了一个实体类里（建议这样，因为很多地方用的到） // 转化路径变base64的路径 convertBase64ToBlob(base64, fileType, slice) { return new Blob( atob(base64) .match(new RegExp(`([\\s\\S]{${slice}})|([\\s\\S]{1,${slice}})`, "g").

原创 关于this.$options.data()指向问题 已解决

今天使用this.$options.data()报错了，因为在data里使用了this,然后初步定位是this指向问题，应该是this.$options.data()里的this指向应该是window（不一定是准确答案），更新写法应该是this.$options.data.call(this) // 改变this指向把this指回来...

原创 TypeError [ERR_INVALID_ARG_TYPE]: The “path“ argument must be of type string（已解决）

这个问题是因为你的包的cill.js问题出现了识别window版本的问题，所以导致出现这种问题解决思路这时候VScode终端会肯定会显示这一段出错包的路径，你顺着这个找到cill.js文件，把里面的NRMRC（环境变量）后面的表达式改成const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');直接改，没事的这就是对window版本做了判断...

原创 引入包但是无法编译这个包里面的语法（已解决）

在这里加上你指定需要加上的包就可以了

原创 exports is not defined（已解决）

首先在编译的时候其实就出现很多警告了提示无法编译然后进入使用过element组件的页面，报了下面的错误exports is not defined于是我看了下element包的源码这个语法babel包识别不了，就是导致编译不了，而且有些浏览器也不会自动编译**=====================下面解决**这是babel.config的配置文件，旧版的我们使用新版的就也可以编译啦presets: [["@vue/app", { useBuiltIns: "entry" }]],

原创 element给嵌套的dialog组件单独设置样式

因为有时间嵌套的dialog会和父dialog产生样式的冲突添加一个custom-class，这个可以设置一个独特的样式，然后你可以在这个自己设定的样式上进行修改

原创 让父组件继承子组件的具名插槽

有两种用法第一种用法// 子组件// 具名插槽<template> <slot name="pending"></slot></template>// =====================分割线==================// 父组件// 遍历slot插槽<template v-for="item in Object.keys($slots)" #[item]="scope"> <slot :

原创 Uncaught RangeError: Maximum call stack size exceeded （已解决）

直接说答案 ： 别把实例this传下去下面说解决思路今天遇到这个问题，页面直接加载不出来，后来解决问题了我在把父组件实例传到子组件下面去所以才报错所以解决办法不传this就可以了...

原创 TypeError: this.getOptions is not a function（全网最详细）

这个是因为 这个鬼家伙导致的，因为你的依赖反义不了它，所以会报错this.getOptions is not a function这个时候我们先看下我们的package.json要有sass-loader style-loader node-sass 才可以翻译成功哦命令如下npm uninstall sass-loadernpm install [email protected] --save-devnpm uninstall style-loadernpm install style-

原创 做一个适合公司的组件库（私有）

因为时间比较赶，所以搭建的任务我建议我用比较成熟的组件库的配置文件，而不是自己手动搭建一个，这样太浪费时间了element源码是有工程化，官网组件库等，我是想用工程化搭建项目，工程化element搭建的优势只要你写完组件就可以一件打包额~下面是工程化element的优势和介绍接下里说下我们要用到的指令node build/bin/build-entry.js进行组件打包node build/bin/build-locale.js进行国际化刷新node build/bin/gen-cs

原创 .sync 子组件直接修改父组件的值

//父组件 <div> <我是子组件 :age="age"> </我是子组件> </div>``//子组件<button @click.sync = '$emit(updata.age, '传到父组件的新值')'></button>//优点在于父组件不用监听子组件的emit事件了！我感觉还挺好用的...

原创 请求值返回以后选择性赋值而不是直接覆盖

// 在data里声明了XXX以后，这个会遍历xxx里面所有的key，然后把res里面对应key值的值赋值给xxxObject.keys(this.xxx).map((i) => { this.xxx[i] = row.data[i] || ""; });

原创 请求发不出去,NetWork没有请求，调试面板也没有报错

遇到这个情况一般是这个请求的Url没有，所以导致请求发不出去。

原创 高德地图报 TypeError: Cannot read property ‘toFixed‘ of undefined

总结几条这几天遇到的问题在调用高德地图的时候地图用不出来，一直报这个错TypeError: Cannot read property ‘toFixed’ of undefined最后我的解决方法就是取消center这个配置

原创 给表单快速充值，组件数据重置

原创 基于Vue+ElementUI的省市区地址选择通用组件

一、缘由在项目开发过程中，有一个需求是省市区地址选择的功能，一开始想的是直接使用静态地址资源库本地打包，但这种方式不方便维护，于是放弃。后来又想直接让后台返回全部地址数据，然后使用级联选择器进行选择，但发现数据传输量有点大且处理过程耗时，于是又摒弃了这种方法。最后还是决定采用异步的方式进行省市区地址选择，即先查询省份列表，然后根据选择的省份code查询城市列表，最后根据选择的城市列表获取区/县列表，最终根据应用场景不同，给出了两种实现方案。其中后台总共需要提供4个接口，一个查询所有省份的接口，一个根据省

原创 冷知识ES6遍历方法的‘第二个参数’

今天看ES6解释的时候看到的 forEach/some/fliter都是支持第二个参数的，也就是直接修改this指向，不再需要使用bind了~