梦港清澈-CSDN博客

原创折线图播放器组件 - elementui - ehcart

（1）需求介绍：该组件可查看某个设备在某10分钟内的秒级数据，点击播放按钮后，折线图的节点与提示框随进度条右移。可以点击图例关闭数据的显示，支持倍速调节，支持快进后退，支持折线图的展开收起（2）预览图：（3）实现思路：播放器的核心是el-slider组件，一切事件都围绕它的绑定值进行。考虑到进度条为主，折线图为次，因此需添加一层蒙版屏蔽所有来自echart的交互。监听el-slider的变量改变，依次触发echart的downplay、highlight、showTip事件，实现折线图和进度

2021-07-06 10:50:04 477

原创 Iconfont - 给placeholder动态绑定图标

1. 效果展示：2. 问题描述：ElementUI的时间日期选择框，默认的时钟icon在左边，而需求是使用自定义的图标，并跟随提示语居中。因此可以考虑用InnerHTML的思路，在el-date-picker时间日期选择器的placeholder提示语里加上iconfont编码，使其自动识别为iconfont图标3. 实现方法：(1) ★给placeholder绑定变量（此处注意，直接赋值placeholder=' \ue6a1 请选择时间'，无法显示图标）html:<el-date-p

2021-06-30 09:53:47 557

原创 20210629 - 前端业务项目的日常记录

1. 绘制对角线、获取斜线倾斜角度var diagonals = document.getElementsByClassName('diagonal') // 对角线divfor (const item of diagonals) { var width = item.offsetWidth var height = item.offsetHeight var degree = 180/Math.PI*Math.atan2(height, width) // 计算倾斜角度 item.style.

2021-06-29 09:31:49 136

原创 20210625 - 前端业务项目的日常记录

