- 博客(80)
- 资源 (9)
- 收藏
- 关注
原创 使用sass报错
使用sass报错报错如下:原因:当前安装的sass版本过高解决:在package.json文件中将sass的版本改为低版本的,再npm install就可以了
2021-10-11 14:04:26 394
原创 【vue】for循环 一行两列
<template v-for="(v, i) in storeList" > <el-row gutter="24" :key="i" v-if='i%2 == 0'> <el-col span="6"> 左边的内容 </el-col> <el-col span="6" v-if="i+1 < storeList.length"> 右边的内容 </el-col> &
2021-08-03 14:13:02 2966
原创 【javascript】中文逗号,转英文逗号,正则
let str = '奥术大师,让他忽然,阳台上发生,神鼎飞丹砂'str.replace(/,/ig,',')
2021-03-25 16:36:56 2586
原创 【javascript】js下载文件流 前端下载文件流 excel
/*** 下载文件流* @param {*} data 接口返回的文件流* @param {*} fileName 下载的文件名 eg: 客户名单.excel*/function downloadFiel (data, fileName) { const elink = document.createElement('a') elink.download = filenName const blob = new Bolb([data]) elink.href = URL.createOb
2021-02-04 15:44:38 642
原创 【elementUI】switch确认后再改变状态 switch回调
switch只有个change事件,但很多时候我们是需要用户确认后再去改变状态的,解决办法就是在调用change时把switch绑定的值的父级对象当参数,然后在change的回调里执行取反<el-switch v-model="form.isShow" @change="changeSwitch(form)"></el-switch>export default { data () { form: { isShow: true } }, methods: {
2021-02-02 17:04:28 4028
原创 【elementUI】form表单给upload上传组件校验
解决办法:给表单el-form-item绑定个ref,然后在upload上传成功的回调里取消验证提示<el-form-item ref="headPortrait" label="头像" prop="headPortrait"> <el-upload v-model="form.headPortrait" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess" > <
2021-02-01 16:21:19 798
原创 【elementUI】级联选择器cascader数据回显
elementUI的级联选择器cascader文档是没有如何回显已选择过的数据的样例和方法。但我们可以通过官方文档的getCheckedNodes方法来拿到选择过的数据然后再用v-model来绑定,这样就可以回显数据了ps:我设置的cascader是多选的下图是打印getCheckedNodes()返回的数据,我们找到children为空的那个数据,path字段就是其中一个选中的数据路径。我们把所有children为空的path字段存到个数组里,绑定cascader的v-model就可以显示数据了。
2021-01-29 17:39:12 3886
原创 【elementui】走马灯自适应图片高度宽度 走马灯图片显示不全
场景:走马灯里有宽屏相片和竖屏相片共存时,超出走马灯设置的宽高后相片部分会被裁减,但我们希望无论什么分辨率的相片都能显示完全页面代码:<template> <el-carousel arrow="always" indicator-position="outside" :interval="2000" style="width:400px" height="300px"> <el-carousel-item v-for="item in imgs" :ke
2021-01-21 16:10:22 6002 3
原创 【vue】vue中使用throttle 防抖 节流 避免多次提交
场景:表单提交时,连续点击按钮的话会提交多次请求,为避免这种情况,我们就可以使用节流,说白了就是限制频率,比如在2秒内无论点击了多少次,都只请求一次接口示例代码用的是Lodash库的语法,你也可以自己封装export default { return { methods: { getList: _.throttle(function () { //... }, 1000, { 'trailing': false }) } }}...
2021-01-21 11:01:02 1814
原创 【css】响应式布局 @media媒介 适配平板手机
// 大型设备(大台式电脑,1200px 起)@media screen and (min-width:1200px) { //...}// 中型设备(台式电脑,992px 起)@media screen and (min-width:992px) and (max-width:1200px) { //...}// 小型设备(平板电脑,768px 起)@media screen and (min-width:768px) and (max-width:992px) { //.
2021-01-21 10:44:59 593
原创 【vue】插槽 具名插槽 作用域插槽 插槽传参
具名插槽子组件:<slot name="slotName"></slot>父组件:<template slot="slotName"> <div> 插槽内容 </div></template>插槽传参子组件:<slot name="slotName" :row="data"></slot>父组件:<template v-slot:slotName="data"> &
2021-01-20 18:10:38 1441
原创 【axios】封装axios
在项目的utils文件夹下建个request.jsimport axios from 'axios'import { getToken } from '@/utils/auth'axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'// 创建axios实例const service = axios.create({ // axios中请求配置有baseURL选项,表示请求URL公共部分 base
2021-01-20 17:43:27 469
原创 【vue+elementui】v-for循环生成的表单项、动态生成的表单项的校验
v-for循环生成的表单项、动态生成的表单项都有个特性,就是prop不确定,没有prop的话我们就无法像普通表单验证那样校验,所以我们要用:prop来校验。语法::prop="`v-for绑定的数组.${v-for的索引}.v-model绑定的变量`"示例如下:<el-form :model="organForm" ref="organForm"> <el-card v-for="(item, idx) in organForm.organList" :key="idx">
2021-01-19 18:22:48 3308
原创 【javascript】格式化秒数为x时x分x秒格式文本
有时后台只返回秒数给我,但产品却要展示时分秒。js代码如下:export function formatSecond (value) { var theTime = parseInt(value)// 秒 var middle = 0// 分 var hour = 0// 小时 if (theTime > 60) { middle = parseInt(theTime / 60) theTime = parseInt(theTime % 60) if (mi
2021-01-19 15:20:36 220
原创 【vue+elementui】自定义表单项label
创建表单时,若要对某个表单项做解释就要加问题引导,虽然el-form-item的label值类型是string,但我们可以用slot来自定义label的内容,代码如下:效果如下:
2021-01-19 15:07:13 2349 1
原创 【javascript】最新正则校验 支持手机、身份证、车牌号、用逗号隔开的数字等等 持续更新!
手机号/^1[3|4|5|7|8][0-9]{9}$/座机/^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/身份证/^\d{15}|\d{18}$/密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)/^[a-zA-Z]\w{5,17}$/QQ/^[1-9][0-9]{4,9}$/只出现数字+中文逗号或英文逗号/^\d+(,\d+)|\d+(,\d+)*$/只出现数字+英文逗号/^\d+(,\d+)*$/...
2021-01-19 14:56:31 552
原创 【vue+elementui】时间选择器:时间格式、设置时间最大日期或最小日期、设置时间选择范围
时间格式新版的elementui新增了定义时间格式的属性value-format,这样就不用再自己写js在各种格式间转换。例:下面例子在获取startDate时返回的就是’2019-11-06 11:17:13’<el-date-picker v-model="startDate" type="date" :value-format="'yyyy-MM-dd HH:mm:ss'"&...
2019-11-06 11:39:25 7868 2
原创 window 升级node
听说vue-cli 3.0 版本可以减少很多配置项,然后就想着升级下哇,结果vue-cli 3.0还要node版本是8.9 或更高版本,无奈那就把node也升下级。但是…氮素,我通过npm升级node第一行命令就报错了!报错图如下:这是怎么回事??一通搜索后发现原来node的n模块并不支持windows。所以只能去官网下载你想要的版本,然后卸载原来的版本再安装。卸载也很简单,Node.js有...
2019-03-17 15:08:41 635
原创 【javascript】前端分页
有时后台会把数据全部返回,而前端需要自己分页。虽说这种情况比较少,但还是有的。比如某个接口查询速度太慢,如果每次换分页都要请求的话,那么用户体验是极其不好的。前端分页主要就数据的分割,比如一页需要5条数据,那么就把所有数据按5等份分好,然后根据页数获取相应的那页数据。代码如下:/*** 获取按指定数量分割数组的结果* @params: list要分割的数组* @params: n...
2019-02-12 10:03:46 804 1
原创 vue-router 打开新窗口新tab页
有时候需求需要点击某个按钮能新开一个tab页显示内容,有两种方式可以实现。一:<router-link></router-link>//关键点:target="_blank"<router-link target="_blank" to="/sys/setting">系统设置</router-link>二:vue-router提
2019-01-21 10:00:21 10946
原创 IE浏览器关于get请求缓存
问题描述:IE会针对请求地址缓存请求的结果。通常是get请求,因为post方式因为参数的不同,则不会产生这个问题。get请求发送参数和地址都一致,导致IE浏览器会从缓存中取,而不会去请求服务器端。解决方案:请求时固定一个参数,参数值随机变化。例如:config.params.sendTime = new Date().getTime();...
2018-11-09 10:37:00 882
原创 【Javascript】求两个对象的交集、差集
//dataA,dataB样例:[{ id: 1, name: 'zw'}]/*** 获取两个对象的差集* @param dataA:大对象* @param dataB:小对象* /function getDiffrenceSetData (dataA, dataB) { for (let i = dataA.length - 1; i >= 0; i--) {...
2018-09-26 17:23:48 5057
原创 【Javascript】操作json 多层json对象,根据key获取value;获取json的所有的key
function getValueByKey (data, field) { for (let key in data) { if (key === field) { return data[key]; } if (typeof(data[key]) === 'object' &amp;&amp; data[key]....
2018-07-26 14:24:50 9951 1
原创 【Javascript】处理数据
需求:根据x的值生成多少个数组 原数据:[ { "x": 0, "y": 0 }, { "x": 0, "y": 1 }, { "x": 1, "y": 0 }, { "x": 2,
2018-05-29 11:45:19 439
原创 【vue】动态路由vue-router 动态加载
有时系统需要根据用户的权限来动态加载路由~vue-router有提供给我们一个 addRoutes() 方法,但这个方法只有2.2.0以上版本支持。下面我们看下具体写法:var router = { path: '', name: '', component: resolve => require.ensure([], (require) => { ...
2018-04-20 16:54:13 2681
原创 【openlayers】ol3地图组成部分
地图组成部分mapViewlayerssourcecontrolinteractionmap地图(Map):对应的类是ol.Map。所有的地图操作,不论是视图还是交互都要基于它来实现。View视图(View):对应的类是ol.View,之前已有接触,控制地图显示的中心位置,范围,层级等。layers图层(Layers):Ol3有多种多样...
2018-04-12 09:44:56 840
原创 【openlayers】ol3入门一基础篇
openlayer - Web Gis 引擎概述OpenLayers 3简称ol3,是一个开源的Web GIS引擎,使用了JavaScript、HTML5及CSS3技术。在地图数据源方面,支持各种类型的瓦片地图,既支持在线的,也支持离线的。支持浏览器由于OpenLayers 3使用了HTML5技术,所以对各种浏览器的版本有所要求。IE浏览器最低需要IE9,IE9以下的浏览器...
2018-04-12 09:42:00 1120 1
原创 【openlayers】ol3切换图层源
在实际运用场场景,有时我们需要2个不同的图层切换的对比,比如百度地图的普通图层和卫星图层在ol3里实现这个功能也是很简单,使用 setSource() 即可let baseLayer = map.getLayers().item(0);baseLayer.setSource( new ol.source.XYZ({ url: ''//对应的卫星图层地图包路径 ...
2018-04-12 09:41:08 2080
原创 【JavaScript】获取日期段内几点到几点的日期时间
console.log(getWeek('2018-02-01 06:00:00', '2018-02-03 18:00:00', 8, 20));/*** 获取日期段内某点到某点的日期时间* @param begin:开始时间 eg:2018-02-09 10:00:00* @param end:结束时间 eg:2018-02-19 18:00:00* @param beginHou...
2018-02-09 15:36:13 997
原创 【javascript】 获取时间段内属于星期一(*)的日期们
需求:知道开始时间结束时间,求这段时间内输入星期一或星期二…的日期们 思路:用毫秒数来判断/* 获取时间段内属于星期一(*)的日期们 * begin: 开始时间 * end:结束时间 * weekNum:星期几 {number} */ function getWeek (begin, end, weekNum){ var dateArr = new Array();...
2018-01-23 21:18:33 1461
原创 【Echarts】 柱状图 颜色渐变
样例: 起效代码:series: [{ name: 'XXX', type: 'bar', data: [0,10,20,30,20,10,9], itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0,0,0,1,[ {of...
2018-01-17 14:54:21 1473
原创 【Vue】 vue-router 导航钩子(导航守卫)
情况是这样的,我在系统的某个页面写了个setInterval每隔30s进行地图打点,然后发现我点别的界面的,这个函数还在执行!瞬间我就懵13了,我天真的以为只要切换了路由它自然不会执行,没想到啊!请教后才知道要进行拦截,敲黑板了!理论在下:官网解释:正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者...
2017-11-01 17:20:28 4620 4
原创 【JavaScript】标准日期、中国标准时间、时间戳、毫秒数互转
首先要明确这三种格式是什么样子的: 标准日期:2017-09-19 或 2017-09-19 20:00:00 中国标准时间:Mon Oct 23 2017 17:20:13 GMT+0800 (中国标准时间) 时间戳:1508750413 毫秒数:1508750413000 注意:时间戳*1000就是毫秒数 日期或中国标准时间转毫秒数://变量...
2017-10-25 15:15:55 20617
原创 【webstorm】 给console.log设置快捷键
相信每一个前端程序猿在调试的时候都会写超多遍console.log()吧,我也是,最近可能是心情不好什么的,手指在打到s的时候就火大了,一句log怎么那么长,所以就百度了console.log的快捷键。以下:File ---> Setting ---> Editor ---> Live Templates ---> Javascript ---> 点右边+ -...
2017-10-14 14:21:27 9848
原创 【Vue】vue属性 filter过滤器
官方解释:注册或获取全局过滤器 在下理解:不改变data的数据格式,在界面显示处理后的数据格式 应用场景:比如表格的字段显示,接口返回是数组,但表格里肯定需要显示字符串。 例:<template> <el-table :data="tbData"> <el-table-column prop="name" label="姓名"&g..
2017-10-08 11:29:27 6255 1
原创 【JavaScript】巧用 localStorage 实现跨浏览器tab页互动
跨浏览器tab页的互动,比如说一个网站有一个模块是通过超链接_blank在一个新tab页打开,但是这是点击新tab页的内容需要网站也有反应,这时就可以运用localStorage。只要是同一个域名下就都能访问到。 新tab页里的表格有个点击事件,点击完后网站页弹出这行的信息。可以这样操作://表格点击事件回调function clkTb(row) { localStorage....
2017-09-21 11:16:12 2934
原创 【JavaScript】 数组去重 数组求差集、交集
去重:数组去重得分以下三种情况:数组里是数字、数组里是字符串、数组里是对象。前两种直接使用jquery提供的unique方法就可实现。一、数字: 二、字符串:let arr = [1, 1, 2, 4, 2]; let arr1 = ['b', 'a', 'v', 'a'];let newArr = $...
2017-08-23 15:42:34 923
原创 【ElementUI】时间选择器限制选择范围 disabledData
关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决。 HTML:给选择器加上:picker-options属性//开始时间<el-date-picker v-model="startDate"></el-date-picker>//截止时间<el-date-picker v-model="e...
2017-07-28 16:36:01 20455
原创 【OpenLayers】ol3设置地图可拖动、禁止拖动
let pan = getPan();pan.setActive(false);//false:当前地图不可拖动。true:可拖动function getFun() { let pan; map.getInteractions().forEach(function(element, index, array) { if(element instanceof o...
2017-07-07 15:48:30 5830
原创 【Bootstrap】 table表格里的某一行置顶
针对bootstrap table: JS://$(this)是置顶的那个按钮var $tr = $(this).parent('td').parent('tr');$('#table tbody').find("tr").first().before(tr);JQuery://$('.top')是置顶的那个按钮的classvar $top = $(".top");$...
2017-06-17 11:05:29 5615
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人