知所云-CSDN博客

原创 webRCT实时语音视频通话结合 vue使用

vue中使用webRCT 语音视频通话

2022-12-09 16:58:11 3563

原创 input 输入框自动获取用户密码报错Cannot read properties of undefined (reading ‘toLowerCase‘)

最近项目登录页面的时候会自动获取浏览器保存的用户名和密码，出现了报错了。但是这个报错并不影响操作

2022-12-09 16:26:19 1320

原创 ie 验证码图片不显示解决

因为cas登录页面需要加验证码，刚开始谷歌浏览器调试没有问题，但是因为需要兼容ie，所以ie下调试发现，验证码不显示了。但是接口数据里面有数据。但是后面发现Content-Type 是image/png 这样导致谷歌中没有问题，但是ie中就没办法显示，所以需要后台返回Content-Type格式的时候改。

2022-08-22 10:41:51 1649

原创 element ui 时间日期选择器 el-date-picker 报错 Prop being mutated: “placement“

解决报错 [Vue warn]: Avoid mutating a prop directly since the value will beoverwritten whenever the parent component re-renders.Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"

2022-06-24 14:56:13 10479 13

原创页面水印原生js 兼容ie8浏览器

需求缘由项目是前后端不分离开发的，很老的项目，里面很多插件只能支持ie8，业主公司浏览器都是ie8 ，这次想给所有页面添加用户水印，所以开发需要兼容ie8水印代码创建一个js 文件watermark.js// 水印// 水印(function(watermark){ window.watermarkdivs = []; // 加载水印 var loadMark = function(settings) { var defaultSettings={

2022-04-29 17:42:51 1575 1

原创在vue中使用three.js创建一个简单的立体图形

安装npm install three --save使用页面直接引入import * as THREE from 'three'<template> <div> <div id="container"></div> </div></template><script>import * as Three from 'three'import { OrbitControls } from 'th

2022-01-13 16:14:15 1272

原创微前端之qiankun的使用

微前端之qiankun的使用在之前的文章中谈到了single-spa的使用，为了多了解微前端的各类架构，在新的项目中使用了qiankun，接下来就说一说qiankun的使用安装1、使用vue cli 快速创建门户和子1、子22、门户应用 npm install single-spa --save -d3、子1和子2分别安装npm install single-spa-vue --save -d...

2021-11-29 10:13:35 2257

原创浅谈微前端

前言：之前公司开发一个系统，由多个不同功能的小项目组合成一个比较大的系统，当时考虑直接一个系统开发，但是发现小的项目可以在其他系统中使用，于是想到使用微前端进行项目开发，将不同功能的小项目进行独立开发，然后通过门户进行系统合并，这样的话后期其他项目需要用到这些小项目的系统时，可以直接拿过来进行使用，所以当时采用了single-spa进行开发的，前面也有说single-spa的使用，那么现在我聊聊微前端什么是微前端1、它于2016年首次出现，将后端的微服务的概念扩展到前端世界2、微服务：微服务是面向服务

2021-11-23 10:56:52 2460

原创谷歌浏览器和Microsoft Edge浏览器91版本cookies不携带方案解决

前言：最近有些单点登录的项目本地启动后总是出现不停的刷新页面，看network发现login接口没有携带cookie，导致本地启动的项目login接口一直302原本通过访问chrome://flags/，搜索SameSite by default cookies并设置为disabled就可以解决cookie携带问题，但是进去发现SameSite by default cookies没有了，后来查询发现谷歌浏览器和Microsoft Edge浏览器都进行了更新，导致SameSite by default

2021-06-09 16:37:54 2455

原创 elementUI tree树形控件结合阿里图标icon修改三角图标样式

需求：项目做类型文件j夹列表树，设计需要将三角图标替换成UI设计的icon，UI设计的icon放在了阿里图标库// main.js中先引入iconfont的css和jsimport '@/assets/iconfont/iconfont.css'import '@/assets/iconfont/iconfont.js'解决方案1、<el-tree :data="getPerSrcTree" default-expand-all

2021-03-18 11:14:34 1345 1

原创高德地图信息窗体InfoWindow 使用element UI组件进行图片放大

高德地图信息窗体InfoWindow 使用element UI组件需求：高德地图信息窗体InfoWindow里面的图片可以进行大图预览解决方案，使用Vue.extend和element UI的el-imageimport { Image } from 'element-ui' //先要引入组件 creatTextName(map, siteMarker, item, middleMarkers, type) { //这个是在驾车规划的途径点上面 const { lineName

2021-02-19 17:25:15 1751 1

原创 element UI Notification通知上添加按钮和点击事件

