xcxcsdn的博客

原创 利用element-plus实现列表无限加载的功能

第四步结束监听可以用滚动指令禁用，把infinite-scroll-disabled置为true就好了，结束监听的条件是列表没有数据了。load方法里面写逻辑数据 获取下一页调接口之类的。

原创 解决路由缓存问题

2.选择beforeRouteUpdate钩子函数。产生原因 路由只有参数发生变化时 会复用组件实例。1.选择key 简单粗暴。

原创 pinia

写definestore方法，里面包裹 数据state，getter，相当于state的计算属性，action方法包括同步和异步，注意pinia没有mutation，而是全部为action。注意 数据才借助storetorefs解构 方法直接解构，如下。引入definestore from pina。pinia其实就相当于vue2中的vuex，状态管理。1.首先在store下创建counter.js文件。完了之后同样 return返回。异步action如下。

原创 vuex状态管理

vue状态管理

原创 js对象冻结

js对象冻结

原创 类方法封装

js类方法

原创 WebSocket

websocket 全双工协议 实时通信

原创 后端数据返回过多前端该怎么处理

处理后端返回的多条数据

原创 Vue中的事件修饰符

Vue中的事件修饰符： 1.prevent：阻止默认事件；比如a标签默认会调整src的地址 阻止之后不会跳转 2.stop：阻止事件冒泡；默认的冒泡机制会被阻止 3.once：事件只触发一次；第二次及之后的触发比如点击事件无效 4.capture：使用事件的捕获模式；把默认的冒泡行为改为捕获的行为，冒泡是从底往上，从里

原创 虚拟列表处理后端返回的多条数据

讲讲虚拟列表

原创 vue页面跳转传参

需求场景：搜索时点击搜索按钮跳转到搜索页面并带搜索关键字。如下图：方式1：字符串传参：1.params传参：不带问号，地址栏占位。先在路由配置如下：{ path:'/search/:keyword', component:Search, meta:{footShow:true} },页面如下：<div class="searchArea"> <for.

原创 前端（vue）实现模糊搜索，类似百度搜索

展示：代码实现：<el-form-item label="物资编码：" prop="materialCode"> <el-input @input="autoSearch" v-model.trim="newForm.materialCode" placeholder="请填写物资编码" :disabled="diaTitle == '编辑物资'" ..

原创 vue导出excel文件

