自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 ie浏览器下 登录框上密码查看图标无法点击问题

如上图所示 密码框后的闭眼按钮鼠标移动上去无法点击,其他浏览器是正常的,推测是le浏览器可能图层层级不够 ,在图标处z-index增大如下图即可点击查看...

2020-03-14 17:13:29 72

原创 使用Dialog时 让页面层使用了 JQ插件mCustomScrollbar滚动条固定

JQ插件mCustomScrollbar是让不同浏览器的滚动条样式能同一。当有使用Dialog的时候页面内某些div区域内 使用到了滚动条 那么Dialog内使用到鼠标滚轮的时候就会和页面的滚动条冲突。上图这种使用到了vue-cropper裁剪功能,当用户上传图片上来裁剪的时候,鼠标滚轮可以对图片进行缩放,但是页面层使用了mCustomScrollbar插件 会跟着滚动 体验很不好。...

2019-07-23 16:21:06 94

原创 el-table使用模板插槽无法显示tooltip 以及 text-overflow:ellipsis 在火狐显示的问题

el-table中使用show-overflow-tooltip属性内容过长被隐藏时显示 tooltip,使用了作用域插槽的模板那么show-overflow-tooltip设置的显示tooltip内容只作用到下一级的div内容使用<template slot-scope="scope">后 需要在 将内容显示tooltip上的标签设置overflow:hidden;text-o...

2019-07-05 16:13:17 810

原创 el-input中对输入进行过滤内容

