A20190518的博客

原创 clip-path画图形

通过加背景色，先画外圈，再画内圈，实现只留有边框长度的样式。clip-path可截取不规则图形。

原创 python实现签到抽奖收集bug

【代码】python实现掘金签到抽奖收集bug。

原创 python实现浏览器调取

【代码】python实现浏览器调取。

原创 vscode下载过慢

将下载地址中的 az764295.vo.msecnd.net 更换为 vscode.cdn.azure.cn 使用国内的镜像服务器加速。根据自己电脑版本选择下载链接。

原创 年份范围选择器

年份范围选择器，由于element官方的DatePicker日期选择器的type没有yearrange。

原创 echarts多X轴分组

【代码】echarts多X轴分组。

原创 JDK安装教程

java官网http://www.oracle.com/傻瓜式安装此电脑 -> 属性 -> 高级系统设置 -> 高级 -> 环境变量上方的用户变量新增JAVA_HOME 值为JDK的安装路径 C:\Program Files\Java\jdk-18在命令行输入java -version 如果有出现java的版本号 说明安装成功...

原创 watch监听数组对象中元素的变化

背景  监听一个数组，数组中的每个元素都是对象，如果某个对象中的属性值变化时，watch中的val 和 oldval是一样的值  结构如：let arr = [ { a: 1, b: 2, c: 3}, { a: 1, b: 2, c: 3}]解决方法computed: { newArr : function() { return JSON.parse(JSON.stringify(this.arr)) }}在计算属性中写一个新的数组，值为JSON.parse(JSON.st

原创 iview表格设置初始化sortType

1、动态设置columns，给需要排序的列设置 sortable: true2、把动态columns数据赋给表格绑定的columns数据3、设置this.columns （表格绑定的数据）.forEach(item => {if(item.sortable){item.sortType = ‘asc’}})注：如果直接在第一步同时sortable: true, sortType: ‘asc’ 再第二步赋给表格绑定的columns数据，这样可能不生效...

原创 echarts折线圆点是否显示

echarts圆点不显示symbol: “none”代码option = { tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 22

原创 echarts图例在右侧时，图例点在文字右边

现状：想要达到的效果：主要使用的参数：legend.align = ’left‘代码：可直接放到echarts示例中使用option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'verti

原创 css扩大可点击区域

扩大可点击区域  通过css加伪类，大小为理想大小，position: absolute调整到理想位置。.m-colorPicker .colorBtn:before{ content: ''; display: inline-block; width: 28px; height: 28px; position: absolute; left: -6px; top: -12px;}...

原创 iview多级表单验证

iview多级表单验证  二级<FormItem :prop="`thresholds.${idx}.name`" :rules="{required: true, message: '必填，不能为空', trigger: 'blur'}"> <Input v-model="formItem.thresholds[idx].name" style="width: 250px;"> </Input>

原创 echarts引入图片相关问题

legend图标自定义图片  默认右边是各个颜色的，可自定义更改为图片。  两种方式实现：（1）这种路径是public下去找（2）当前相对路径legend中加背景图  在背景图中引用，不写image://，直接引用。...

原创 echarts中legend换行或省略号显示

示例  以下代码可直接粘贴到echarts实例中每行限制字符数option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, toolbox: { feature:

原创 echarts点击legend时阻止事件冒泡

echarts点击legend的事件this.dom.on('legendselectchanged', function(params) { event.stopPropagation(); event.cancelBubble = true; })页面效果图  点击下图legend，不会触发父级点击事件  点击下图echarts其他区域，会触发父级的点击事件代码...

原创 chrome浏览器禁用js中的debugger

  在js文件中加入debugger; 相当于是打断点，在浏览器中执行到debugger; 则会中断运行。  如果不想让程序中断，则在chrome浏览器中，可以按下Deactivate breakpoints按钮，关闭debugger调试。

原创 动态渲染组件的几种情况

多个组件，只展示一个  在父组件中引入多个子组件，不同情况下，只展示其中一个。  <component is="projectDescription"></component>  通过component的is属性，可以绑定自定义的子组件名字，:is可以绑定一个变量，变量切换为想要显示的子组件名，页面则会切换显示对应子组件。  如 this.comChange = "circleOverview"，则可更改子组件为能耗同环比概览。<template> <

原创 对象属性值赋给变量

对象属性值赋给变量  如果一个对象中有多个值，想把对象的属性值提取为变量。let itemobj = { "datasize": "1,1", "datapos": "1,3", "uid": "13519494246273345", "pageid": "EnergyPortal", "componentid": "ZJ011", "url": "keyAreaAnalysis.html", "name": "重点区域用能", "conf

原创 element中表单错误提示信息被遮盖

提示信息被遮盖解决方法  可以给form-item加一个特定的class，不影响其他的提示框，然后设定width，可以把所有内容显示。代码vue的template代码<el-form-item label="用户微信" prop="userWeChat" class="weixinError"> <el-input v-model="userInfo.userWeChat" maxlength="20"></el

原创 chrome浏览器新版本 同站点cookie无法共享

原创 vue调试插件vue-devtools及使用

下载插件  去到vue官网，找到devtools工具的入口。  切换到master分支，（默认dev，后面npm run build打包会报错）；然后下载文件。  解压刚刚下载的压缩包，执行npm install命令，安装依赖；然后再npm run build对文件进行打包。  最后会生成如下路径目录的文件，build文件夹是会在执行npm run build命令之后才会出现的。安装插件  打开chrome浏览器，右上角三个点的按钮，打开“更多工具”=》“扩展程序”；或者直接在chrome

原创 chrome调试技巧

copy  在chrome浏览器控制台，使用copy()函数可以把属性复制到剪贴板中。截图  1、使用控制台的Elements，找到需要的DOM节点，鼠标选中需要截图的DOM节点。  2、按下ctrl+shift+P调出控制面板，输入screen  3、其中 Capture node screenshot是截选中节点的图，Capture full size screenshot是截全图。...

原创 vscode快捷键

vscode快捷键ctrl+shift+p 或者 f1会在上方中间位置显示控制面板ctrl+创建多个编辑器ctrl+1 、 2光标聚焦到第1、2个编辑器ctrl+w快速关闭ctrl+B显示/隐藏侧边栏ctrl+J显示/隐藏控制台ctrl+G跳转到指定代码行ctrl+shift+跳转到匹配的括号...

原创 ztree的使用

安装jquery  使用ztree之前，首先需要安装jquery  vue项目中，npm install jquery --save-dev安装jquery依赖  在build文件夹中的webpack.base.conf.js文件中，引入webpackvar webpack = require("webpack");plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery",

原创 fabric的使用

fabric官网链接fabric官网：http://fabricjs.comfabric教程：http://fabricjs.com/fabric-intro-part-1使用fabric画图代码首先，vue项目安装fabric依赖npm install fabric然后，在main.js文件中，引入import fabric from "fabric";Vue.use(fabric);最后，在vue文件中使用<template> <div class="c

原创 echarts多个饼图时，外圈悬浮tooltip显示百分比，内圈悬浮tooltip不显示

实现效果官网链接https://echarts.apache.org/examples/zh/editor.html?c=pie-nest代码tooltip中的formatter定义成函数，params中有很多属性，根据params.seriesIndex判断是外圈或内圈，return ''时，悬浮不显示内容。tooltip: { trigger: 'item', formatter: function(params){ let tip

原创 echarts折线图有多个y轴，折线根据对应轴单位绘制

在series中添加属性yAxisIndex: 0,1,2,3…官方解释https://echarts.apache.org/zh/option.html#series-line.yAxisIndex实现效果

原创 树形结构

树形结构，遍历每个结点，都赋值labeltreeDataFormat(data) { data.forEach(val => { val.label = val.name; if (val.children && val.children.length > 0) { this.treeDataFormat(val.children); } }); return data;

原创 有关a链接安全问题

链接到用户自定义网站当网站中的链接地址可以由用户自己定义时，需注意安全性问题。一、当a链接 target="_blank" 时，需加上rel="noopener noreferrer"属性。二、当用js链接到新地址时，设置opener属性为nullvar otherWindow = window.open(‘http://www.baidu.com’);otherWindow.opener = null;因为新开链接网址，可通过window.opener属性获取到源跳转网站的一些信息。如果跳转

原创 vscode编辑区看不清光标

vscode编辑区鼠标移动时，光标看不清楚打开 “控制面板”-“鼠标”-“指针”-“自定义”-“文本选择”在浏览中选择“beam_r.cur”，打开后确认应用此光标带有白色框，在黑色vscode编辑区可以看的清楚...

原创 chrome浏览器解决跨域问题

一、首先在你的C盘建立一个空的文件夹 chromedata二、在chrome浏览器 “属性”-“目标” 后面加上 --disable-web-security --user-data-dir=C:\chromedata（注意：需要在中间加一个空格分隔）...

原创 js实现文本查找、替换

js实现文本查找、替换主要核心：使用字符串的replace方法，替换。效果:代码：使用vue+element示例HTML：<template> <div> <el-divider></el-divider> <el-row> <el-input v-model="ipt...

原创 微信小程序todolist

wxml文件页面结构，输入框绑定bindinput事件（发生改变触发的事件），绑定事件中e.detail.value获取每次改变的输入框值。删除按钮，data-变量名= ，删除按钮点击事件通过e.target.dataset 获取绑定变量值。<text>{{tit}}</text><input type="text" placeholder="请输入" val...

原创 深拷贝浅拷贝

深拷贝浅拷贝区别深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用。  浅复制 — 只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“（浅复制）浅拷贝”，换句话说，浅复制仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。  深...

原创 react路由2版本

路由介绍路由是根据不同的url地址展示不同的内容或页面。版本说明react-router@2.8.1 版本配置react/react-dom 15.6.1版本使用创建项目创建一个react项目create-react-app reactrouter进入该项目cd reactrouter卸载默认版本，删除package-lock.json文件npm uninstall re...

原创 nginx配置默认页面

安装nginx首先先安装PCRE pcre-devel 和Zlib，因为配置nginx的时候会需要这两个东西安装PCRE库yum install -y pcre pcre-devel安装Zlib库yum install -y zlib zlib-devel如果报错，可能还需要yum install gcc-c++yum install -y openssl openssl-d...

原创 无状态组件实现todolist

import React,{useState} from 'react';const NoState =()=>{ let [list,setList]=useState([]); let textInput = null; // 通过ref处理之后 textInput获取的是输入框的dom元素 // 如果获取dom元素的值 textInput.value ...

原创 vue-router路由

vue-router路由后端的路由一般是用于写接口，不同的URL路径对应不同的数据。前端的路由，不同的路由展示不同的视图内容。vue不同的视图内容可由组件构成。一个URL路径对应一个组件视图页面。对于大多数单页面应用，都推荐使用官方支持的vue-router库。需引入vue-router.min.js导航路由1、路由导航标签默认解析为a标签（通过a标签的锚点跳转），如果想要更改元素...

原创 fetch和axios

fetchfetch 浏览器提供的拥有底层交互能力的方法。获取数据fetch，需要引入fetch.js官方解释：fetch是window.fetch的JavaScript polyfill。全局fetch函数是web请求和处理响应的简单方式，不使用XMLHttpRequest。这个polyfill编写的接近标准的Fetch规范。get方式（默认）fetch('***?id=*') ....