import { getparams } from "@/utils/exportparams";exportExcelTwo() { try { const a = document.createElement("a"); a.download = Date.now(); let obj = {}; //obj的字段根据动态添加如搜索等 obj.tenantId = localStorage.getItem("t.

原创 el-tree实现鼠标移入出现/移除功能按钮

如下，当鼠标移入：当鼠标移出：编辑、添加和删除的功能按钮便消失上代码：<el-tree ref="tree" :data="dataArr" node-key="id" :expand-on-click-node="true" :default-expanded-keys="oneTree" :props="de.

原创 js 经纬度坐标格式化 度分秒转度 度转度分秒

后台返回的经纬度数据往往例如是：119.569280这样的数据，我们前端可能要转为115°0'33.41"N，38°0'59.26"E这样的数据或者是115,0,33.41，38,0,59.26这样的数据//度转度°分′秒″function ToDegrees(val) { if (typeof (val) == "undefined" || val == "") { return ""; } var i = val.indexOf('.'); var

原创 js实现时间戳转化为自定义格式的年月日时分秒（yyyy-MM-dd HH:mm:ss）

代码引自：js实现时间戳转化为自定义格式的年月日时分秒（yyyy-MM-dd HH:mm:ss）_winne雪-CSDN博客1、自定义方法转换getYMDHMS (timestamp) { let time = new Date(timestamp) let year = time.getFullYear() let month = time.getMonth() + 1 let date = time.getDate() let ho...

原创 VUE-地区选择器(V-Distpicker)组件使用

代码转自：VUE-地区选择器(V-Distpicker)组件使用_小猪的博客-CSDN博客效果如下：1、安装使用 npm 安装：npm install v-distpicker --save使用 yarn 安装yarn add v-distpicker --save2、使用注册组件注册全局组件import VDistpicker from 'v-distpicker'Vue.component('v-distpicker', VDistpicker);注册组件..

原创 往数组对象中每一个对象添加一个字段

1.加相同字段arr.forEach((value , index) => { value['sex'] = 'men'})// 返回原数组arr[ {name: 'lilei',age: '25',sex: 'men'}, {name: 'nike',age: '23',sex: 'men'}, {name: 'alisa',age: '23',sex: 'men'}]2.加不相同字段let alarmUrl = [{ ...

原创 将后台二进制文件（.bin数据）转为Excel格式

首先应该responseType: ‘blob’，后台返回的数据会被强制转为blob类型；UserExcel() { exportExcelForm(Object.assign({}, this.search)).then(blob => { let filename = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '...

原创 新项目npm install 时候报错

C:\workplace\workspace-ODN\pdnms-front>npm installnpm ERR! Error while executing:npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t https://github.com/openplans/Leaflet.AnimatedMarker.gitnpm ERR!npm ERR! fatal: unable to access ' https://...

原创 vue项目使用 vue-i18n 切换中英文

引自使用 vue-i18n 切换中英文 - rogerwu - 博客园vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n兼容性：支持 Vue.js 2.x 以上版本安装方法：（此处只演示 npm）npm install vue-i18n使用方法：1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）import VueI18n from 'vue-i18n'Vue.use(VueI18

原创 git合并分支

引自git合并分支（一看就懂） - 简书假如我们现在在dev分支上，刚开发完项目，执行了下列命令：git add .git commit -m '提交的备注信息'git push -u origin dev想将dev分支合并到master分支，操作如下：1、首先切换到master分支上git checkout master2、如果是多人开发的话 需要把远程master上的代码pull下来git pull origin master//如果是自己一个开发就没有必要了

原创 git基础操作，上传代码

引自Git 提交代码步骤_青春年少不知疼的博客-CSDN博客_git 提交代码第一步：提交代码第一步：git status 查看当前状态当你忘记修改了哪些文件的时候可以使用 git status 来查看当前状态，红色的字体显示的就是你修改的文件。第二步:提交代码第二步：git add . 或者 git add xxx如图1、如果你git status 查看了当前状态发现都是你修改过的文件，都要提交，那么你可以直接使用 git add . 就可以把你的内容全部添...

原创 很有用！Vue + Element 中 this.$message 失效，报错问题解决方法

有时候message不执行控制台会报错：Cannot read property '_t' of null这是因为this.$t就找不到指向了，具体什么原因我也不知道。但是你别处能用message就代表i18n在root全局上还是存在的，所以把 this.$t('**') 更改为this.$root.$t('**')即可...

原创 vue+element ui项目国际化切换语言后表单验证提示不能自动更新

引自vue+element ui项目国际化表单验证规则切换语言后不能自动更新_dongwang的博客-CSDN博客验证信息不能直接写在message里，写在自定义规则中，如下let validateCode = (rule, value, callback) => { if (!value) { return callback(new Error(this.$t('common.validateCode'))) } else { return...

原创 Cookie ，在网页中存储用户信息。

<!DOCTYPE html><html><head><script>function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires=" + d.toGMTString(); document.cookie = cname + "="...

原创 很有用！swiper 循环模式下的Echarts图展示问题

用了轮播 + echarts 会出现第一个swiper-item会展示echarts图，而后面的不会展示但是如果echarts换成文本没有影响，解决：var mytest=document.getElementsByClassName('doubleCubes'); if(mytest&&mytest.length>1){ for(var i=0;i<mytest.length;i++){ ...

原创 进入页面先刷新且只刷新一次

if(location.href.indexOf("#reloaded") == -1){ location.href = location.href + "#reloaded"; location.reload(); }

原创 elementui tree背景色样式改变

.el-tree { background-color:rgb(46,62,72) !important; color: white !important;}有时候为了避免筛选tree时出现tree外面的包裹容器（div）的背景颜色和tree的背景颜色不一致导致难看的结构。如下可以给外面的包裹容器也加上背景颜色<style lang="scss" scoped>/deep/ .el-scrollbar__wrap { overf...

原创 elementui里面的switch怎样避免多次点击频繁问题

放弃v-model，改为value绑定上述代码在this.value = value后面增加你要调用后台的接口的代码

原创 很有用。防抖节流的应用

转自函数防抖和节流 - 简书 (jianshu.com)https://www.jianshu.com/p/c8b86b09daf01.什么情况下使用。当我们不要频繁调用接口时，或者不想允许用户频繁触发。而我们开发时经常要绑定一些持续触发的事件。如 resize、scroll、mousemove 等等。下面举例举mousemove事件。<div id="content"></div><script> let num = 1; let c

原创 vue中一个标签中含有多个class（其中包含三元表达式）的写法

转自：Vue style、class 内联三元表达式_林中明月间丶-CSDN博客三个条件判断： 1=> 101=色卡、2=>102=板布、3=>103=大货let type = that.orderType == '1' ? '101': (that.orderType == '2' ? '102' : '103')点击事件三元： <el-button type="primary" @click="edit == 'mod' ? sureModify().

原创 Object.prototype.toString.call()检测对象类型

1.如果对象x的toString()方法未被重写使用x.toString();2.大多数情况下对象x的toString()方法已经被重写如var x = { toString() { return "X"; },};则使用Object.prototype.toString.call(x); // => "[object Object]"3.示例Object.prototype.toString.call...

原创 vue 强制刷新组件

刷新当前路由：router.go(0)在组件内部中进行强制刷新：this.$forceUpdate()

原创 时间日期选择器。新建表单数据的时候没有问题，但是在编辑的时候，时间日期回显，这时却改不了数据。涉及往列表/对象添加数据时，无法动态更新

代码如下，用vue3的$set就能解决。

原创 页面设置float后click事件和onclick方法无效的问题

设置z-index层级即可解决。position: relative; z-index: 11; float: left;

原创 路由有权限时应注意

原创 vue-router参数传递

1.params传参或者配置格式时不用加/:id使用方法如下获取如下2.query传参使用方法如下获取如下两者之间1.命名路由搭配params，刷新页面参数会丢失2.查询参数搭配query，刷新页面数据不会丢失3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值...

原创 vue最常用组件通信及注意事项

1.父子之间父传子子传父2.任意组件之间事件总线--eventbus

原创 很有用！element el-tree树结构刷新后或者添加或者删除后需要刷新后保留展开状态解决方法

我们在使用element的el-tree组建的时候，当我们给树结构重新赋值后，树节点就全部自动合上了。所以我们要记录展开状态，方法如下转载自element el-tree树结构刷新后保留展开状态解决方法_苜可的博客-CSDN博客...