在项目中有时候要对用户的输入内容进行过滤,而不是做校验。<el-input v-model="input" @input="e => input = inputMe(e)" placeholder="请输入内容"></el-input>使用@input对用户输入进行监控inputMe(e){ return e.replace(/\/...

2019-06-28 18:14:49 2444

原创 在vue项目新增loading

有时候在elementui项目中一个Loading并不满足需求。所以要额外增加其他的Loading来展示1 在App.vue中是增加一个transition标签用来过渡<transition name="load"> <div v-if="loadShow" class="load"> <img src="/static/images...

2019-06-03 19:35:59 225

原创 echarts点击图例 数据叠加 多次触发

echarts的的图例点击第一次是正常获取当前点击的数据,但是重复点击获取的越来越多,即点击多次触发。所以在点击之前要对加上一个off事件 myChart.off('click') 清楚之前的点击事件。myChart.setOption(eOption,true);在Option后添加参数true,是否不跟之前设置的option进行合并,默认为false,即合并,设置true不合并。...

2019-06-03 19:26:52 883

原创 Cascader 级联选择器 出现空面板的问题

出现空白面板是因为后台大佬数据是递归处理过,最底层的children是个空数组,后台大佬又去不掉或者做不了处理,说特麻烦,那前端做下就好了。获取数据的时候 前端将数据做个递归处理,遇到children为空的时候赋值undefined,就可以解决这个问题。处理后界面...

2019-04-11 17:20:17 1563 1

原创 Cascader 级联选择器 初显的一些问题

使用级联选择器的时候只显示最末端的一级,而且后台也只需要传递一个id而不是数组的形式,所以级联选择器初始显示数据时候要进行异步处理。数据初始化的时候对options里的数据进行遍历,寻找显示的id所在的层级,定义一个数组,将所在的层级上的父级们的push进数组里,注意先后顺序,显示的id在最后。数据作为表单提交的时候,一般后台需要的都是最后一层的id,提交的是一个字符串或者nu...

2018-12-27 17:29:12 2214

原创 ES6 Set的使用, 数组去重 如此简单

Set是ES6提供新的一种数据结构。类似于数组,但是成员元素的值都是唯一的,没有重复的值。接收数组作为参数,所以可以用来用作数组的去重使用let arr = new Set([[1,1,2,2,2,3,4,4,4,4,5,6]])console.log(arr)//[1,2,3,4,5,6]可以使用new Set().size来查看不重复的数组元素长度另外Set 有几个操作...

2018-12-21 11:53:09 794 3

原创 表单编辑,关闭对话框 提醒用户是否保存数据

 在对话框中填写表单,防止未提交的数据用户误操作,点击关闭造成填写的大量数据信息清空,需要重新操作一遍,因此关闭的时候对填写有数据的表单,进行提醒。点击打开对话框的时候,将数据保存在sessionStorage,不能保存在data中定义的一个对象中,这样子修改表单的值会对开始点击打开对话框时候保存的值进行修改,从而无法判断用户是否修改了表单。同时,el-dialog显示右上角的关闭...

2018-12-18 20:00:16 1318 3

原创 用户角色- 权限选择 树形表格+选择框 三级菜单

之前弄了个用户角色权限的表格,但是后面 又增加了一个需要三级的新需求,*******,所以对组件进行了新的修改界面完整如下这是搭建的demo 设备管理下有设备1设备2两个模块设备1拥有增删改的权限,设备2下拥有两个模块设备2-1设备2-2 都拥有相应的模块,相应的数据格式如下;   treeData:[ { ...

2018-12-14 12:40:01 1412 2

原创 vue-amap 高德地图定位 点击获取经纬度和具体地址的使用

官方文档地址: 点这里!! 经纬度获取只要通过点击事件就可以通过e.lnglat来获取,然后就是插件Geocoder使用了。在main.js中initAMapApiLoader中写入:AMap.Geocoder,注意 官方文档中有提示:所以插件中使用的依然是AMap,与导入名无关不然会报错,Geocoder无法使用。定位文档 照着文档写就行 注意在main.js中注...

2018-12-07 10:50:35 12367

原创 表格的整列复制,对数据批量修改

最近的项目上有个需求是将一个表格中的input数据修改了某一个值,该列之后的值修改修改为一样,从而多对数据的批量编辑 正常来做是通过点击事件cell-click点击来确定在那一列的column和id,然后对数据进行遍历修改即可。但是这样会有个bug,表单可以不用通过点击就可以对input里的数据进行改变,这样子表格就监测不到点击的是哪里,所以还需要在每个input中加上chan...

2018-12-06 17:35:00 1245

原创 高德地图 vue-amap 在点坐标上方显示该点的信息

如图:在坐标点上方显示该点的一些信息,使用el-amap-text组件,该组件需要位于el-amap-marker之下,在maker属性中增加text和offsettext是显示的文字,offset是调整文本框出现位置的偏移量...

2018-11-26 11:26:57 4959 4

原创 用户角色- 权限选择 树形表格+选择框

在最近的项目有个功能是给用户角色相关的模块赋予增删改查的权限原型大体如下这是产品一开始给的原型,但是每个模块所拥有的权限不一样,不一定四个都会有,或者会有别的权限,网上找寻资料后,根据这个项目进行修改的https://github.com/Echo987/vue-tableAuthor,而作者也是根据花裤衩的树形表格进行的修改 项目的效果是这样子根据项目的需求对这个表格进行了一点修...

2018-11-12 17:29:02 1276 1

原创 vue中使用高德地图 信息窗口样式无法修改

vue中使用vue-amap后在main.js中import VueAMap from 'vue-amap' 不使用AMap避免与高德全局变量冲突。 在页面中对信息窗体进行样式修改 如果设置了style中设置了scoped会无法起作用,需要去掉scoped或者在app.vue中进行样式的修改...

2018-10-15 20:18:29 1983 5

原创 表单输入字符串直接转换数字 v-model 的修饰符

.numbervue提供了一个修饰符--v-model.number 在表单输入的时候直接将字符串转换成数字类型 很是方便<el-input type="text" v-model.number="ruleForm.payMoney" placeholder="请输入缴费金额"></el-input>在elment-ui中做表单检验的时候,直接在校验里设定...

2018-09-30 10:10:00 3112

原创 vue中导出excel表格

在vue的项目中有个导出excel的需求 之前是后台做的给个地址进行下载。查阅了下资料,前端实现也不难,记录下来,备用。1 安装依赖 npm install -S file-saver xlsxnpm install -D script-loader2 安放两个js文件在src下新建一个文件夹引入Blob.js和expor2Excal.js3 在methods中写导...

2018-09-27 20:32:21 590 1

原创 在vue中封装echarts折线图组件

 先来张图要实现在父组件引用子组件图表,父组件需要传递给图表组件几个数据,id: 图表实例化需要一个唯一的id;time: x轴的显示数据,参数名可以自己定义;opData: 用来配置series的系列列表,参数可以自己定义;unit: y轴单位显示,参数可以自己定义;title: 图表系列标记,参数可以自己定义;父组件:然后封装的子组件如下:需...

2018-07-28 10:24:04 4751 4

原创 Sublime Text 3 插件 -- SFTP 配置连接远程服务器

安装SFTP插件,重启IDE,点击 开始 -> SFTP/FTP ->Setup Server 打开一个配置文件分别配置host服务器地址 user用户名 password密码 和remote_path:服务器地址路径配置完成保存文件点击 开始 -> SFTP/FTP ->Browse Server 找到设置的设置的服务器,点击文件,就会又一些选项。...

2018-07-04 17:04:07 476

原创 Js值类型和引用类型

   由JavaScript 中的变量类型传递方式,分为值类型和引用类型,值类型变量包括 Boolean、String、Number、Undefined、Null,引用类型包括了 Object 类的所有,如 Date、Array、Function 等。在参数传递方式上,值类型是按值传递,引用类型是按共享传递。    值类型和引用类型的区别:    (1)值类型:a:  占用空间固定,保存在栈中(当...

2018-06-05 10:06:19 125

原创 ES7学习之includes()和指数操作符

Array.prototype.includes()方法includes()方法是查找一个值在不在数组当中,如有返回true,否则返回false。该方法接收两个参数,要搜索的值和搜索的开始索引,接收第二个参数的时候,includes会从该索引往后搜索(只有一个参数,默认从0开始)let arr = [1,2,3,4,5]console.log(arr.includes(2)) //trueco...

2018-05-30 10:01:15 530

原创 es6学习之模板字符串 ``

ES6引入了一种新型的字符串字面量语法,称之为模板字符串。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致。但是它为JavaScript提供了简单的字符串插值功能,可以通过一种更加美观、更加方便的方式向字符串中插值var a = 2, b = 3 console.log(`输出a的值:${a},输出b的值:${b}`)...

2018-05-29 10:07:14 373

原创 Ext框架 登录框背景半透明设置背景色。

在使用的一个ext框架做的管理系统中,登录界面是使用Ext.window.Window实现,背景是半透明的效果,也可以设置为透明,效果如下现有需求要去掉那个半透明,换个底色或者图片。Ext.window.Window中有maximized这个参数,可以初始化以最大状态显示窗体,然后将header设置为false, 在bodyStyle中设置相对应的CSS属性即可。需要加图片可以在bodyStyle...

2018-04-23 18:07:29 631

原创 jQuery中阻止事件冒泡的方式及区别

方法一:event.stopPropagation();$("#div").mousedown(function(event){ event.stopPropagation(); });方法二:return false;$("#div").mousedown(function(event){ return fa...

2018-04-23 17:23:38 107

原创 map()方法、reduce()方法和filter()方法的使用

map()方法返回一个经过回调函数处理过的新数组,不会改变原数数组的值var arr = [1,2,3,4] var newArr = arr.map(function(i) { return ++i }) console.log("原数组"+arr) console.log("新数组"+newArr)reduce()方法接收一个函数作为累加器,数组中的每个值...

2018-02-22 16:59:32 897

原创 iview中Select 选择器多选校验

iview提供的select组件中使用multiple属性可以开启多选模式,返回的数据也是数组的形式。iview使用的校验是根据async-validator来实现数据验证。验证规则可前去查看开源项目多选模式下的select组件校验使用type为array,可设置len属性来规定数组的长度,设置len:1则不是数组长度为1则通过校验,不设置则数组有元素则通过校验。{ type: 'array', ...

2018-02-08 17:24:31 6983 1

原创 Object.keys()的使用

  语法 Object.keys(object) 参数  object 必须.包含属性和方法的对象。这可以是您创建的对象或现有文档对象模型 (DOM) 对象。 返回值 一个数组,其中包含对象的可枚举属性和方法的名称。  使用该方法可以得到对象中拥有的属性。在有时候需要知道对象中的属性,这个方法很好用! ...

2018-01-30 19:05:04 1077

提示
确定要删除当前文章?
取消 删除