需求：消息通知的时候需要有更多的点击按钮，进行跳转 const h = this.$createElement; const notify = this.$notify({ title: data.type, message: h( "p", { style:"width: 250px;display: flex;justify

2021-01-18 11:07:38 8030 8

原创 js+vue前端分页处理

前端分页处理最近经常遇到后端不能做分页处理，但是前端又需要分页查询的，emm。。。。一万只羊驼奔腾而过 flipOver () { const pageSize = this.pageInfo.pageSize // 每页条数 const pageNo = this.pageInfo.pageNo // 当前页 const arr = this.tableList// 要分页的arr var pagingNum = (pageNo- 1) * pageS

2021-01-13 19:07:48 280

原创 vue监听sessionStorage变化（浏览器页面间的通信）+ jsmpeg

vue监听sessionStorage变化1、项目需求最近遇到项目，是在pc后台系统主界面，点击一个按钮，然后弹窗弹出一个新的视频页面，如图：（本来设计是弹窗直接在显示器2上面弹出，可惜臣妾做不到啊/(ㄒoㄒ)/~~，有会的大佬指点一下），所以只能做成打开一个新的浏览器页面然后拖拽到显示器2上，这里面还有个需求就是每次点击按钮会传一个值过去，然后视频页面要根据传过来的值请求接口，更新页面视频，emmm。。。。。。我也是百度了好几种方法，最后还是选择监听session的变化来处理（可能不是最好的方案，

2020-12-25 09:28:58 1316

原创 vue+sockjs-client实现webSocket通信

1、安装npm install sockjs-clientnpm install stompjs2、引用我这边是一个地方使用直接组件内引用import Stomp from 'stompjs'import specialTreatment from './specialTreatment'3、使用connection(){ //初始化weosocket // 定义客户端的认证信息,按需求配置 // 获取STOMP子协议的客户端对象 le

2020-12-10 14:22:09 3603

原创 vue+高德地图绘制路径

一、vue+高德地图开发最近开发项目地图用的比较频繁，比如高德地图、百度地图或者echars地图，而且大都是用来做路径展示，所以今天说说高德地图的使用（非全面的高德地图使用）二、使用步骤1.安装引入第一种方法1、通过npm安装npm install --save vue-amap2、在main.js中全局引用import Amap from "vue-amap"代码如下（示例）：import numpy as npimport pandas as pdimport matplot

2020-12-08 17:20:49 2446

原创 js各种时间转化

中国标准时间转化成yyyy-MM-dd格式例如Wed Dec 02 2020 00:00:00 GMT+0800 (中国标准时间)//value要转化的标准时间 const dateTme = new Date(value) const Y = dateTme.getFullYear() const M = dateTme.getMonth() + 1 < 10 ? "0" + (dateTme.getMonth() + 1) : dateTme.getMont

2020-12-08 16:13:16 2603

原创 single-spa微前端开发

最近在做一个项目是关于微前端和微服务今天就说说微前端把，微前端使用的是vue-single-spa项目是用vue cli3脚手架搭建的，

2020-10-10 10:53:43 1150 1

原创 element ui + vue 使用table最后一列错位求解决

1、table 里面嵌了一个table，内嵌的table内容超过后出现滚动条，但是滚动的时候分成了两部分滚动，出现错位<el-table :data="list" stripe border size="small" :height="tableHeight" v-loading="loading" element-loading-text="拼命加载中" :row-ke

2020-07-24 17:01:31 3186 4

原创多个页面使用echarts图表，出现部分图表内容不显示问题

最近开发一个项目，主要是对数据进行图表展示，之前用echarts 也就一两个页面会用，这次是十几个页面都有要用图表，多多少少，开发的过程中出现了一些bug（emmm。。。。）其中就遇到一个问题，多个页面，点击其他页面这个页面的数据就能展示，但是点击另一个页面的时候，报表就显示不出来了，当时找了另一个前端一起看，研究半天没找到问题（只能说我俩当时都没有想到id名上去，因为想着vue单页面随着路由切换应该互不影响的），可是这个图表还真是相互影响的，如果绘制图表的div的id名称是一摸一样的两个页面就会出现点击一

2020-07-22 15:35:51 3270 9

原创 element ui 时间选择器封装

需求怎么来的，element ui本身有选择日期范围的选择器，但是产品说，我不要这个，这个不好操作，我要两个时间分开选的，这样好操作，他们用的人已经习惯那种操作了，现在的这个不行，emmm。。。。。我能怎么说那，那就改咯（改的不好不要打我，如果对你有帮助，记得点个赞）图：上图是elementui自带的，我感觉用的挺好用的呀下图是改造后的，因为是日期区间的选择的，前面的日期不能小于后面的日期，后面的日期不能大于前面的上代码：<template> <span class="ti

2020-07-06 16:25:46 1191 7

原创 elementUI table 展开行内嵌套table

需求产品需要table展开行内嵌套一个可以翻页的table，emmm·····我也不知道她咋想的，那么需要就得试下呀使用 vue + elementUI首先，elementui提供了table展开行的一个功能，那么就在这个功能上改造就好了，如果实现的不算特别好，别打我上代码<template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="ex

2020-06-19 13:43:58 7438 1

原创 element下拉框选择值不更新问题

在使用vue+element ui 的时候遇到下拉框选择值发生变化了，但是页面值却没有更新代码 <el-select v-model="ruleForm.oprID" @change="updataOprID"> <el-option v-for="item in collector" :key="item" :label="item" :value="item"></el-option> </el-select>页面如图

2020-06-16 10:38:41 5008

原创 VSCode背景图片设置

vscode有个插件background，让背景变成图片非常可爱的，想着能不能让编辑器中间的部分也能有背景图片呢？所以最简单的解决方法，找到vscode的安装位置，找到里面的workbench.desktop.main.cssMicrosoft VS Code\resources\app\out\vs\workbench打开workbench.desktop.main.css格式化后在这个文件里面添加body { background-size: 100%; backgroun

2020-06-12 10:47:10 2793 4

原创 js身份证号正则判断

项目中会遇到验证身份证号是否正确的需求封装成公用方法：export default function IdentityCodeValid(code) { const city = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江 ', 31: '上海', 32: '江苏', 33: '浙江', .

2020-06-04 16:02:17 1173

原创 git使用

项目内容保存到线上分支1. git add .2. git status 查看是否都add上3. git commit -m“” 保存到本地分支上4. git push push到线上分支合并冲突的时候1. git pull2. git push合并其他分支：先切换到需要合并的分支上，pull下来，步骤：• git checkout 需要合并的分支名• git pull• git checkout 目前的分支名• git merge 需要合并的分支名创建分支..

2020-06-04 10:35:34 123

原创 iview主题定制化

项目中有需求：项目整体显示某个特定的颜色使用 vue + iview按照iview官网显示有两种方法，目前说第一种变量覆盖按照官网的方法如果你的项目使用了 webpack 工程，可以通过变量覆盖的方式来实现主题定制。首先在项目中先建一个目录，比如 my-theme，然后在 my-theme 下建立一个 less 文件 index.less，并写入下面内容：@import '~iview/src/styles/index.less';// Here are the variables to.

2020-06-03 09:59:00 926 2

原创 iview 定义一个按钮取消table中选中的项

之前写了ant design 中table和tag的联动，想着用iview写一个如图的效果：不过在写的过程中遇到一个问题，就是定义的tag怎么让table中选中的勾选去掉，于是百度找到了解决方法https://blog.csdn.net/iorn_mangg/article/details/86003656上代码<template> <div> <div> <Tag v-for="item in count" :key="item.

2020-05-28 18:12:26 3267

原创 Ant design vue中的联动选择取消

项目中会遇到需求就是table表格中选中在侧边展示，侧边删除，table中选中取消的联动选中ui框架：Ant design vue组件：table 和 taghtml中 <template v-for="tag in dataType">  <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag.id)">{{tag.t.

2020-05-25 11:20:21 2191

原创 axios和Promise封装

Promise解决异步操作Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中进行接口请求封装// options中包含着数据export function axiosfetch(options) { return new Promise((resolve, reject) => { let httpDefaultOpts = { //http默认配置 method:options.metho

2020-05-18 16:59:33 998

原创多个接口请求出现报错，提示会连续出现多个，如何只弹出一个提示

场景：如果出现网络问题或者token失效，刷新页面，如果有多个接口请求就会出现报错，那么提示就会连续弹出几个如图：使用的是vue+element ui解决方法：重写一了个messageimport {Message } from 'element-ui'let messageInstance= null;const rewriteMessage = (options) => { if(messageInstance) { messageInstance.clo.

2020-05-14 10:58:04 9739

原创 js车牌号正则判断

新能源车（新能源车车牌长度是比正常车牌多一位）/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/非新能源车/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;...

2020-05-09 14:08:49 711

原创 UEditor富文本编辑在Vue中的使用

1.安装npm i vue-ueditor-wrap// 或者yarn add vue-ueditor-wrap如果这样使用的时候需要下载一个压缩包解压放在项目文件下,下载地址：压缩包下载地址根据你的需要下载这八个中的一个即可，vue中我使用的是[1.4.3.3 Jsp 版本]将下载好的压缩包解压并命名为UEditor，放入static目录下，如果是vue-cli3脚手架创建的项目需...

2020-05-07 13:44:29 516

原创 element ui + vue项目翻页页码定义是number，但是出现个字

element ui + vue项目问题翻页有个项目翻页页码定义的是number数字，但是有个电脑测试时页码上出现了个字，后面的页面就是正常的234，只有第一页出现个字其他电脑和浏览器都没有问题，只有一个测试电脑出现了这个没有找到问题原因和解决方法，求解决...

2020-04-18 18:05:02 646 1

原创 node安装

直接安装node在node.js官网直接下载node安装包直接安装，Node.js官方安装包及源码下载地址：http://nodejs.org/download/使用nvm管理node1、如果电脑之前有安装过node和npm需要先完全卸载然后在安装2、确认删除后使用 curl 安装 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm...

2019-10-09 17:59:50 562

知所云