前端
空山新雨君
这个作者很懒,什么都没留下…
展开
-
浏览器采坑
(1)scroll没有事件冒泡!Vue.prototype.$isServer && on(document, 'mouseup', e => { console.log('1')});!Vue.prototype.$isServer && on(document, 'scroll', e => { console.log('2')});点击事件,在document上监听,但可以获取任意元素滚动事件,在document上监听,只能从原创 2021-09-09 10:20:13 · 186 阅读 · 0 评论 -
scss相关
(1)非选择器、和选择器.el-input__icon:not(.el-icon-view) &:not(.edc-icon-eye){cursor:not-allowed;}原创 2021-09-08 16:01:41 · 179 阅读 · 0 评论 -
echarts legend图例分页
效果:方法:echarts的legend里设置type:'scroll',且一定要有data字段,且data与series里的data一一对应代码:this.myChart.setOption({ color: ['#404C7E', '#4C4FC9', '#8D58E1', '#F05B72', '#FBCE38', '#1A8CFF', '#00B377'], legend: { type: 'scro.原创 2021-06-18 11:55:58 · 3140 阅读 · 0 评论 -
vue 全屏/退出全屏,esc监控退出全屏
template:<el-button class="fullbutton" type="primary" plain @click="fullScreen">{{fullScreenFlag?'退出全屏':'全屏'}}</el-button>js:data () { return { fullScreenFlag: false, // 全屏/退出全屏 } },mounted () { document.addEventL原创 2021-02-24 12:39:48 · 2236 阅读 · 1 评论 -
获取html元素中text的长度
const node = event.targetconst range = document.createRange()range.setStart(node, 0)range.setEnd(node, 1)const rangeWidth = range.getBoundingClientRect().width可参考elementui源码中tooltip相关源码(table/src/table-body.js)原创 2020-06-24 16:01:28 · 1150 阅读 · 0 评论 -
查找对象数组中的元素
结合ES6,JS里面的find()参考:https://blog.csdn.net/qq_41485414/article/details/81452118原创 2020-05-27 11:52:40 · 529 阅读 · 0 评论 -
vue错误记录
(1)Cannot read property 'activeIndex' of undefinedError in mounted hook: "TypeError: Cannot read property 'addItem' of undefined"诸如此类。。原因:可能是项目引入的elementui与vue版本不对应,index.html文件中引用的vue.min.js脚本文...原创 2019-11-22 12:01:05 · 507 阅读 · 0 评论 -
eslint报错解决及关闭
1. eslint报错,通过配置文件.eslintrc.js设置不提醒https://juejin.im/post/5aa7ba24f265da23771915cf2. eslint错误列举https://www.jianshu.com/p/68d411168a31https://www.jianshu.com/p/2b6b5d0e8ba23. 关闭eslintvue-cl...原创 2019-11-20 11:18:27 · 1127 阅读 · 0 评论 -
ant design修改modal的样式、修改.ant-modal-content属性
问题描述:写了一个组件(index.tsx),引用了ant design的modal组件,在index.less里修改modal组件的.ant-modal-content的css样式无效(给modal组件添加了update-panel对话框外部类名):解决办法:(1)通过modal的API进行设置,可以修改一部分对话框样式(此处只截取部分)使用:(...原创 2019-06-03 11:10:48 · 45922 阅读 · 6 评论 -
小程序相关
小程序可以使用的图表组件:https://antv.alipay.com/zh-cn/f2/3.x/index.html钉钉小程序,页面之间传递数据https://blog.csdn.net/ChickenBro_/article/details/86498468注意:(1)修改page里的data,必须使用this.setData函数(2)dd.httpReques...原创 2019-06-18 21:01:05 · 139 阅读 · 0 评论 -
React点击/hover修改CSS样式
(1)点击修改样式方法一:(typescript写法)type state = { selected: boolean;};class Measurement extends Component<{}, state> { constructor(props:any) { super(props); this.state =...原创 2019-05-23 10:58:05 · 9575 阅读 · 0 评论 -
layui使用自定义图标
图标库:https://www.iconfont.cn/教程:https://fly.layui.com/jie/9149/转载 2019-04-30 11:07:18 · 4765 阅读 · 0 评论 -
leaflet使用笔记&报错
一、笔记(1)打开多个popupleaflet默认打开一个popup会关闭另一个,设置autoClose: false即可默认打开多个;同时还可以设置closeOnClick:false(2)显示多个marker直接多次添加marker即可。如果看不到多个可能是各个点之间的距离太大所以地图上没显示出来_(:з」∠)_二、报错(1)Error: Attempted...原创 2019-07-22 11:41:37 · 2742 阅读 · 0 评论 -
cesium,超图webgl相关资料
一、cesiumcesium环境配置与启动运行https://blog.csdn.net/UmGsoil/article/details/74280229https://blog.csdn.net/hzh839900/article/details/78063084点选查询实体,显示信息框https://blog.csdn.net/hzh839900/article/de...转载 2019-05-08 09:33:24 · 1088 阅读 · 0 评论 -
Vue+elementUI使用笔记
(1) vue引入elementui1.使用npm安装element-uinpm i element-ui -S2.在main.js中导入使用vueimport 'element-ui/lib/theme-chalk/index.css' //别忘了导入样式import ElementUI from 'element-ui'Vue.use(ElementUI)...原创 2019-06-11 11:29:31 · 287 阅读 · 0 评论 -
this相关
(1)VUE中方法中需要在setTimeout()修改绑定的数据这样写是错的:因为此处的this指向的是function需要用箭头函数:原创 2019-07-01 17:23:01 · 135 阅读 · 0 评论 -
css动画笔记
(1) Vue中面板宽度变化(展开/折叠)<template>...<div class="menu" :style="showMenuList">...</template><script>export default { data(){ return{ showMenuList: { ...原创 2019-07-15 19:19:37 · 98 阅读 · 0 评论 -
js(es6)笔记
(1)遍历1. Object.keys()Object.keys(res).forEach(key => { let temp={ name: res[key].name, lat:res[key].y, lon:res[key].x, }; this...原创 2019-07-29 11:40:02 · 114 阅读 · 0 评论 -
vue组件之间传值,父传子props,子传父$emit
一、父组件向子组件传值,通过props(1)使用方式一:参考:https://blog.csdn.net/qq_42492055/article/details/82558971(2)使用方式二:使用elementUI的table组件作为子组件,父组件向table传数据:思路:el-table绑定自身数据tableData,在页面初始化时或watch监控props改变时调用...原创 2019-07-17 17:06:49 · 270 阅读 · 0 评论 -
移动端组件cube-ui使用
(1)组件引入(vue)<template>。。。<cube-scroll :data="data" ref="scroll" :options="scrollOptions"></cube-scroll>。。。<template><script>import { scroll } from ...原创 2019-07-31 09:24:57 · 569 阅读 · 1 评论 -
echarts及vue-echarts笔记&问题
(1)图表数据的添加方式一:xAixs.data与series.data都是数组,一一对应。xAixs.data:[1,2,3,4.....]series.data:[1,2,3,4.....]方式二:series.data数组中每个元素是一个数组,分别对应x,y的值series.data:[[1,2], [2,5], [3,6], [4,7].....]方式三:...原创 2019-08-08 14:40:58 · 213 阅读 · 0 评论 -
获取datatable选中行的数据、获取总行数
一、获取选中行的数据var table = $('#example').DataTable();var data = table.rows(['.selected']).data()[0];这个方法即可获得当前选中行数据参考:https://blog.csdn.net/qq_21208843/article/details/80816191https://blog.csdn.n...转载 2018-11-15 16:25:30 · 11011 阅读 · 0 评论 -
spring boot+thymeleaf+layui编写后台管理系统
一、界面效果:参考官方文档添加组件即可:https://www.layui.com/demo/admin.html另外参考layuiadmin的demo:https://www.layui.com/admin/二、功能一:点击左侧菜单,右侧tab栏添加对应的标签和内容,并可以嵌入iframe利用lay-filter属性,将左侧菜单组件和tab组件关联。(1)左侧菜...原创 2019-03-18 11:12:46 · 15193 阅读 · 0 评论 -
spring boot+thymeleaf+bootstrap,前端模板引擎使用
一、thymeleaf引入bootstrap1)pom.xml里添加bootstrap等依赖<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.3.1</ver...原创 2019-03-11 17:54:41 · 4416 阅读 · 0 评论 -
React中使用jquery、bootstrap
一、React中使用jquery1,在package.json里添加依赖2,安装jquery:npm install jquery --save或npm install3,index.js中将jquery作为模块引入,就可以使用了 二、React中使用bootstrap方法1:1,执行npm install bootstrap --save2,ind...原创 2018-11-23 19:45:31 · 5356 阅读 · 1 评论 -
事件绑定注意事项
在一个按钮函数中编写其他按钮的事件绑定时会出现多重绑定的问题:描述:如下代码,brushtypebtn按钮的click事件upload()函数中,给confirm按钮绑定了click事件,实际点击时会发现,第一次点击弹出一次警告,第二次点击弹出两次警告,以此类推…原因: 每次点击brushtypebtn按钮,都会为confirm按钮绑定一个新的click事件,即confirm按钮绑...原创 2018-11-21 16:36:27 · 179 阅读 · 0 评论 -
regexp正则表达式 过滤字符及注意事项
regexp的test() 方法可检测字符串是否包含指定字符:var re = /^\d{3}\-\d{3,8}$/;re.test('010-12345'); // truere.test('010-1234x'); // false过滤不合法字符示例:var re=/[\/:*?"'<>|]/g;re.lastIndex = 0;if(re.test($('...原创 2018-11-21 15:30:43 · 868 阅读 · 0 评论 -
js实现浏览器table导出为excel
兼容IE:https://blog.csdn.net/lei_1994/article/details/79092159https://www.cnblogs.com/zhangym118/p/6235801.html其他方法:https://www.cnblogs.com/zhuxinghan/p/6063193.htmlhttps://www.cnblogs.com/hei...转载 2018-11-14 20:58:38 · 341 阅读 · 0 评论 -
canvas编写画图工具
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2018-11-12 11:38:20 · 487 阅读 · 0 评论 -
dataTable的columnDefs参数使用
1,datatable的同一column显示后台返回数据的多个字段利用columnDefs的render,其中function(data,type,row){},data读取该column对应字段的数据,row读取一整条记录,可以获取每个字段的值,因此可将两个字段衔接一起。"columns": [ {"data": "name", "bSortable":...原创 2018-11-14 11:26:41 · 9018 阅读 · 0 评论 -
IE可以实现的浏览器js下载文件的方法
方法一:打开新窗口,替换成下载界面function doSave(obj) { obj=document.getElementById('obj');//obj是需要下载的内容 if (isIE()){//IE浏览器保存文本框内容 var winname = window.open('', '_blank', 'top=10000'); winname.d...原创 2018-11-10 14:53:15 · 12120 阅读 · 1 评论 -
在table表格中实现圆角效果
参考:https://www.cnblogs.com/phermis/p/7059894.html转载 2018-11-07 14:59:08 · 1701 阅读 · 0 评论 -
dataTable改变分页样式及language参数使用
一、修改分页按钮内容效果:默认分页:改变分页内容: 方法:$('#example').dataTable( { "language": { "paginate": { "next": "&nbsp;&nbsp;", "...原创 2018-11-07 14:28:17 · 8325 阅读 · 1 评论 -
用复选框checkbox制作标签
效果:未选时:选择若干标签: 代码:html:<div class="optionrow"> <label class="optiontpye">建设年份:</label> <input class="optionitem" type="原创 2018-11-06 20:44:00 · 1503 阅读 · 0 评论 -
dataTable中dom参数的使用
参考官方文档dom参数说明:http://www.datatables.club/reference/option/dom.html用途:用于控制一些元素(如分页)在表格周围的那个位置。比如,每页显示条数(l)在左上角,搜索框(f)在右上角,表格信息(i)显示在左下角,分页控件(p)显示在右下角。各字符代表意义:l - Length changing 改变每页显示多少条数据的控件f...原创 2018-11-06 17:28:15 · 6527 阅读 · 0 评论 -
html/css表格随着内容自动适应宽度
css代码:td{ white-space: nowrap;}效果:原创 2018-11-06 16:35:58 · 12977 阅读 · 0 评论 -
canvas画图转为图片上传,使用formdata上传图片
画布(canvas)对象有一个非常有用的方法:toDataURL(),把画布里的图案转变成base64编码格式的png。var strDataURI = oCanvas.toDataURL();// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."也可转为jpgvar strData...原创 2018-11-23 14:21:42 · 7182 阅读 · 0 评论 -
textarea多行文本,超出高度时显示滚动条
1,两个div,外面的div高度固定,带滚动条;内部为可编辑的div,高度自适应(或内部采用高度自适应的textarea)<div class="describe"> <div id="describe" contentEditable='true'></div></div>.describe{ height: 100p...原创 2018-11-30 10:38:15 · 8318 阅读 · 0 评论 -
兼容IE的一些前端插件
1,树状图ztreehttp://www.treejs.cn/v3/api.php2,时间日期插件My97DatePickerhttp://www.my97.net/3,原创 2019-03-19 17:38:07 · 665 阅读 · 0 评论 -
echarts的label等字体调整大小
https://blog.csdn.net/xuaner8786/article/details/79241689另外,坐标轴的label字体大小,调整axisLabelyAxis: {axisLabel: { fontSize:'15', fontFamily:'微软雅黑', mar...转载 2019-03-06 17:58:49 · 13398 阅读 · 0 评论