康康不是只喵-CSDN博客

原创 web前端工程师工作中遇到难以解决的问题

1）.margin-top,margin-bottom不能正常显示时一.有时会遇到外层中的子层使用margin-top不管用的情况；这里我们需要在子层的前后加上一个 div{height:0;overflow:hidden;}例CSS样式表中：#box {background-color:#eee;}#box p {margin-top: 20px;margin-bottom: 2

2017-07-09 13:11:02 14967

原创 axios实现前端数据缓存

最主要的是运用CancelToken的请求中断和map中的has(),get(),set()和axios.isCancel()方法。// 接口配置缓存，如果之前请求的存在(api+请求条件)就直接取。// 判断是不是请求中断的，直接resolve。// 批量给所有接口添加sysId参数。// 配置过缓存，没有缓存就存储。// response 拦截器。// request 拦截器。

2023-05-05 18:38:40 1237

原创 vue中div外部有点击事件，内部有change事件如何阻止内部冒泡事件

change阻止不了冒泡，只能使用click的$event.stopPropagation()处理。解决如上图，因为el-checkbox没有自带click，需要使用@click.native，

2023-04-24 18:57:15 773

原创手写锚点，且随着滚动屏幕自动高亮

/ 滚动的高度在第一个与下一个高度时，就显示对应的锚点link。// 默认第一个锚点选中。}// 滚动监听end。

2023-04-12 18:32:15 910

4，给<el-form-item :error="aError">可以在后端返回哪个key报错赋值到哪个input上，会有这个错误只能触发一次的bug？2，循环时对象绑定的form表单内带输入框下拉框数据数据更新，但是视图不更新，即输入不显示？this.$set(obj, key, val) 不能使用obj.key = val。需要在获取后端接口的时候就强制视图更新，forceupdate()对象需要重新给个，将传进来的对象赋值给新对象。3，form表单视图不更新?

2023-04-10 18:37:31 378

原创 el-table手风琴expand-change事件触发数据请求时重复的问题

刚开是通过expandchange改变，后来发现折叠展开会打印两次，会对数据造成混乱，就修改成结合:row-key="getRowKeys" :expand-row-keys="expands"来控制打开一个。

2022-10-27 15:38:20 1274 1

原创如何解决Vue项目中使用echarts，宽度变化导致图不能resize问题

解决Vue项目中使用echarts，宽度变化导致图不能resize问题

2022-09-27 10:48:25 797

原创 nginx清除缓存

location ~* \.(html)$ {root /opt/public;add_header Cache-Control no-store;}location ~* \.(js|css|map|jpg|png|svg|ico)$ {root /opt/public;add_header Cache-Control "public,max-age=2592000";}

2022-08-26 16:56:13 5173

原创生产环境http需要重定向到https

