- 博客(79)
- 收藏
- 关注
RSS订阅原创 合并数组中相同key值，对应的value值相加
var arry= [ {key:'a',value:2}, {key:'a',value:2}, {key:'a',value:2}, {key:'b',value:8}]function mergeObject(arr) { const result = arr.reduce((obj, item) => { if (!obj[item.key]) { obj[item.key] = 0 } obj[
2021-04-01 17:55:41
1036
原创 vue工程中监听某个div类Dom变化
场景项目中使用到chart组件，当改变外层容器的宽高时，需要重新绘制resize图表。方案1、使用JS原生resize方法，但是只有针对windows窗口对象改变时生效；2、使用echarts的resize方法3、推荐：使用element-resize-detector安装第一步：vue-cli 项目中安装npm install element-resize-detector第二步：按需引入const eleResizeDetector = require("element-resi
2021-01-22 11:45:43
1497
原创 echarts字体动态适配不同分辨率
fontSize(res){ let docEl = document.documentElement, clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; if (!clientWidth) return; let fontSize = 100 * (clientWidth / 1920); return res*fon
2020-10-16 17:20:36
1152
原创 vue项目-添加登录组件背景样式
1、设置粒子背景官网地址：https://vue-particles.netlify.app/安装粒子组件npm install vue-particles --save-dev2、在src/main.js中全局引入粒子组件import VueParticles from 'vue-particles'...Vue.use(VueParticles)3、在login.vue中添加粒子效果代码<vue-particles color="#fff" :par.
2020-09-21 16:37:21
1487
原创 vue项目-添加登录组件
1、App.vue文件<template> <div id="app"> <router-view/> </div></template><script>export default { name: 'App'}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -w
2020-09-21 16:07:13
543
原创 从零搭建Vue项目环境
一、安装Node环境1、下载地址https://nodejs.org/en/2、检查是否安装成功Win+R》cmd》控制台输入node -v,若显示版本号v****即为安装成功。二、安装淘宝镜像（非必需，提高效率需要）1、镜像地址http://npm.taobao.org/2、安装淘宝镜像npm install -g cnpm –registry=https://registry.npm.taobao.org3、检查cnpm是否安装成功cnpm -v三、搭建VUE项目环
2020-09-21 15:48:24
167
原创 使用element-ui控制台报错el-progress：Invalid prop: custom validator check failed for prop “percentage“
消除掉控制台报错的方法：添加v-if判断<el-progress type="line" :percentage="scope.row.duration" class="device-progress" :show-text=false v-if="!isNaN(parseInt(scope.row.duration))"></el-progress>
2020-07-06 09:58:30
1857
原创 element Carousel 走马灯使用
隐藏指示器<el-carousel trigger="click" indicator-position="none" height="150px">...</el-carousel>取消自动切换<el-carousel trigger="click" height="150px" :autoplay=false>...</el-carousel>
2020-05-26 19:57:24
3538
原创 echarts axisLabel文字过长换行
echarts图表x轴、y轴经常会遇到文字过长，超出容器边框或者挤压空间，展示不友好的情况。针对这种情况，其中一种解决办法就是设置每几个字换行。yAxis: [{ axisTick: 'none', axisLine: 'none', offset: '27', axisLabel: { textStyle: { color: '#ffffff', fontSize: '14', }, formatter: function (para
2020-05-22 16:03:41
1654
原创 React学习1-11组件的生命周期函数
生命周期函数分类：父组件：componentWillMountshouldComponentUpdatecomponentWillUpdatecomponentDidUpdaterendercomponentDidMount子组件：componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdaterendercomponentDidMountimport React,{Co
2020-05-15 18:01:26
152
原创 React学习1-10复合组件
单向数据流，数据只能从父级组件传给子级组件class Panel extends Component{ constructor(){ super(); this.state = {color:'black'} } render(){ return ( <div className="panel panel-default"> <button onClick={()=>{this.setState({color:'.
2020-05-15 14:09:27
209
原创 React学习1-9非受控组件DOM操作-简单计算器示例
import React,{Component} from 'react'import {render} from 'react-dom'class Sum extends Component{ handleChange = ()=>{ this.result.value = parseInt(this.a.value||0) + parseInt(this.b.value||0)//写法一 this.refs.result.value = parseInt(this.re
2020-05-14 17:42:21
154
原创 React学习1-8受控组件DOM操作-简单计算器示例
import React,{Component} from 'react'import {render} from 'react-dom'class Sum extends Component{ constructor(){ super(); this.state = {a:0,b:0,result:0} } handleChangeA = (event)=>{ this.setState({a:parseInt(event.target.value),re
2020-05-14 17:33:47
190
原创 React学习1-7受控组件DOM操作-input双向数据绑定示例
受控组件：受状态控制非受控组件：不受状态控制import React,{Component} from 'react'import ReactDOM from 'react-dom'class Input extends Component{ constructor(){ super(); this.state = {val:''} } handleChange = (event) => { let value = event.target.valu.
2020-05-14 16:48:07
150
原创 React学习1-6组件属性
import React,{Component} from 'react'import ReactDOM,{render} from 'react-dom'import PropTypes from 'prop-types'class Person extends Component{ //定义默认属性对象 static defaultProps = { name:'未知' } //定义组件时希望传入组件的属性有类型和是否必填的限制 static propTypes = { nam
2020-05-14 15:29:39
133
原创 win10系统切换eclipse编辑器中svn登录用户
1、查看你的Eclipse中使用的SVN Interface(svn接口)类型点击windows > preference > Team > SVN如果是用的JavaHL，找到并删除C:\Users\自己的用户名\AppData\Roaming\Subversion\auth目录下的所有文件夹2、等再次打开eclipse，使用svn进行代码同步时，会重新与svn进行通信，跳出svn登录弹窗，输入用户名密码即完成账号切换。...
2020-05-14 10:50:57
467
原创 React学习1-5 组件(下)
二、类函数方式声明的组件是静态的，不是动态加载的通过类来声明组件 类需要继承自Component示例动态时钟：import React,Component from 'react'import {render} from 'react-dom'class Clock extends Component{ constructor(){ super(); //自定义组件状态对象 this.state = {time:new Date().toLocaleString()} }
2020-05-13 17:20:47
120
原创 React学习1-4 组件(上)
组件定义的两种方式一、函数1、参数是属性对象2、组件的首字母一定是大写字母3、组件定义完后可以像React元素一样使用组件的渲染过程：1、封装props对象2、调用组件函数，得到返回的React元素3、ReactDOM把React元素转成真实的DOM元素并插入到目标容器内部 #rootimport React from 'react'import ReactDOM from 'react-dom'//接收参数方式一let Message = (props)=> { //.
2020-05-13 16:21:43
133
原创 React学习1-3 JSX语法
1、render渲染中放表达式{}里放的是JS表达式，表达式是由变量的运算符组合而成import React from 'react'import ReactDOM from 'react-dom'//{}里放的是JS表达式，表达式是由变量的运算符组合而成let names = [1,2,3];ReactDOM.render( <div> { names.map(item => { return <span>{item}
2020-05-13 14:30:08
139
原创 React学习1-2 render渲染原理
JSX语法糖转换成Javascript对象结构import React from 'react'import ReactDOM from 'react-dom'let ele = <div><span> hello word </span></div> ;console.log(ele);//等价于//标签类型 属性对象 子元素let ele1 = React.createElement('div', null, [React.createEl
2020-05-13 11:13:25
562
原创 React学习1-1运行尝鲜
1、在my-app>src中打开index.js即为启动文件import React from 'react'import ReactDOM from 'react-dom'ReactDOM.render( <h1>hello world</h1>, //jsx语法：javaScript+hmtl(xml的一种)的混合写法 document.querySelector('#root'))//另外一种写法，暂时认知取别为获取dom有没有#的区别，其他未知Rea
2020-05-12 20:36:42
100
原创 React创建新项目
1、本地新建项目文件夹目录2、cd到此目录下3、npm install -g cnpm --registry=https://registry.npm.taobao.org4、cnpm install -g create-react-app5、create-react-app my-app6、cd my-app7、npm start
2020-05-12 20:24:39
119
原创 vue实现点击前后箭头，实现显示的DOM节点以走马灯前后切换
通过点击前后翻页箭头，实现节点前后切换显示。<el-row class="icons-title" v-for="items in ywtitles" style="width: 100%;overflow: hidden;"> <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="height: 100%;" cla...
2020-04-26 14:52:44
907
2
原创 Vue实现通过数据找到对应的DOM节点
利用Vue实现搜索功能已知搜索框获取到的输入值，匹配页面中的节点，找到当前搜索值对应的DOM节点，并且给当前DOM节点添加class或者样式进行高亮显示。el-input部分代码：<el-input placeholder="输入关键字" v-model="searchVal" @keyup.enter.native="onEnterSearch($event,searchVal)"...
2020-04-26 14:38:08
2117
原创 echarts图表自定义tooltip提示框样式
回调函数以字符串拼接tooltip提示框样式echarts option中对tooltip属性设置：tooltip: { trigger: 'axis', //tooltip触发条件 坐标轴 axisPointer: { lineStyle: { color: '#57617B' //显示竖线颜色 } }, backgroundC...
2020-04-14 13:50:48
8005
1
原创 vue绘制echarts代码示例
vue绘制echarts代码示例<div id="root"> <div id="chart"></div></div><script> var domEle; new Vue({ el:'#root', methods:{ init(){ if(domEle != null && do...
2020-04-11 16:12:29
139
原创 解决echarts报There is a chart instance already initialized on the dom.错误
使用echarts绘制图表时，使用setInterval定时请求数据，重绘echarts，遇到控制台报错提示：There is a chart instance already initialized on the dom解决方法：1、方法外部全局声明echarts dom对象var domEle;2、方法内判断dom对象是否存在if(domEle != null &&...
2020-04-11 16:12:21
9868
3
原创 数字以千分位显示
function(val){ return val.toString().replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')}
2020-04-10 10:45:37
462
原创 ElementUI 自定义表头和对应列
ElementUI自定义表头和对应列<el-table-column prop="time" min-width="30%" align="center"> <template slot="header" slot-scope="scope"> <div class="table-header"> <img src="<%=pat...
2020-04-09 11:37:34
720
原创 element table表格去掉白边的方式
el-table使用:gutter属性时，在表格中会出现border错位，出现白边的现象，解决方式如下：body .el-table th.gutter{ /*解决el-table加了gutter后 边框出现白边*/ display: table-cell!important; }...
2020-03-30 14:36:34
6440
原创 vue和jquery实现动态轮播table
<div class="grid-content table-content"> <div id="divTableHeader"> <table class="table"> <thead> <tr> <th width="20%">内...
2020-03-30 14:30:36
828
原创 vue实现动态显示当前日期时间
html代码：<p class="date">当前时间：{{date|formatDate(this)}}</p>vue数据：data:{ date: new Date(),//当前日期}vue方法：setZero(a) {//设置小于10的数字在加0 return a < 10 ? "0" + a : a;},格式化显示日期：format...
2020-03-30 14:20:43
6695
原创 vue鼠标移入移出动态设置图片src路径实现两种图片效果切换
使用vue实现，当鼠标移入和移出时，两种图片切换显示。项目情况：菜单上的图片的src的相对路径从后台icon字段中动态去找到并加载。html代码：<el-menu> <el-menu-item v-for="child1 in resultData" v-if="!child1.child|| child1.child.length ==0" ...
2020-03-21 17:27:34
5495
原创 dataTable自定义滚动条颜色
通过class等找到table，如下设置即可：1、滚动条内的小块样式.dataTables_wrapper.no-footer .dataTables_scrollBody::-webkit-scrollbar-thumb{ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); backg...
2020-03-21 17:15:57
617
原创 element根据后台返回的数据动态加载表单及对应的验证规则
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
2020-03-10 19:24:00
1838
原创 GoJS节点连线箭头放大
scale: 3，即可设置箭头放大倍数myDiagram.linkTemplate = // $(go.Link, go.Link.Orthogonal, { // corner: 5, // selectable: false // }, ...
2020-03-03 16:44:37
988
1
原创 GoJS自定义绘制上/下圆角矩形
上圆角矩形：go.Shape.defineFigureGenerator("RoundedTopRectangle", function(shape, w, h) { // this figure takes one parameter, the size of the corner var p1 = 5; // default c...
2020-03-03 14:09:56
1219
1
原创 GoJS自定义圆角矩形的圆角角度
自定义圆角矩形的圆角角度，默认角度p1=5。go.Shape.defineFigureGenerator("RoundedRectangle", function(shape, w, h) { // this figure takes one parameter, the size of the corner var p1 = 10...
2020-03-03 14:07:04
1408
原创 v-model修饰符
与事件修饰符类似，v-model也有修饰符，用于控制数据同步的时机。.layv-model默认在input事件中同步输入框的数据，加上.lazy会变为在change事件中同步，即在失焦或按回车键时才会更新。按回车或点击输入框外时，变为：.number使用.number修饰符可以将输入的数据类型转换为Number类型。比如，虽然输入的是数字，但其实数据类型是String，这在数字输入...
2020-02-14 10:27:27
192
原创 vue computed属性实现添加千位分隔符
有时，需要对数值添加千分位来进行格式化，可以用computed属性来实现，具体如下：html部分代码：<div>总价：￥{{ totalPrice }}</div>vue部分代码：computed:{ totalPrice:function(){ var total = 0; for(var i=0;i<this.list.length;i++){...
2020-02-12 11:24:10
2001
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人