Cardhu丶-CSDN博客

自定义锚点组件解决在路由为哈希模式下使用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 1210

原创关于子组件调用时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 1596

原创 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 6184 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 5891

原创 websocket连接、mqtt连接

websocket、mqtt连接

2022-03-04 10:49:22 523

原创 VUE正则表达式验证规则合集

VUE正则表达式验证规则合集

2021-12-07 10:53:45 3759

原创 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 7970

原创 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 675

原创 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 784

原创前端获取接口状态码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 1331

原创表单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 883

原创 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 4318

原创 vue深度响应式原理理解，修改数据后页面无渲染

vue深度响应式原理理解，修改数据后页面无渲染Vue 无法检测 property 的添加或移除Vue 不能检测以下数组的变动当你利用索引直接设置一个数组项时当你修改数组的长度时举个例子由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。参考官方文档vue.jsVue 无法检测 property 的添加或移除由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须

2021-08-27 09:02:18 362

原创 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 636

原创前端展示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 1181

原创 vue动态表格以及搜索内容高亮显示

vue动态表格以及搜索内容高亮显示展示效果需求实现表格样式css样式表格内容排列表格搜索高亮数据格式处理后端返回的数据格式解析json格式表头字段筛选功能展示效果需求表格根据后端返回的数据，动态展示行和列输入搜索内容后，对对应的文本进行高亮显示左侧可以筛选要展示的列实现表格样式<div style="background: #f3f6fb"> <template v-for="(item, index) in listHea

2021-08-13 15:48:03 1087

原创 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 791

原创 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 440

原创 vue滚动条始终悬浮在页面最下方

vue滚动条始终悬浮在页面最下方需求思路需求表格宽高都超出浏览器显示大小，横向滚动条需要始终浮在最下方便于滚动展示数据思路在表格下方添加一个滚动条容器，并且采用position: fixed定位始终浮在页面下方。在通过滚动事件绑定该容器与表格的横向滚动同步。在表格内容小于浏览器显示高度时，只展示表格滚动条。...

2021-08-13 14:21:08 2124 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 417

原创 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 778

原创 vue使用echarts图表小结

vue使用echarts图表小结仪表盘曲线图三曲线双曲线柱状图柱状图一柱状图二饼图饼图一饼图二饼图三其他树状水球注：部分效果为动图叠加仪表盘const getOption = (data, color) => { return { series: [ { type: 'gauge', name: '最外层蓝圈', radius: '74%', startAngle: '225', endAn

2021-06-10 09:41:16 2165

原创 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 3464 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 489

原创 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 2174 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 2832 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 7374

原创 VUE中form表单编辑，同时解决checkbox表格和TreeSelect树形选择器内容回显后无法勾选问题

VUE中form表单编辑，同时解决checkbox表格和TreeSelect树形选择器内容回显后无法勾选问题form表单编辑+table表格选择行+树形选择器template解决checkbox表格内容回显后无法勾选问题datamethodsform表单编辑+table表格选择行+树形选择器template<a-form-model-item label="测试场地" prop="areaId"> <a-select allowClear placeholder="请选择

2021-04-28 14:46:07 1413

原创 Jeecg-Boot 低代码开发平台收藏

Jeecg-Boot 低代码开发平台 Jeecg-Boot 低代码开发平台后端技术架构前端后台开发环境和依赖前端开发环境和依赖技术文档https://github.com/zhangdaiscott/jeecg-boot后端技术架构基础框架：Spring Boot 2.3.5.RELEASE持久层框架：Mybatis-plus 3.4.1安全框架：Apache Shiro 1.7.0，Jwt 3.11.0数据库连接池：阿里巴巴Druid 1.1.22缓存框架：redis日志打印：logba

2021-04-08 09:29:13 326

原创 vue中使用Echarts地理地图并结合高德地图实现一个国、省、市、区的地图下钻功能

vue中使用Echarts地理地图并结合高德地图实现一个国、省、市、区的地图下钻功能一、需求：按不同的层级展示不同的内容1.中国地图2.省级地图3.市级地图4.县和区以下的地图二、开发1. Echarts和地图容器的设置相关代码2. Echarts绘制相关代码2.Map绘制相关代码三、演示一、需求：按不同的层级展示不同的内容先放个UI图，这是要期望达到的效果1.中国地图点击带黄圈的深色区域可以进入对应的省份2.省级地图点击带黄圈的深色区域可以进入对应的地级市；点击返回上级可以回到中国地图3

2021-04-02 16:31:07 3475 15

空空如也

空空如也