小花花inhere-CSDN博客

原创使用sass报错

使用sass报错报错如下：原因：当前安装的sass版本过高解决：在package.json文件中将sass的版本改为低版本的，再npm install就可以了

2021-10-11 14:04:26 351

原创【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 2717

原创【javascript】中文逗号，转英文逗号,正则

let str = '奥术大师,让他忽然，阳台上发生,神鼎飞丹砂'str.replace(/，/ig,',')

2021-03-25 16:36:56 2324

原创【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 610

原创【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 3836

原创【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" > &lt

2021-02-01 16:21:19 750

原创【elementUI】级联选择器cascader数据回显

elementUI的级联选择器cascader文档是没有如何回显已选择过的数据的样例和方法。但我们可以通过官方文档的getCheckedNodes方法来拿到选择过的数据然后再用v-model来绑定，这样就可以回显数据了ps：我设置的cascader是多选的下图是打印getCheckedNodes()返回的数据，我们找到children为空的那个数据，path字段就是其中一个选中的数据路径。我们把所有children为空的path字段存到个数组里，绑定cascader的v-model就可以显示数据了。

2021-01-29 17:39:12 3786

原创【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 5655 3

原创【vue】vue中使用throttle 防抖节流避免多次提交

场景：表单提交时，连续点击按钮的话会提交多次请求，为避免这种情况，我们就可以使用节流，说白了就是限制频率，比如在2秒内无论点击了多少次，都只请求一次接口示例代码用的是Lodash库的语法，你也可以自己封装export default { return { methods: { getList: _.throttle(function () { //... }, 1000, { 'trailing': false }) } }}...

2021-01-21 11:01:02 1750

原创【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 542

原创【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 1406

原创【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 449

原创【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"&gt

2021-01-19 18:22:48 3203

原创【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 187

原创【vue+elementui】自定义表单项label

创建表单时，若要对某个表单项做解释就要加问题引导，虽然el-form-item的label值类型是string，但我们可以用slot来自定义label的内容，代码如下：效果如下：

2021-01-19 15:07:13 2288 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 482

原创【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 7681 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 618

原创【javascript】前端分页

有时后台会把数据全部返回，而前端需要自己分页。虽说这种情况比较少，但还是有的。比如某个接口查询速度太慢，如果每次换分页都要请求的话，那么用户体验是极其不好的。前端分页主要就数据的分割，比如一页需要5条数据，那么就把所有数据按5等份分好，然后根据页数获取相应的那页数据。代码如下：/*** 获取按指定数量分割数组的结果* @params: list要分割的数组* @params: n...

2019-02-12 10:03:46 747 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 10707

原创 IE浏览器关于get请求缓存

问题描述：IE会针对请求地址缓存请求的结果。通常是get请求，因为post方式因为参数的不同，则不会产生这个问题。get请求发送参数和地址都一致，导致IE浏览器会从缓存中取，而不会去请求服务器端。解决方案：请求时固定一个参数，参数值随机变化。例如：config.params.sendTime = new Date().getTime();...

2018-11-09 10:37:00 858

原创【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 4998

原创【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 9846 1

原创【Javascript】处理数据

需求：根据x的值生成多少个数组原数据：[ { "x": 0, "y": 0 }, { "x": 0, "y": 1 }, { "x": 1, "y": 0 }, { "x": 2,

2018-05-29 11:45:19 410

原创【vue】动态路由vue-router 动态加载

有时系统需要根据用户的权限来动态加载路由~vue-router有提供给我们一个 addRoutes() 方法，但这个方法只有2.2.0以上版本支持。下面我们看下具体写法：var router = { path: '', name: '', component: resolve => require.ensure([], (require) => { ...

2018-04-20 16:54:13 2651

原创【openlayers】ol3地图组成部分

地图组成部分mapViewlayerssourcecontrolinteractionmap地图(Map)：对应的类是ol.Map。所有的地图操作，不论是视图还是交互都要基于它来实现。View视图(View)：对应的类是ol.View，之前已有接触，控制地图显示的中心位置，范围，层级等。layers图层(Layers)：Ol3有多种多样...

2018-04-12 09:44:56 757

原创【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 1076 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 2034

原创【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 964

原创【javascript】获取时间段内属于星期一(*)的日期们

需求：知道开始时间结束时间，求这段时间内输入星期一或星期二…的日期们思路：用毫秒数来判断/* 获取时间段内属于星期一(*)的日期们 * begin: 开始时间 * end：结束时间 * weekNum：星期几 {number} */ function getWeek (begin, end, weekNum){ var dateArr = new Array();...

2018-01-23 21:18:33 1425

原创【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 1448

原创【Vue】 vue-router 导航钩子(导航守卫)

情况是这样的，我在系统的某个页面写了个setInterval每隔30s进行地图打点，然后发现我点别的界面的，这个函数还在执行！瞬间我就懵13了，我天真的以为只要切换了路由它自然不会执行，没想到啊！请教后才知道要进行拦截，敲黑板了！理论在下：官网解释：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者...

2017-11-01 17:20:28 4599 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 20411

原创【webstorm】给console.log设置快捷键

相信每一个前端程序猿在调试的时候都会写超多遍console.log()吧，我也是，最近可能是心情不好什么的，手指在打到s的时候就火大了，一句log怎么那么长，所以就百度了console.log的快捷键。以下：File ---> Setting ---> Editor ---> Live Templates ---> Javascript ---> 点右边+ -...

2017-10-14 14:21:27 9753

原创【Vue】vue属性 filter过滤器

官方解释：注册或获取全局过滤器在下理解：不改变data的数据格式，在界面显示处理后的数据格式应用场景：比如表格的字段显示，接口返回是数组，但表格里肯定需要显示字符串。例：<template> <el-table :data="tbData"> <el-table-column prop="name" label="姓名"&g..

2017-10-08 11:29:27 6233 1

原创【JavaScript】巧用 localStorage 实现跨浏览器tab页互动

跨浏览器tab页的互动，比如说一个网站有一个模块是通过超链接_blank在一个新tab页打开，但是这是点击新tab页的内容需要网站也有反应，这时就可以运用localStorage。只要是同一个域名下就都能访问到。新tab页里的表格有个点击事件，点击完后网站页弹出这行的信息。可以这样操作：//表格点击事件回调function clkTb(row) { localStorage....

2017-09-21 11:16:12 2858

原创【JavaScript】数组去重数组求差集、交集

去重：数组去重得分以下三种情况：数组里是数字、数组里是字符串、数组里是对象。前两种直接使用jquery提供的unique方法就可实现。一、数字：二、字符串：let arr = [1, 1, 2, 4, 2]; let arr1 = ['b', 'a', 'v', 'a'];let newArr = $...

2017-08-23 15:42:34 901

原创【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 20245

原创【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 5766

原创【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 5544