- 博客(236)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 类似 git 前端代码比对
类似于 gitee 选择 对比源和目标，然后获取两个版本的文件目录树，再根据选择的具体文件对比两个文件的内容，一般是对比源相对于目标的文件改动进行差异化展现，在内容上就是 增加、删除、变更。
2023-12-14 19:36:00
892
原创 代码预览并语法高亮、增加行号
原理：highlight.js 将代码格式化以后，可以通过样式设定代码行高，然后计算代码总高度，再用总高度/行高 = 行数，最后生成行号。为什么不把每一行代码放入一个元素呢，因为 highlight.js 格式化后的代码是 span 标签字符组合，也不是使用一个元素包裹一行的，是通过类控制换行。如果需要将一行代码装入一个元素中，需要去了解 highlight.js 中的规则。</code>`;});
2023-12-11 11:51:39
791
原创 el-select的change事件中使用$confirm导致下拉框无法关闭
监听 el-select 的change 事件，当事件改编的时候调用 this.$confirm 做某些确认事情，当点击取消和确认后 confirm 的弹窗关闭，但是 el-select 会重新聚焦，下拉框会重新弹出，导致需要重新点一下界面空白才会收起。手动调用 el-select 的 blur 方法。
2023-11-28 16:17:19
472
1
原创 使用 vue + vant 开发移动端网页
propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如 propList: [“*”,“!letter-spacing”],这表示：所有 css 属性的属性的单位都进行转化，除了 letter-spacing 的。移动端开发的时候我们通常需要进行适配，比如设计图宽度是 750px 我们为了适应不同的设备，需要将我们设计图上的 px 转为 视口单位 vw。这里我们采用 postcss-px-to-viewport。新建 postcss.config.js。
2023-09-20 10:26:18
753
原创 axios 用formData的方式请求数据
问题：传递数据的时候不是直接通过json的方式来传输的数据，二是通过formData的方式。axios 请求头设置，Content-Type。需求：使用axios库用来做http数据传输。
2023-09-10 21:35:32
1529
原创 webstorm报错cliEngineCtor is not a constructor this.options.parse is not a function at ESLintPlugin
webstorm报错cliEngineCtor is not a constructor this.options.parse is not a function at ESLintPlugin
2023-01-12 15:43:30
3845
2
原创 解决 excel 文件上传时更改选中的文件出现错误net::ERR_UPLOAD_FILE_CHANGED
net::ERR_UPLOAD_FILE_CHANGED
2022-07-01 10:14:59
4015
原创 echarts 线性渐变方向
渐变使用方式：1、new echarts.graphic.LinearGradient2、type: linear拿官网的例子举例：Examples - Apache ECharts这个图中渐变核心部分： series: [ { type: 'bar', showBackground: true, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0.
2022-05-10 19:11:11
5058
1
原创 在 Vue 中使用 svg
在vue中使用 svg 有两种方式：1、使用本地的svg2、把本地的 svg 上传到 iconfont中，统一去色生成 symbol 格式的文件引入一、要使用 svg 先安装对应的 loadernpm install svg-sprite-loader然后在 vue.config.js 里面对 .svg 结尾的文件使用对应的 loadermodule.exports = { /* svg 相关配置 */ chainWebpack: config => {
2022-03-08 23:52:50
25154
原创 echarts 半圆形进度条
图例：配置项：// 进度百分比var value = 20option = { // backgroundColor: '#36467E', title: [{ text: '半圆进度条', left: 'center', top: '70%', textStyle: { color: '#2892E8', fontSize: 14 }...
2022-02-26 00:32:55
5634
原创 echart 柱状图指定柱子颜色
配置项：const colors = [ { start: '#00bfbf', end: '#95f205' }, { start: '#00bfbf', end: '#02a7f0' }, { start: '#00bfbf', end: '#95f205' }, { start: '#00bfbf', end: '#02a7f0' }, { start: '#00bfbf', ..
2022-02-26 00:30:16
2165
原创 echartr 饼图 hover 时各个 item 的数据在中间显式
如图：option = { series: [ { name: 'aaa', type: 'pie', radius: ['20%', '40%'], label: { show: false, position: 'center', formatter: '{value|{c}} \n {name|{b}} \n {percent|{d}}%', rich: {
2022-02-22 22:01:16
588
转载 封装 el-pagination
<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="p.
2022-02-20 23:59:16
333
原创 el-date-picker 不能大于当前日期时间，精确到时分秒
之前以为使用disabledDate 限定日期就够了，后面说需要限制在此刻之前更严谨。这里就需要更改selectableRange的值。刚开始想使用事件监听的方式，比如 change、focus事件，但是发现不能，这里的事件是针对输入框的，而不是弹出来的 date-picker里面的输入选择框。所以使用监听他的值。当我们日期每次变动的时候都需要去验证是否是当前日期，然后才看是否修改selectableRange的值template 部分<el-date-picker plac..
2022-02-20 23:50:37
12304
1
原创 手写一个 instanceof
原型链代码：function instanceOf(left, right) { if (typeof left !== 'object' || left === null) { return false } while (true) { if (left === null) { return false } if (left.__proto__ === right.protot
2022-02-09 21:26:40
217
原创 JS 模拟 ping IP地址
测了一个可用的：function ping_ip (ip) { let img = new Image() let start = new Date().getTime() let isC = true let hasFinish = false return new Promise((resolve, reject) => { img.onload = function () { if (!hasFinish) { hasFinish =
2022-02-06 11:40:08
1950
1
原创 js 继承由浅入深
JS 继承这里讨论几种常见的方式，循序渐进1.原型链继承 2.构造函数继承 3.组合继承 4.寄生组合继承一、原型链继承实现function Parent() { this.name = "parentName";}Parent.prototype.getName = function () { console.log(this.name);};function Child() {}// Parent的实例同时包含实例属性⽅法和原型属性⽅法，所以把new Parent()
2022-01-31 20:20:20
1001
原创 温故知新（九五）promise 并发 和 按顺序执行
并发可以直接使用 Promise.all 进行多个 Promise 并发执行按顺序执行：1.可以使用 async 函数里面的 for of 进行迭代2.可以使用 reduce 函数进行迭代调用调用的promiseconst sleep = () => { return new Promise((resolve, reject) => { setTimeout(function(){ console.log('sleep') ...
2022-01-28 19:06:58
2791
原创 温故知新（九四）Promise 规范相关
两次返回结果const promise1 = new Promise((resolve, reject) => { resolve('promise1') })const promise2 = new Promise((resolve, reject) => { resolve('promise2') })promise1 .then(function () { return promise2 }) .then(function (val) { cons
2022-01-27 23:51:04
304
原创 温故知新(九三) promise 规范相关 var promise1 = new Promise((resolve, reject) =＞ {reject()；})；promise1 .the
var promise1 = new Promise((resolve, reject) => {reject();});promise1 .then(null, function() { return 123; }) .then(null, null) .then(null, null) .then( (val) => { console.log('promise2 已完成:' + val); }, (val) => { console.log('promise.
2022-01-25 13:09:06
932
原创 echarts dataZoom 基本用法，给 yAxis 增加滚动条
现有一个 echarts 图表，需要在 y 轴方向上设置一个滚动条，可以滚动数据，x 轴显现的数据固定不动不能跟随滚动条滚动，所以不能直接使用外层盒子的 overflow: auto。可以使用 echarts 的 dataZoom 组件来实现 dataZoom: [ { type: 'slider', show: true, // 设置组件控制的y轴 yAxisIndex: 0, right: 40, top:
2022-01-18 00:15:42
4381
1
原创 文件大小转换为对应的单位
给定一个文件大小转换为对应的单位大小，保留两位小数function transformUnit (size) { if (size < 1024) { return size + 'B' } else if (size < 1024 * 1024) { return (size / 1024).toFixed(2) + 'KB' } else if (size < 1024 * 1024 * 1024) { return (size / 1024
2022-01-10 19:56:35
389
原创 处理时间格式的工具类，毫秒转为剩余时间
1、处理时间格式的工具类定义一个时间格式相关的类，这个时间格式可以直接静态调用两个方法，一个是转换为两位数的时间格式(toTwoDigit)，另一个是将时间转为目标的时间格式(format)，里面的访问对应时间的方法定义为 get 方法，方便直接使用时返回结果class DateFormat { // 转为两位数格式的，如3 ->03, 9 -> -9 也可以用padStart static toTwoDigit (num) { return num < 10
2022-01-09 23:19:38
970
原创 JS发布-订阅模式 和 观察者模式
发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的以来关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。在 JS 开发中，我们一般用事件模型来替代传统的发布-订阅模式。...
2022-01-05 23:28:32
2553
原创 vue 相关问题（1）
1、Vue 的双向绑定原理所谓的双向绑定原理是建立在 MVVM 基础上的：数据层 Model：应用的数据以及业务逻辑 视图层 View：应用的展示效果，各类的 UI 组件等 业务逻辑层 ViewModel：负责将数据和视图关联起来数据变化后更新视图，视图变化后更新数据包含两个主要的组成部分：监听器 Observer：对所有的数据属性进行监听解析器 Compiler：对每个元素节点进行扫描和解析，根据指令替换数据，绑定对应的更新函数具体的实现原理：new Vue() 执行初始
2022-01-05 11:42:22
259
原创 层序遍历
1、层序遍历基础模板：/** * @param {TreeNode} root * @returns {number[]} */function levelOrder(root) { if (!root) { return [] } let queue = [root] let res = [] while (queue.length) { let node = queue.shift() res.push(node.val) if (n
2021-12-09 00:05:29
2187
原创 timeLine 的使用
timeLine 的type 可以是value，time，category，当我们使用 time 时，data 里面的时刻数据会按照时间先后顺序自动从小到大排序到时间轴上，比如，你的数据是：['2021-08-13 08:00:00','2021-08-13 09:00:00','2021-08-13 10:00:00','2021-08-13 11:00:00','2021-08-13 12:00:00','2021-08-13 06:00:00']那么时间轴上会将最后一个数据
2021-11-30 23:05:13
866
原创 vue 限制只能输入数字
我们可以监听 input 事件，然后使用 replace 方法例如限制当前输入框必须为 < 1000 的数字<el-input @input="item.value = isNaN(item.value)" ? item.value.replace(/[^\d]/g, '') : (item.value > 1000) ? 1000 : item.value/>...
2021-11-30 22:58:44
2444
validation.js
2019-10-25
bootstrapStyle.zip
2019-09-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人