1. css样式表里怎么不用../而是用@/assets/来写图片路径background: url("~@/assets/img/map/mask.png");url的路径里默认从./开始匹配相对路径，但只要在@前加~就可以关闭这个规则，实现从@开始匹配路径2. foreach不支持continue、break问题break用return false代替contine用return true代替例如var arr1 = arr2.forEach(item => { if (ite

2021-06-25 16:09:43 89

原创使用NVM管理node版本

1. 介绍：不一定所有项目的node版本都一样，而同一台设备上进行多个node版本之间切换是十分麻烦的，此时可以使用NVM来方便快捷地维护多个版本的node2. 安装：先确保删除本地的node相关文件夹下载NVM并安装：下载地址3. 使用：查看NVM版本：nvm version给settings.txt配置文件添加镜像下载路径，加快后续下载速度node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https:

2021-06-24 17:59:16 104

原创 20210621 - 前端业务项目的日常记录

1. 兄弟组件通信方式 - 触发兄弟组件的事件或参数使用bus进行组件通信：main.js全局引入const bus = new Vue()Vue.prototype.$bus = bus;调用方式：兄弟组件A:this.$bus.$emit('navChange', val); // A申请触发B组件的navChange事件兄弟组件B:this.$bus.$on('navChange', (res) => { ... // B组件收到消息，触发相应事件});2.

2021-06-21 16:52:18 84

原创 20210617 - 前端业务项目的日常记录

1. css：点击focus事件的冒泡伪类选择器:focus-within的作用是当其或者其后代元素获得焦点时会冒泡生效#element:focus-within {...}例子：表单的输入框聚焦时，用于改变父元素的样式，强调其处于激活状态2. css：控制输入内容和不输入内容时的样式:placeholder-showninput { // 输入内容时（不出现占位符时）(比如出现查询按钮） &:placeholder-shown { ... } // 不输入内容时（出现占

2021-06-17 11:11:17 62

原创 20210616 - 前端业务项目的日常记录

1. 克隆git项目后只有master分支问题问题：git clone 项目后，默认clone该项目的master分支，但是最新代码不在该分支上并且git branch后本地也只存在master分支，该怎么办？方法：#第一步：从远程服务器取回所有分支的更新数据(克隆项目后，如果其他用户后来新建了远程分支，这一步才是必要的)git pull #或者git fetch#第二步: 新建一个等会要与远程分支绑定的本地分支，并自动切换到该分支git checkout -b <分支名>#第

2021-06-16 17:02:41 117

原创 vue做word导出

1. 功能需求如果业主要求项目支持下载可编辑的导出格式，则会很少见得做word格式导出功能。2. 工具word导出可以用docxtemplater工具。3. 用法：① 安装依赖：npm install docxtemplater pizzip --save-dev （如果有echart图等图片，还需要安装ImageModule依赖 npm install --save docxtemplater-image-module-free）② 在需要用到的vue文件中导入依赖import 'doc

2021-06-09 11:49:43 1769 4

原创 20210609 - 前端业务项目的日常记录

1. 年月日格式的日期排序 let timeArr = [ '2020-01-01 15:20', '2020-01-03 08:10', '2020-01-02 21:55' ] timeArr.sort(function(a,b) { return Date.parse(a.replace(/-/g,"/"))-Date.parse(b.replace(/-/g,"/")); }); // 日期升序 co

2021-06-09 11:34:10 46

原创 20201216 - 前端业务项目的日常记录

1. Symbol类型不可枚举const info = { [ Symbol('a')]:'b'}console.log(info) // 输出{Symbol('a'):'b'}console.log(Object.keys(info)) // 输出[]Object.keys()方法返回对象上的所有可枚举的键属性而Symbol类型是不可枚举的，因此第二个console会返回空数组[]2. 箭头函数的返回值问题const getUser1 = user => {name: user

2020-12-16 11:01:09 74

原创 20201214 - 前端业务项目的日常记录

1. 嵌套元素的事件冒泡/执行顺序是从最深的元素往外层延伸 <div οnclick='console.log('1')'> <p οnclick='console.log('2')'> Click here! </p> </div>点击后，输出的顺序是2 12. H5手机页面实现调取手机拨号界面并完成号码输入html: <a href="tel:电话号码">电话号码&lt

2020-12-14 10:45:49 74

原创 20201211 - 前端业务项目的日常记录

1. setInterval返回值问题每次执行setInterval都会返回一个特定id，该数字逐次累加，这个id可以用在clearInterval方法中，清除特定的计时器。 const timer = setInterval(() => { // 执行的代码 }) console.log(timer) // setInterval方法返回一个id clearInterval(timer) // 这个id可以用来清除计时器

2020-12-11 09:39:48 60

原创 20201210 - 前端业务项目的日常记录

1. [Markdown]输入[TOC]后可以自动生成文章目录，其中支持点击跳转到相应章节2. 字符处理快捷键：操作快捷键字符快速选择shift + 方向键词选择Crtl + shift + 方向键词定位Ctrl + 方向键简单记忆：加了Ctrl代表’词’；加了Shift代表选择3. 组件强制刷新当组件动态赋值，dom却不能及时更新，无法及时渲染出正确的结果时，可以采用组件强制刷新的

2020-12-10 14:50:28 162

原创 20201208 - 前端业务项目的日常记录

markdown使用笔记代码块里如果写的是cmd命令行，则代码块的类型可以标为shell / bash支持注释：表格行的单元格数量上可以有所不同某一行的单元格个数如果小于标题行的个数，则剩余的补上空单元格；某一行的单元格个数如果大于标题行的个数，则忽略多余的单元格Smile and let everyone know that today you’re a lot stronger than you were yesterday.用微笑告

2020-12-08 10:25:50 75

原创 20201207 - 前端业务项目的日常记录

1. 在什么情况下，用translate()而不用绝对定位需要基于元素自身尺寸进行定位时，使用translate；需要基于某个祖先元素的尺寸进行定位时，使用position:absolute2. vue直接引用animate.css 动画不起作用问题由于vue官网引用的是animate.css 3.5版本，其无法向上兼容最新的animate.css版本，这就导致了直接npm install animate.css后，动画压根无法生效。因此解决方案就是安装对应低版本的animate.css：安

2020-12-07 10:51:22 72

原创 20201204 - 前端业务项目的日常记录

1. 如何判断dpr的倍数① js：window.device.PixelRatio，输出多少就是几倍屏② css： @media(-webkit-device-pixel-ratio: 3) { }2. 什么是dpr设备像素比（dpr） = 设备像素（分辨率）/设备独立像素（屏幕尺寸）布局视窗：屏幕大小视觉视窗：为了解决PC端网站在移动端显示不佳，布局视窗比设备屏幕宽度宽，一般为980 <meta name="viewport" content="w

2020-12-04 09:59:11 72

原创 20201203 - 前端业务项目的日常记录

1. Vue在使用Echart时init初始化失败，获取不到DOM元素页面元素渲染顺序问题，一般是因为v-if控制的视图显示导致的渲染顺序出错。比如切换tab出现一个echart图，然而如果这个切换事件带有动画animation或transition，会导致本该出现的元素要延迟几毫秒才出现，但其实早就已经执行了dom元素的相关事件，会直接报错找不到该dom元素。因此一般需要给echart初始化方法添加this.$nextTick方法，等当前动画等渲染完毕的下一帧才执行。2. 内外环饼图的legend联

2020-12-03 17:25:16 80

原创 20201201 - 前端业务项目的日常记录

1. 饼图：label两端对称布局效果图：代码：series: [{ type: 'pie', label: { normal: { show: true, alignTo: 'edge', // label两端对称布局 // ECharts v4.6.0 版本起，提供了 'labelLine' 与 'edge' 两种新的布局方式 margin: 27, // 布局为两端对称时候需要外边距防止图表变形数

2020-12-01 09:40:37 84

原创 20201130 - 前端业务项目的日常记录

1. 没有加入git项目团队前拉代码，会导致无法推送到主分支。此时若已经加入团队，需要重新拉代码，把本地代码覆盖进去再上传代码2. 实现导出excel功能①第一种是后端给接口导出api.js: export const realDataKeyExport = `${apiUrl}/realData/key/export`注意这里是不是post或get请求，只是把接口地址传递出去vue文件： <template> <el-button @click

2020-11-30 17:54:11 84

原创 20201126 - 前端业务项目的日常记录

1. Vue：使用function函数改变v-if的标志时会导致无法更新视图html: <div v-if="flag">需要更新的视图</div>操作: // 节点的点击事件 graph.on('node:click', function (evt) { this.flag = true console.log(this.flag) // 值的确发生改变，但是无法更新v-if的视图渲染 })如果以后直接粘

2020-11-26 15:39:11 76

原创 20201117 - 前端业务项目的日常记录

1. 内容透明的盒子盒子的根元素设为background: rgba(0,0,0,0),这样一来内容子元素设置为带透明度的背景颜色就可以使整个盒子带透明度2. vue-countupjs基于 CountUp.js 的 Vue 组件, 简易数字动画跳动安装： npm install vue-countupjs --savemain.js： import VueCountUp from 'vue-countupjs' Vue.use(VueCountUp)html：

2020-11-17 14:22:14 77

原创 20201113 - 前端业务项目的日常记录

1. 记住密码功能 data () { return { userName: '', // 账号 password: '', // 密码 checked: false // 是否记住密码 } }, methods: { login () { // 点击登录后事件 if (!this.userNa

2020-11-13 14:17:53 71

原创 20201106 - 前端业务项目的日常记录

1. vue-cli4.5目录结构src： assets:资源文件（字体，图标，图片）' components:存放公共组件 router:路由文件 store:存放vuex状态管理 views:存放页面 filters:存放过滤器文件 directives:存放自定义指令文件夹 mixins:存放混入方法 utils:存放一些封装的公共方法（js文件） http:存放封装的http接口请求 Ap

2020-11-06 14:44:16 56

原创 20201105 - 前端业务项目的日常记录

1. 多层级结构使其背景颜色带透明度① 在最外层的标签添加背景颜色rgba（注意，这种情况不能用opacity，会使内部所有子元素的颜色透明，不可逆）② 内部所有标签都设为背景颜色随父级具体代码示例： .box { background: rgba(10, 55, 99, .65); * { background: transparent !important; } }2. console用法计时功能：console.time(

2020-11-05 09:29:38 81

原创 20201029 - 前端业务项目的日常记录

1. background-image设置尺寸无效问题background-image如果设置!important会导致background-size属性失效，使图片无法变形、改变大小尺寸2. css：以左上角为变换中心 transform-origin: 0 0; // 左上角 transform-origin: 100% 0; // 右上角 transform-origin: 0 100%; // 左下角 transform-origin: 100% 100%; /

2020-10-29 18:05:25 54

原创 20201028 - 前端业务项目的日常记录

1. 对象比较问题 {} === {} // false // 隐式转换 toString() {} >= {} // true2. 取整操作的新方法取整操作也可以用按位操作: var x = 1.23 | 0; // 1因为按位操作只支持32位的整型，所以小数点部分全部都被抛弃3. 修改某个类的div的文本内容 document.getElementsByClassName("el-pagination__jump")[0].child

2020-10-28 09:44:44 65

原创 20201021 - 前端业务项目的日常记录

1. git 常用命令分支：切换分支： git checkout XXX新增分支并切换到该分支 git checkout -b XXX查看所有分支 git branch删除本地分支 git branch -d XXX从远程分支拉取代码 git pull origin XXX2. route用法this.$route.path:获取当前路由的路径this.$route.name:获取当前路由名

2020-10-21 18:06:13 45

原创 20201016 - 前端业务项目的日常记录

1. ElementUI - image-viewer - 图片放大查看组件// import引入import ElImageViewer from 'element-ui/packages/image/src/image-viewer'// 在组件内声明export default { components: { ElImageViewer }}html：<el-image-viewer v-if="showViewer" :on-close="closeVie

2020-10-16 17:23:11 74

原创 20201015 - 前端业务项目的日常记录

1. （vue-cli2）assest和static文件夹的区别（图片放在哪)assets->bundle(编译到一起)static->resources(远程URL请求)如果标签动态绑定了图片路径，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以<p>动态绑定路径</p><img :src="assetsURL" alt="图片加载失败" title="assets中的图片">

2020-10-15 17:28:35 102

原创 20201014 - 前端业务项目的日常记录

1. 纯函数一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有什么副作用，这种函数被叫做纯函数。纯函数不会对外部产生影响，不会产生外部可观察的变化例如：function sum(a,b){ return a+b;}该函数总是返回相同的结果，不会出现改变了函数外部变量的情况2. Array.flat()扁平化方法flat()本质就是归纳、合并的操作，它会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中元素合并为一个新数组 //flat()方法最基本的作用就是

2020-10-14 14:16:43 154

原创 20200918- 前端业务项目的日常记录

1. Vue状态管理大项目中，状态管理用Vuex。而小项目中，如果有一处需要被多个实例（组件）间共享的状态，可以使用store模式。文件夹层级：src/store/myStore.jsmyStore.js var myStore = { debug: true, state: { msg: 'hello' }, setMsgAction (newValue) { if (this.

2020-09-18 15:00:32 65

原创 20200821 - 前端业务项目的日常记录

1. 扩展运算符的应用将数组元素迭代为函数参数使用myFunc (a, b, c) { console.log(a, b, c)}let arr = [0, 1, 2]myFunc(...arr)// 输出1 2 3注意…arr返回的是数组的各个元素而不是数组本身，只有[…arr]才是一个数组，所以对方法传参可以在括号内用…arr扩展运算符替代push()、concat()等方法构造字面量数组let arr1 = [1, 2, 3]let arr2 = [...arr1,4

2020-08-21 17:24:42 79

原创 20200817 - 前端业务项目的日常记录

1. const、let具有块级作用域 if (1+1===2) { const message = 'yes' let message1 = 'right' } console.log(message) console.log(message1)结果返回ReferenceError ReferenceError，因为const、let声明的变量具有块级作用域，这种情况下他们的生命周期只在if的花括号里存在，因此外面找不到这两个变量2.关于数组和字符串转换的便捷方法数组→字

2020-08-17 10:28:10 63

原创 20200804 - 前端业务项目的日常记录

1. sessionStorage的使用localStorage和sessionStorage属性在整个项目都可以被调用，相当于项目的一个全局‘变量’的作用。他们允许在浏览器中以key/value的形式存储数据，这一片内存区域整个项目都可以随意调用。两者的差别在于后者具有临时性，在关闭窗口或标签页后数据失效，而前者除非你手动去赶走（删除）它，他不管过多久都会一直驻扎在你的浏览器中。常用的方法：sessionStorage.setItem(String key, String value) // 存

2020-08-04 16:01:10 78

原创 20200803 - 前端业务项目的日常记录

有空看了各种大佬的前端总结，稍微写一些感想。1. 关注身体健康程序员大部分没有坚持任何运动，很容易颈椎、腰椎出问题，得各种慢性病，出现大肚子。因此不得不警醒自己一下，虽然程序员就是吃青春饭的，但是终究身体是生活的本钱，不关注身体状况的话说不定青春饭都吃不了多久！当然，锻炼时间不能挪到晚上，因为默认每天都是加班状态，因此想要形成稳定的下班锻炼流程肯定不行。而且晚上的话，睡眠当然比运动优先级更高，越早睡越好，锻炼时间反而拖累了睡眠时间。因此花了点时间下定决心每天早上比平常早起一小时，用于晨跑、俯卧撑、仰

2020-08-03 17:13:36 168

空空如也

cmd 运行java程序问题

新手求助 % java BinarySearch tinyW.txt < tinyT.txt