在nginx里面配置location / { root /opt/public; index index.html index.htm Default.htm; try_files $uri $uri/ /index.html =404; #拦截http（增加以下代码） if ($http_x_forwarded_proto = http) { return 307 https://$host$request_uri; }}...

2022-01-25 19:24:38 1666

原创根据前端table导出excel

1,安装 npm install xlsx2，import * as xlsx from 'xlsx'3，给导出的table一个id为eventAnalysisTable4，导出方法methods: { // 表格导出 exportTable() { // exportTable(this.queryString).then(res => { // if (res.status === 200) { // if (res

2022-01-25 19:19:03 878

原创 vue项目在ie11兼容性视图下的兼容问题

X-UA-Compatible是神马？X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的<head>标签中使用。可以在微软官方文档获取更多介绍。为什么要用X-UA-Compatible？在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compa...

2021-10-26 20:26:19 372

原创复制功能，利用Clipboard

<span :data-clipboard-text="code" class="tag-read" @click="copy(code)" >复制</span>import Clipboard from 'clipboard' copy(val) { const clipboard = new Clipboard('.tag-read') clipboard.on('success', e => { this.$messa..

2021-10-26 20:24:24 168

原创 el-select的下拉框实现分页加载，下拉加载更多，适合比较多的数据

<template> <el-select v-model="productForm.sysList" multiple filterable remote reserve-keyword size="medium" style="width: 100%" plac.

2021-10-26 20:23:23 3270 1

原创搜索功能鼠标悬浮icon往左，往右伸展开

<template> <div> <input :class="['change-input',{focus: isFocusOn}]" v-model.trim="keyword" id="searchInput" placeholder="请输入关键字" type="text" @focus="isFoc.

2021-10-26 20:18:08 277

原创 vue-router,如果点击同一个url报错

路由拦截器之前const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}Vue.use(Router)

2021-10-25 15:49:11 139

原创 ajax拦截blob错误

if (error.response.config.responseType === 'blob') { const blob = new Blob([error.response.data]) const res = await uploadFile(blob) Message({ message: JSON.parse(res).message || '未知错误，请稍后重试', type: 'error', ..

2021-10-25 15:43:21 299

原创 el-input只能输入带小数点的数字，或者只能输入数字

@input="valueItem.value = valueItem.value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"

2021-10-09 15:09:08 488

原创大屏可视化项目数字以三位,分隔大于万显示，含小数处理

function tranNumber (num, point) { // 将数字转换为字符串,然后通过split方法用.分隔,取到第0个 const numStr = num.toString().split('.')[0] // 小数点的位数 const num1 = num.toString().split('.').length > 1 ? ('.' + num.toString().split('.')[1]) : '' if (numStr.length < 5.

2021-10-09 10:38:34 281

原创 vue 项目中el-table实现无线滚动效果

给table一个ref属性，mounted的时候调用方法scrollTable(this.$refs.respRankingListTable);function scrollTable (table) { // const self = this // 拿到表格挂载后的真实DOM // const table = self.$refs[val] // 拿到表格中承载数据的div元素 const divData = table.bodyWrapper const ti

2021-10-09 10:35:27 848

原创后端返回所有的数据前端做分页

this.table = this.tableData.slice((this.currentPage - 1) * this.pagesize , this.currentPage * this.pagesize)this.total = this.tableData.length;将后端的接口数据改成如上currentPage 为当前页码，pagesize为展示多少条，tableData为总的数据，不影响分页组件事件和属性使用...

2021-09-27 11:29:05 2078

原创一个链接判断是移动端还是pc端跳转不同的页面

<template> <div id="app"> <router-view/> </div></template><script>import { setCookie } from '@/utils/tools'export default { name: 'App', mounted () { if (this.deviceType() === 'phone') { setC...

2021-09-27 11:19:37 381

原创递归查找搜有的树结构父元素

// 查找父节点 familyTree (arr1, orgId) { var temp = [] var forFn = function (arr, orgId) { for (var i = 0; i < arr.length; i++) { var item = arr[i] if (item.orgId === orgId) { temp.push(item) ..

2021-09-23 15:45:06 132

原创时间取前整五分钟

为当前时间前整五分钟，9.43位9.35-9.40，9.50位9.45-9.50// 前整五分钟 getTime () { const time = new Date() const min = time.getMinutes().toString() const lastStr = min[min.length - 1] if ((min === '0' || min === '5') || (min.length === 2 &&a.

2021-09-23 15:41:08 1083

原创 vue项目封装类似select下拉，点击外部下拉菜单关闭

<template> <input v-model="org" class="input" @click="isTreeShow()" @change="isTreeShow()" id="input"/> <div class="tree-content" ref="treeContent" v-show="treeShow"> </div></template><script> ex.

2021-09-23 09:38:07 427

原创怎么监听sessionStorage的key变化

Vue.prototype.resetSetItem = function (key, newVal) { if (key === 'sysId') { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent') const storage = { setItem: function (k, val) { sessionStorage.setItem.

2021-09-08 19:26:53 604

原创 vue-router打开相同路由控制台会报错

在router.js添加如下import Vue from 'vue'import VueRouter from 'vue-router'const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err)}Vue.use(VueRou

2021-08-25 18:55:26 115

原创滚动条实现分页加载

<div :data="data" v-loading="loading" v-if="data.length" class="table-container-content" @scroll="scrollTo"> <template v-for="(item ,index) in data" > <card :item="item" :key="index" :i="index" @refresh="changeTable(...arguments,item).

2021-08-25 18:46:52 524

原创给全局的ajax设置loading加载框

import { Loading } from 'element-ui'var loadingCount = 0var loadingconst loadingOptions = { lock: true, text: '加载中...', background: 'transparent', fullscreen: true}const startLoading = () => { loading = Loading.service(loadingOptions).

2021-08-17 19:53:30 260

原创 cookie设置过期时间

import Cookies from 'js-cookie'function setCookie(name, value, expires) { return Cookies.set(name, value, { expires })}const millisecond = new Date().getTime()const expiresTime = new Date(millisecond + res.data.expires_in * 1000)setCookie('userTo.

2021-08-17 18:59:41 909

原创 ResizeObserver loop limit exceeded解决方案

// ignore ResizeObserver loop limit exceeded// this is ok in several scenarios according to// https://github.com/WICG/resize-observer/issues/38export function ignoreLoopLimit() { const e = window.onerror window.onerror = function(err) { if (err.

2021-08-12 19:38:03 2463

原创 form内table内嵌input,支持做上下移动校验

<template> <div class="export-template-table"> <el-table :data="form.tableData" v-if="disable" tooltip-effect="dark" border style="width: 700px;margin:0 auto"> <el-table-column label="属性路径" prop="propertyRoute"/> .

2021-08-12 19:34:57 203

原创修改滚动条的样式

//滚动条css::-webkit-scrollbar { /*滚动条整体样式*/ width: 2px; /*高宽分别对应横竖滚动条的尺寸*/ height: 6px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background: #007cff;}::-webkit-sc.

2021-08-12 19:26:03 521

原创修改默认的placeholder的样式

/*placeholder*/input::-webkit-input-placeholder,input::-ms-input-placeholder{ font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; font-size: 14px!important; color: rgba(255, 255, 255, 0.4)!important;}/*不能合并*/textarea::-we.

2021-08-12 19:24:32 159

原创 element的datepicker类型为datetimerange如何动态选择时间范围

selectDate: '', // 选择日期time: '1/h',pickerOptions: { onPick: ({ maxDate, minDate }) => { this.selectDate = minDate.getTime() if (maxDate) { this.selectDate = '' } }, disabledDate: (time) => { // 小于一个小时的粒度只能选择8天 i...

2021-06-25 20:16:09 1911

原创前端js实现文本超长文本前面显示省略号

const dom = document.querySelector('.group-field') const width = dom.offsetWidth - 30// 行宽 const totalNum = val.length // 文本的个数 const fontSizeWidth = window.getComputedStyle(dom, null).fontSize // 字体大小 const num = Math.floo.

2021-05-18 15:48:33 1522

转载大屏 1920 布局：响应式&自适应 vw+ rem + %

需求：1. 全屏，设计图 1920 x 1080 ; min: 1200 x 7682. 响应式&自适应方法：元素单位html font-size：单位 vw页面宽度、字体单位 rem页面高度单位 % + rem, (不直接使用 vh, 因为无法直接实现 min-height 限制）一、 scss 编译，函数 rem($px) 可实现 1920 设计图上的宽度和字体, 不用计算,1920 分辨率下即 100 px 即 rem(100)...

2021-05-11 10:40:39 4901 5

原创 echarts5.0lengend的全选加自定义icon功能

option 的配置如下 legend: { // 头部导航栏 data: ['健康数', '亚健康数', '故障数'], // 自定义 left: '7%', textStyle: { color: '#fff', fontFamily: 'SourceHanSansCN-Regular', fontSize: self.$fontSize.fontSize(0.14)

2021-05-11 10:34:43 325

转载移动端布局之postcss-px-to-viewport（兼容vant）

主角是谁在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案：post-css-to-viewport痛点在哪里在之前有一种流行已久的移动端适配方案，那就是rem，我想下面这两句代码，有不少老移动端都不会陌生：const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; docu

2021-05-11 10:29:50 1435 2

原创利用js如何做到让页面全屏和不全屏功能

Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。以下demo是页面进行全屏和正常屏幕的，你也可以用元素来进行全屏，当然只有包含在顶层文档（top-level document）内部的标准HTML元素、<svg>元素和<math>元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。这段是从https://develop.

2021-05-06 11:08:33 386

转载前端中LED字体的实现

LED字体在前端中如何实现应项目需要，需要在页面中展示一种LED类似电子表中的字体，经过查阅相关资料以实现，下面放成果图下面我来说下具体做法：1.首先到dafont: https://www.dafont.com/theme.php?cat=302下载你需要的字体，它提供的字体很多不止有LED字体一种2.下载后解压，找到后缀名为TTF的文件3.打开fontsquirrel https://www.fontsquirrel.com/tools/webfont-generator如图：4

2021-05-06 11:06:51 1290

空空如也

空空如也