- 博客(48)
- 收藏
- 关注
RSS订阅原创 echarts.js 动态生成多个图表 使用vue封装组件
echarts.js 动态生成多个图表 使用vue封装组件 <div v-for="(item,index) in chartList" :key="index" style="width:33.15%;height:50%;color:white;border: 1px solid white;display:flex;"> <div :id="`chart${index}`" style="width:70%;height:100%;"></div>
2022-04-24 14:16:09
1502
原创 ES6常用语法
1.合并数据const a = [1,2,3];const b = [1,5,6];const c = [...new Set([...a,...b])];//[1,2,3,5,6]const obj1 = { a:1,}const obj2 = { b:1,}const obj = {...obj1,...obj2};//{a:1,b:1}2.字符串拼接const name = '小明';const score = 59;const result = `${name}$
2022-04-18 09:56:54
917
1
原创 vue正则校验
正则校验1.联系电话校验（只能输入数字）onkeyup="this.value=this.value.replace(/[^\d]/g,'');"2.金额校验（只能输入数字和小数点）oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"3.姓名校验（只能输入汉字，字母和部分特殊字符）onkeyup="value=value.replace(/[\d\@#\$%\^&
2022-04-18 09:16:43
968
原创 element-ui表格中复选框只能选中一个
element-ui表格中复选框只能选中一个<el-table ref="multipleTable" :data="updatetableData" @select="select" @select-all="selectAll" > <el-table-column type="selection"></el-table-column>
2022-03-14 11:02:37
1632
原创 vue动态生成多个Echarts图表
vue动态生成多个Echarts图表首先先动态的获取到id<div v-for="(item,index) in chartList" :key="index"> <div :id="`chart${index}`"></div></div>其次获取后端返回的数据this.chartList = res.data.data.chartList;//从后台获取数据if (this.chartList.length > 0) { thi
2022-03-09 11:38:53
5834
1
原创 html5中audio支持音频格式
html5中audio支持音频格式HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式，但有个很重要的音乐文件格式midi却在各大浏览器中都没有内置的支持。并不是说所有的浏览器都支持MP3 OGG之类的，因为版权的问题，每个浏览器支持的格式都是不一样的。Chrome浏览器： 支持 OGG和MP3，不支持WAVFirefox浏览器： 支持 OGG，不支持WAV和MP3IE9浏览器： 支持 OGG，MP3和WAVOpera浏览器： 不支持 OGG和MP3，支持WAV
2022-02-18 09:43:26
4385
原创 echarts实现双纵轴的柱形图-折线图
echarts实现双纵轴的柱形图-折线图<div class="satisfied" id="satisfied" style="width:500px;height:500px;"></div>let satisfied = echarts.init(document.getElementById("satisfied"),'dark');let optionsSatisfied = { title: {left:"40%",top:'5%',text: '呼出情况
2022-02-17 17:15:39
912
原创 echarts实现双纵轴的柱形图-折线图
```html<div class="satisfied" id="satisfied" style="width:500px;height:500px;"></div>``````javascriptlet satisfied = echarts.init(document.getElementById("satisfied"),'dark');let optionsSatisfied = { title: {left:"40%",top:'5%',text: ..
2022-02-17 17:11:40
800
原创 将数字转换为千分位
将数字转换为千分位1.正则表达式的方式let str = '4000'let string = "1234567"str.replace(/(\d{1,3})(?=(\d{3})+$)/g,function($1){ return $1=$1+','})string .replace(/(\d{1,3})(?=(\d{3})+$)/g,function($1){ return $1=$1+','})结果为4,000 1,234,5672.正则表达式的方式let
2022-02-11 10:23:00
242
原创 vue+ echarts实现地图（中国地图）
**vue+ echarts实现地图（中国地图）**<div class="myChartMap" id="myChartMap" ></div><script> import echarts from '../../../static/js/echarts.min.js'; import china from '../../common/js/china.json'; echarts.registerMap('china',china); ex
2022-02-09 14:58:57
1305
原创 div变成全屏
点击事件将div(局部)变成全屏<span><i class="el-icon-full-screen" @click.stop="handleAddRole"></i></span><div ref="box"></div>handleAddRole(){ let element=this.$refs.box if (this.fullscreen) { if (document.exi
2022-01-25 16:17:47
3291
原创 文字渐变色
文字渐变色 <p class="tt">你好呀</p> <style> .tt{ background-image: linear-gradient(red,white);//背景色渐变，默认从上到下 -webkit-background-clip: text;//设定背景的绘制范围为文字 color: transparent;//将字的颜色设置透明，只露出背景色
2022-01-19 18:05:25
109
原创 echarts
echarts折线图1.折线图每个折点数据显示 series: [{label:{show:true,position:'top'},}]2.折线图的标签let options = { legend: { data: ['排队量', '排队放弃量']},}3.坐标轴距离容器的位置通过grid这个来调节containLabel属性是来判断grid 区域是否包含坐标轴的刻度标签let options = { grid:{left:"10%",right:"-5%",top:"15
2022-01-17 15:12:57
1220
原创 axios post请求参入Form Data格式
axios post请求参入Form Data格式query() {//axios post请求参入Form Data格式的参数 data参数书写的变化 contentType请求头设置变化 let option = this.getParams(window.location.search.substr(1)); axios({ url:url, metho
2022-01-11 17:47:57
2182
原创 elementUI中日期时间选择器el-date-picker如何限制最多选择30天，其余时间置灰不可选
日期时间选择器如何限制最多选择30天，其余时间置灰 <el-form ref="form" :model="form" label-position="right" label-width="180px" size="small" > <el-row> <el-col :span="8"> <el-form-item prop="taskDate" label="时间">
2021-12-14 11:36:10
3154
1
原创 VUE+elementUI选择日期范围并限制选择的日期范围
VUE+elementUI选择日期范围并限制选择的日期范围 <el-form ref="form" :model="form" label-position="right" label-width="180px" size="small"> <el-row> <el-col> <el-form-item prop="taskDate" label="任务起止时间"> <
2021-11-19 15:49:03
917
原创 如何将[{a:[1,2],b:{3,4}}]转为[1,2,3.4]
如何将{a:[1,2],b:{3,4}}转为[1,2,3.4]let arr = [{a:[1,2],b:{3,4}}]let newArr = []for(var i = 0;i <arr.length;i ++){ for(var key in arr[i]){ for(var j = 0;j <arr[i][key];j++){ newArr.push(arr[i][j]) } }}newArr = [1,2,3,4]
2021-09-17 11:11:52
146
原创 2021-07-06
点击修改按钮弹框时，如果你修改的内容在没有点提交之前就会跟随着变化，我们应该使用深拷贝而不是浅拷贝。 bbb = JSON.parse(JSON.stringify(aaa));删除对象中指定的元素formData:{ files:''} this.$delete(formData, 'files')手动的写一个红色的*<el-form-item label="处理结果描述" prop="handleResultDesc"
2021-07-06 14:36:07
83
原创 点击提交上传文件
点击提交上传文件<el-upload class="upload-demo" multiple ref="upload" action="" :on-preview="handlePreview" :on-change="changeFiles" :on-remove="handleRemove" :file-
2021-07-06 10:36:42
536
原创 下拉框可以多选
下拉框可以多选<el-col :span="7"> <el-form-item label="承保机构" prop="underwritingAgency"> <el-select v-model="carReport.underwritingAgency" placeholder="请选择承保机构" style="width: 100%;"
2021-03-29 15:56:02
374
原创 vue中的校验
当代位案件（reportTable.dairaCase）为1的时候，三者车辆列表（partyVehicleInformation）为必填项 let validates = []; if (this.reportTable.dairaCase == "1") { validates = this.informationList.map((item, idx) => { return this.$refs["partyVehicleInfor
2021-03-29 15:28:12
137
原创 正则表达式
只能输入数字的正则表达式第一种<el-col :span="8"> <el-form-item label="联系电话" prop="contactNumber"> <el-input v-model.trim="reportTable.contactNumber" size="small" @input="reportMsgU
2021-03-29 14:46:23
251
1
原创 项目中遇到的问题
大家保险投诉模块客户诉求增加删除<el-row :gutter="20"> <el-col :span="21" style="padding-right:100px;"> <el-form-item label="客户诉求" prop="complainappeal"> <div style=" width: 80%;
2021-03-29 09:44:32
104
原创 element-ui 中遇到的问题
@element-ui 中遇到的问题el-table表头水平居中<el-table:data=“tableData”style=“width: 100%”:header-cell-style="{textAlign: ‘center’}"表格内容水平居中<el-table:data=“tableData”style=“width: 100%”:cell-style="{ textAlign: ‘center’ }"/...
2021-02-07 14:50:14
262
1
原创 element UI表格中设置文字提示（tooltip）或弹出框（popover）
@element UI表格中设置文字提示（tooltip）或弹出框（popover）1、文字提示<el-table-column prop="name" label="姓名" width="180"> <template slot-scope="scope"> <el-tooltip placement="top"> <div slot="content">多行信息<br />第二行信息</
2021-01-07 15:34:27
5201
原创 git使用
1、创建一个新的仓库进入到你本地项目的根目录下，执行 git init 命令这里写图片描述2、执行 git add . 命令，将项目的所有文件添加到仓库中这里写图片描述3、执行git commit -m “注释语句” 命令，将索引内容添加到仓库中这里写图片描述4、在 Github 新建一个 Repository这里写图片描述5、点击Create repository，跳转到如下页面，获取所创建的仓库的HTTPS地址这里写图片描述6、将本地的仓库关联到Github上git remote
2020-12-24 11:46:12
49
原创 js面试题
@js面试题javascript 的 typeof 返回哪些数据类型object ，number， function， boolean， underfind ，string。例举 3 种强制类型转换和 2 种隐式类型转换?强制类型转换：parseInt，parseFloat,Number()隐式类型转换: ==eg:1==”1”//truenull==undefined//truesplit()和join()的区别split（）是切割成数组的形式join（）是数组转为字符串。数组
2020-12-01 11:11:28
261
原创 1.什么是跨域及其解决方案
什么是跨域？协议不同，域名不同，端口号不同。跨域的缘由主要是因为浏览器指定的同源策略，“协议+域名+端口”都相同，他是浏览器最基本最核心的安全机制，关闭它会容易受到XSS和CSRF的攻击。跨域的后果1.cookie，LocalStorage,indexDB无法获取。2.DOM和js对象无法获得3.Aiax请求不能发送跨跨域解决方案Jsonp请求通过动态创建script标签，设置src属性为对方的接口地址，以get的方式传递请求，并将响应的结果通过回调函数返回。（其中的回调函数必须是全局函
2020-11-24 22:03:47
136
原创 什么是会话跟踪技术？会话跟踪技术常用的方法有哪些？
@什么是会话跟踪技术？会话跟踪技术常用的方法有哪些？什么是会话跟踪技术？客户向某一个服务器发出第一个请求时，会话就开始了，直到客户关闭了浏览器，会话结束。在这个会话的多个请求中共享数据，这就是会话跟踪技术。会话跟踪技术常用的方法有哪些？会话跟踪技术常用的有四种方法，分别为：URL重写，隐藏表单域，cookie,session1>.URL重写技术：就是在URL结尾添加一个附加数据来标识该会话，把会话id通过URL的信息传递过去，以便在服务端进行识别不同的用户。2>.隐藏表单域：2&
2020-11-24 20:42:58
3266
原创 按位或，短路或，按位与，短路与的区别
按位或，短路或，按位与，短路与的区别按位与（&），短路与（&&）& 既是位运算符又是逻辑运算符，&的两侧可以是int，也可以是boolean表达式，当&两侧是int时，要先把运算符两侧的数转化为二进制数再进行运算，而短路与（&&）的两侧要求必须是布尔表达式。按位或（|），短路或（||）（|）和（||）成立的条件是只要一侧表达式为真，结果就为真，在（|）运算时，无论左侧的表达式的值为真还是为假，都要判断右侧的表达式的值的真假，而（||）在
2020-11-23 21:59:42
605
转载 Vue-Router路由钩子函数(导航守卫)
@Vue-Router路由钩子函数(导航守卫)Vue-Router路由钩子函数(导航守卫)路由钩子函数有三种：1：全局钩子： beforeEach、 afterEach2：单个路由里面的钩子： beforeEnter、 beforeLeave3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave全局守卫router.beforeEach() 进入之前触发router.afterEach() 进入之后触发每个守卫方法接收三个
2020-11-23 21:53:42
5362
原创 CommonJS模块和AMD规范
CommonJS模块的特点如下CommonJS规范CommonJS规范规定每个模块内部，module变量都只代表当前的模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，也就是加载该模块的module.exports属性。require方法用于加载模块。CommonJS模块的特点所有的代码都只在模块作用域中运行，不会污染全局作用域。模块可以多次加载，但是只会在第一次加载时运行一次，运行结果就会被缓存了，以后再加载，就直接读取缓存结果。要想
2020-11-20 21:35:26
111
原创 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
2钟方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面路由全局守卫在做项目时，遇到需要做路由跳转，但是用户输错了URL地址，或者其他非法URL路由地址，我们可能会跳转到404页面，不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。我们首先想到的一定会是路由重定向，redirect来解决。但是它并不能很好的解决。router.beforeEach((to, from, next) => { if (to.matched.length ===0) { //
2020-11-20 21:10:00
3046
原创 vue面试题
@vue面试题1.请谈谈你对MVVM的理解MVVM的全称是Model-View-ViewModelVue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将会保持一致，每当其中的一个变化，另一个一定跟着变化。ViewModel是Vue的核心，它是Vue的一个实例。Model代表的是数据模型，也可以在Model中定义数据修改和操作的也不逻辑。View代表的是UI组件，它将通过UI使得数据模型展现出来。ViewModel监听数据的改变和控制视图行为，处理用户交互，简单的来
2020-11-14 14:21:48
185
原创 快速排序算法
@快速排序算法快速排序算法1.在数组中选一个基准数（通常为数组第一个）；2.将数组中小于基准数的数据移到基准数左边，大于基准数的移到右边；3.对于基准数左、右两边的数组，不断重复以上两个过程，直到每个子集只有一个元素，即为全部有序。例如有一需要排序的数组为：23,45,17,11,13,89,72,26,3,17,11,13（从小到大排序）：选取数组第一个数23为基准数，存入temp变量中，从数组的左右两边界向中间进行遍历，定义两个指针 i 和 j，i 最开始指向数组的第一个元素，j 最开始指向
2020-11-13 10:18:38
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人