- 博客(63)
- 收藏
- 关注
原创 vue项目打包发布(未通过nginx部署),打开网页因为html被缓存出现白屏问题解决
Vue项目打包后,如果HTML文件被浏览器缓存导致出现白屏,通常是因为浏览器加载了旧的HTML文件,而没有获取到新打包的资源
2024-07-02 16:37:30
407
原创 Go项目踩坑:go get下载超时,goFrame框架下的go项目里将vue项目的dist同步打包发布,go项目打包并压缩
pack将任意文件/目录打包为Golang源码文件,并且编译到可执行文件中,随着可执行文件发布。
2023-10-17 14:22:43
582
原创 vue3在高德地图首次加载成功后,第二次加载容器消失,后续加载抛出map实例为空问题解决
这里的加载方法在其他项目里都是正常了,这次放入微服务里运行的时候发现多次加载地图会出现各种问题,采用新的JS API 2.0 版本中的JSAPI Loader进行加载。原先加载方式为JS API 引入地图。
2023-03-28 11:16:34
1252
1
原创 vue实现数组拼接,保留同类型,删除原来的不同项,新增新的不同项
新数组合并到旧数组,要求保留原数组同类项并前移,不同项新增,内容都相同时不改变原数组。
2022-11-08 09:12:57
1426
原创 echarts图表在vue项目中使用,并且Cartesian.js报错
点击进入文档可以发现,报错是因为axis.scale不存在引起的。我在y轴的第二个轴里,type值给了空值。这里加入type: 'value’之后,报错消失。
2022-10-29 15:32:31
175
原创 自定义锚点组件解决在路由为哈希模式下使用antd的anchor组件存在的问题
自定义锚点组件解决在路由为哈希模式下使用antd的anchor组件存在的问题antd的anchor组件通过修改URL来定位锚点跳转位置,而单页应用中如果使用哈希模式的路由,会导致当前路由没有定义而出现页面空白。解决方案1——重写antd组件的点击事件 const handleClick: AnchorProps['onClick'] = (e, link) => { e.preventDefault(); var srcolls = document.getElementById(l
2022-05-24 13:52:16
1382
原创 关于子组件调用时ESLint报错的TypeError: n.indexOf is not a function问题定位及解决
关于子组件调用时ESLint报错的TypeError: n.indexOf is not a function问题定位及解决个人遇到的情况是这样的!!!1.在这个情况下,只引入了IsNormal单个组件时,整体的代码并没有报错,项目运行也没有问题![在这里插入图片描述](https://img-blog.csdnimg.cn/e1dd4e4a0ea9451a8cdeec4617edc72c.png2.在此基础上引入第二个组件NodeDetailList时,ESlint产生报错3.从报错内容去看
2022-05-24 09:32:34
1721
原创 VUE3.0监听容器宽度变化
VUE3.0监听容器宽度变化<template> <a-row class="table-box" ref="tableBox" /></template>不解释了,直接上代码<script lang="ts"> import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'; export default defineComponen
2022-03-16 15:18:56
6463
2
原创 VUE3.0中使用SVG绘制折线箭头,并且添加线条流动动画
VUE3.0中使用SVG绘制折线箭头svg标签使用SVG 代码预定义形状元素defs 标签折线箭头绘制示例示例svg标签使用SVG 代码SVG 代码包括开启标签 svg 和关闭标签 /svg 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。<svg></svg>预定义形状元素SVG 有一些预定义的形状元素,可被开发者使用和操作:矩形 rec
2022-03-10 10:15:17
6457
原创 vue中使用高德地图marker标记点的setLabel,在不同层级下控制显示隐藏
vue中使用高德地图marker标记点的setLabel,在不同层级下控制显示隐藏设置点标注的文本标签marker.setLabel({ offset: new AMap.Pixel(1, 0), //设置文本标注偏移量 content: '<div>' + name + '</div>', //设置文本标注内容 direction: 'top', //设置文本标注方位});监听地图层级变化let _this = this;var logMapChange
2021-12-07 09:41:03
8370
原创 vue实现复制到粘贴板的功能
vue实现复制到粘贴板的功能html:<div @click="copyCode" />ts:const copyCode = () => { const copyUrl: any = document.createElement('textarea'); //创建一个textarea框获取需要复制的文本内容 copyUrl.value = props.code; const appDiv: any = document.getElementById('app');
2021-11-29 10:44:23
705
原创 VUE对数组中的Object对象进行去重处理
VUE对数组中的Object对象进行去重处理数组driverList = [ { driverName: '张三', age: 20 }, { driverName: '李四', age: 20 }, { driverName: '张三', age: 20 },]根据name去重处理let obj = {};this.driverList = this.driverList.reduce((cur, next) => { obj[next.driv
2021-11-05 10:25:46
855
原创 前端获取接口状态码400的返回值
前端获取接口状态码400的返回值.catch((err) => { console.log(err.message); console.log(err.response.data); console.log(err.response.status); console.log(err.response.headers);})console.log(err.response);
2021-10-29 09:29:02
1426
原创 表单setFieldsValue报错You cannot set a form field before rendering a field associated with the value
表单setFieldsValue报错You cannot set a form field before rendering a field associated with the value看了好多篇文章,解决方案不是this.$nextTick就是setTimeout实际上还是不能解决这个报错问题原因大致意思是不能在页面未渲染之前进行form表单设置既然以上两种方案都没用,那说明问题应该不在页面渲染的问题上,而是在于字段的对应上在执行form.setFieldsValue的时候,出现了多余
2021-09-08 10:34:31
926
原创 vue3下antd组件a-tree-select树形选择器treeNodeFilterProp切换title值查询失败
vue3下antd组件a-tree-select树形选择器treeNodeFilterProp切换title值查询失败bug复现初始菜单初始查询结果原因定位修改方法方法实现使用treeNode.props.title.children[0].children[0].children原理bug复现初始菜单初始查询结果原因定位之前在vue2+ant-design-vue@^1.7.4,使用时,将tree API的treeNodeFilterProp属性设置为title,就可以针对title属性值进
2021-08-30 14:06:03
4638
原创 vue深度响应式原理理解,修改数据后页面无渲染
vue深度响应式原理理解,修改数据后页面无渲染Vue 无法检测 property 的添加或移除Vue 不能检测以下数组的变动当你利用索引直接设置一个数组项时当你修改数组的长度时举个例子由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。参考官方文档vue.jsVue 无法检测 property 的添加或移除由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须
2021-08-27 09:02:18
420
原创 IntelliJ IDEA ,import跳转无效, cannot find declaration to go to
IntelliJ IDEA ,import跳转无效, cannot find declaration to go tosrc目录下添加文件webpack.config.js内容输入:/* 此文件未使用,只是为了让idea可以识别实际位置 */const path = require('path');function resolve(dir) { return path.join(__dirname, dir);}module.exports = { resolve: { a
2021-08-16 10:15:24
706
原创 前端展示json格式数组
前端展示json格式数组展示效果实现展示效果实现<div class="tab-table"> <div style="height: 16px"></div> <a-collapse style="border: 0" defaultActiveKey="0" accordion> <template #expandIcon="props"> <svg-icon style="width:
2021-08-13 15:55:51
1230
原创 vue动态表格以及搜索内容高亮显示
vue动态表格以及搜索内容高亮显示展示效果需求实现表格样式css样式表格内容排列表格搜索高亮数据格式处理后端返回的数据格式解析json格式表头字段筛选功能展示效果需求表格根据后端返回的数据,动态展示行和列输入搜索内容后,对对应的文本进行高亮显示左侧可以筛选要展示的列实现表格样式<!-- 头部--><div style="background: #f3f6fb"> <template v-for="(item, index) in listHea
2021-08-13 15:48:03
1158
原创 vue纯前端表格滚动分页加载
纯前端表格滚动分页加载实现效果实现过程实现效果实现过程<div style="width: 100%; overflow: hidden; position: relative" id="container" ref="container" @mousewheel="handleScroll" :style="{ height: pageHeight + 'px' }"> <!-- 表格--> <div class=
2021-08-13 15:20:06
820
原创 vue悬浮表单复合组件开发
vue悬浮表单复合组件开发组件样式组件功能开发组件样式组件功能卡片形式展示筛选条件点击添加筛选后展示悬浮表单表单内完成条件选择后点击保存,新增一个卡片开发<div class="form-label">筛选条件:</div><template v-for="(item, index) in fitter"> <div :key="index" class="form-input-tab"> <span :title="ite
2021-08-13 14:37:55
473
原创 vue滚动条始终悬浮在页面最下方
vue滚动条始终悬浮在页面最下方需求思路需求表格宽高都超出浏览器显示大小,横向滚动条需要始终浮在最下方便于滚动展示数据思路在表格下方添加一个滚动条容器,并且采用position: fixed定位始终浮在页面下方。在通过滚动事件绑定该容器与表格的横向滚动同步。在表格内容小于浏览器显示高度时,只展示表格滚动条。...
2021-08-13 14:21:08
2380
2
原创 vue使用CSS3实现进度条加载效果
<div class="animation progressAnimation"></div>//进度条.animation { position: absolute; top: 0; left: 0; background-image: linear-gradient(to right, #ffffff01, #ffffff90); height: 8px; border-radius: 4px; opacity: 0.7;}.progres
2021-06-10 14:23:58
439
原创 vue卡片翻转轮播展示,同时在翻转时切换数据
vue卡片翻转轮播展示,同时在翻转时切换数据效果及代码卡片组件效果及代码<template> <div class="list-container"> <div class="reason" v-if="list1.length > 0 || list2.length > 0"> <div class="logo"> <svg-icon class="center-svg" icon-class=
2021-06-10 14:19:05
842
原创 vue使用echarts图表小结
vue使用echarts图表小结仪表盘曲线图三曲线双曲线柱状图柱状图一柱状图二饼图饼图一饼图二饼图三其他树状水球注:部分效果为动图叠加仪表盘const getOption = (data, color) => { return { series: [ { type: 'gauge', name: '最外层蓝圈', radius: '74%', startAngle: '225', endAn
2021-06-10 09:41:16
2445
原创 vue使用transition切换页面过渡动画,并解决切换组件时产生的空白
vue使用transition切换页面过渡动画,并解决切换组件时产生的空白name属性mode属性class属性举例templatestylename属性如果使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 transition-enter。mode属性out-in 当前元素先进行过渡,完成后新元素过渡进入in-out 新元素元素先进行过渡,完成后当前元素过渡离开class属性v-enter,v-enter-active,v-enter-to
2021-06-04 15:37:07
3812
2
原创 vue静态扫描引入文件下所有文件
vue静态扫描引入文件下所有文件创建一个load,js文件const files = require.context('@/assets/icons/event/', true, /\.svg$/); //true包括子文件下let allIcon = {};files.keys().forEach((key) => { allIcon = Object.assign(allIcon, files(key).default);});export default allIcon;在
2021-05-26 16:19:30
553
原创 vue3 实现CSS无限无缝滚动效果
vue3 实现CSS无限无缝滚动效果templatescriptstyletemplate双层div嵌套,进行隐藏滚动显示<div class="list-container"> <div class="marquee" id="carList"> <template v-for="(item, index) in dataMap.list" :key="index"> <div class="list-item">
2021-05-20 14:13:14
2290
2
原创 VUE 3.0下使用echarts5.1.1,点击legend报错Cannot read property ‘type‘ of undefined
VUE 3.0下使用echarts5.1.1,点击legend报错Cannot read property 'type' of undefined让我们先来看看报错bug复现bug解决思路解决附上完整代码让我们先来看看报错bug复现点击lenged选择不同的数据条目报错3.报错详情seriesModel.coordinateSystem为undefinedbug解决思路首先保持vue版本不变,我将echarts降级为4.7.0版本,同样会有这个报错保持ehcarts版本不变,我
2021-05-14 10:39:31
3084
6
原创 VUE时间选择器a-range-picker使用,并且动态绑定默认值
VUE时间选择器a-range-picker使用,并且动态绑定默认值时间选择器时间选择器<a-range-picker v-if="form.dateFrom" v-model="form.invalidTime" :default-value="[moment(`${form.dateFrom.substring(0,10)}`, 'YYYY-MM-DD'), moment(`${form.dateTo.substring(0,10)}`, 'YYYY-MM-DD')]" :disable
2021-04-28 16:57:43
7816
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人