- 博客(86)
- 收藏
- 关注
RSS订阅原创 video.js自定义预览组件-旋转、下载、画中画、放大缩小功能
提醒自己：这是有段时间之前的代码逻辑了，或许明天的你就有不一样的想法呢！后面如果接触到新需求有优化会持续更新哒。
2024-03-25 10:30:58
1280
原创 VUE+Vant实现H5组织架构选人选公司组件
1.有面包屑点击切换2.有公司、部门、人员3.单选、多选实现4.编辑/回显5.使用随意切换层级和跳转到指定层级回显等功能。
2024-03-21 15:53:53
786
转载 前端请求接口，接口返回字节流，下载word文件到本地
一、接口准备//下载word模板getAttorneyTemplate(data){return axiosApi({method:'GET',url:apiList.attorneyTemplate, //url接口responseType:'blob', //字节流data //参数})}二、请求接口//下载模板getAttorneyTemplate(){regis...
2020-12-17 18:27:46
2719
转载 react子组件给父组件传值
//子组件代码render() { return ( <div> {/*当input的值改变时将子组件的值传给父组件，toFatherValue是父组件一个属性，用来接口子组件的值*/} <input onChange={this.props.toFatherValue}/> </div> ) }//父组件代码 .
2020-10-20 10:01:44
331
原创 react 项目从零搭建
一、查看自己的node版本，要大于等于这个v10.14.2这个node -v //查看版本想要管理node版本的话就去安装一个nvm，这里就不讲安装了，直接去下载安装就好。nvm list //查看你现在的node版本列表nvm install v10.14.2/v10.18.0(你想要的版本) //安装node新版本nvm use 10.18.0 //切换你使用的版本再查看后就会出现星号标示这样就可以了。二、安装我是参考菜鸟教程来安装的：http.
2020-10-15 09:57:43
302
4
原创 electron-vue中安装less 并编写全局变量
1.搭建electron-vue这里我就不多说了，可以去找我之前的博客2.安装lessnpm install less less-loader --save-dev安装好就可以去package.json查看然后去到你的项目文件下面找到.electron-vue修改文件：加入less配置3.使用在文件夹里创建less文件在里面就可以写全局变量，例如：@color:red;再在其他页面直接使用：这时候就可能会遇到以下问题：这...
2020-09-27 12:07:18
1061
转载 vue右击菜单，亲测有效
一、安装npm install @xunlei/vue-context-menu二、全局注册，在main.js引入如下以下文件import VueContextMenu from '@xunlei/vue-context-menu'Vue.use(VueContextMenu)三、页面//放在你的页面里面就可以了<VueContextMenu class="right-menu" ref="contextMenu" :targ..
2020-09-17 17:17:57
745
5
转载 Electron-Vue项目使用Element的el-table组件不显示
打开.electron-vue文件夹下的webpack.renderer.config.js配置文件// 将vue模块列为白名单let whiteListedModules = ['vue', 'element-ui']就这么简单解决。参考于：https://blog.csdn.net/BigFamer/article/details/107163927记得搭建electron-vue+element-ui项目运行后有报错时，也要去修改一下这个文件下的两个.config文件..
2020-09-11 16:29:30
582
1
原创 打包electron项目成exe
安装打包神器git clone https://github.com/electron/electron-quick-start这是一个官方的测试用例，git下来测试一下cnpm install -g electron-builder cnpm install -g electron-packagecd到electron-quick-start文件夹，执行如下最简单的命令，即可开始打包。electron-builder就能打包好exe文件效果图：...
2020-09-09 16:09:10
247
原创 安装Electro，并Electro-vue+element-ui的项目，开始第一个应用并打包
1.搭建环境安装node.js(最新版）用node -v 命令来查看版本，不是最新版就到官网去下载一个最新版，它会覆盖旧版本官网：https://nodejs.org/en/download/2.开始安装创建一个空的文件夹，在您的app所在文件夹中运行下面的命令：（会得到一个package.json文件）npm initnpm install --save-dev electron //安装命令，会得到node_modules这个文件如果安装命令一直停留在一...
2020-09-09 11:50:19
816
转载 vue项目打包上传OSS，无法浏览，页面为空白
需求：vue项目命令打包：npm runbuild生成dist文件，但是dist文件下的index.html打开是空白页，上传到OSS上也是如此一、解决办法在config/index.js目录下修改路径二、解决办法在webpack.base.conf.js中修改publicPath三、解决方法由于把路由模式mode设置成history了，默认是hash。解决方法：路由里边router/index.js路由配置里边默认模式是hash，如果你改成了history模..
2020-07-20 14:01:04
1556
转载 Vue项目 判断设备是移动端还是pc端
经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。直接上代码//在 router/index.js 中有两个页面。export default new Router({ mode: 'history', routes: [ { path: '', redirect: '/pc_index' }, { path: "/pc_index", // pc端首页
2020-07-16 15:21:30
1454
原创 vue+element使用el-menu编写公共导航
主要是以上这两个文件，left是左边导航文件，App.vue是把left这个导航组件引入到公共页面中来使用。1.首先App.vue<template> <div id="app"> <!--<img src="./assets/logo.png">--> <el-container v-if="$route.meta.keepAlive"> <!--<el-header> //头部..
2020-07-14 15:14:18
1609
转载 创建vue 报错vue-cli Failed to download repo vuejs-templates/webpack
如题所示，通过vue-cli工具命令vue init webpack vuedemo创建vue项目的时候报错，提示连接超时，应该是下载某个package的时候，需要翻墙，导致出现连接超时。超时错误截图如下：按照网络上的提示，解决办法是改为离线创建，我们需要下载github仓库中的vue-templates/webpack，然后解压到本地。下载地址为：https://github.com/vuejs-templates/webpack，下载之后，解压到本地用户目录下的.vue-te...
2020-07-13 14:29:31
16104
3
转载 在平面上，计算一点绕另一点旋转n度后的坐标
如图所示，如何求点a绕o点旋转angle角度后（此处为逆时针旋转）b点的坐标？假设o点为圆心(原点)，则有计算公式：b.x = a.x*cos(angle) - a.y*sin(angle)b.y = a.x*sin(angle) + a.y*cos(angle)其中顺时针旋转为正，逆时针旋转为负，角度angle是弧度值，如旋转30度转换为弧度为： angle = pi/180 * 30。这个是重点，一定要代入到公式中！！！！若o不是原点，则可先将a点坐标转...
2020-07-09 16:46:04
698
原创 element-ui upload 照片墙回显，隐藏上传按钮，选择与提交分开
1.上传的是paf，所以照片墙是一片空白，所以需要利用返回的数据来回显url在照片墙2.限制上传数为1，选择上传文件后，上传按钮隐藏，直到把上传的文件移除操作再显示3.把选择文件和点击确定最终上传分开最开始先来讲1和2，这里也是分开上传的，但是是两个接口，所以下面会单独解释纯前端实现分开操作上传<el-upload :class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}" //隐藏显示上传按钮style style="ma
2020-07-01 15:37:55
4586
转载 element-ui el-upload组件，上传完成后隐藏上传按钮，删除后又显示
项目开发中要求最多只能上传3张图片，最后一张图片上传完成后隐藏上传按钮，解决方法如下：代码示例：<el-upload:class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}" //设置隐藏显示的style:action="dealImgUrl" //地址list-type="picture-card":on-preview="handleImgPreview" //点击图片放大:on-remove="handleI...
2020-07-01 14:39:38
9790
4
转载 git add . 的时候遇到warning: LF will be replaced by CRLF in ...... 解决办法
输 入 git add .后出现warning: LF will be replaced by CRLF in ......The file will have its original line endings in your working directory.解决方法：gitconfig--globalcore.autocrlf false就可以解决了。原因就是：原因是路径中存在 / 的符号转义问题，false就是不转换符号默认是true，相当于把路径的/符...
2020-06-23 11:04:45
162
原创 Vue+js+css实现绘制div并进行拖动选区、移动、改变大小
需求：就是可以实现拖动一个方框，扔在一个图片上面，就可以在该图片上面绘制出新的div选区，可以对绘制的div进行移动、改变大小html：拖动选区的方框<div draggable="true" id="source" class="drag"></div><div id="big_Img" draggable="true"> <img :style="imgHW" :src="fileUrl"></div>mounte
2020-06-22 15:44:44
1626
2
原创 解决vue项目安装依赖报错,依赖问题多种解决办法
需求：把vue项目打包，移植到其他地方或者其他电脑上运行开发时往往会发生运行报错，安装依赖报错一、node_modules版本与本机安装的node和npm版本不一致我这里是已经修改过了，所以一样，如果版本不一样就修改为一致再删除node_modules文件，重新npm install安装依赖二、webpack与webpack-dev-server的版本不兼容在本vu...
2020-06-02 13:51:15
33500
3
原创 把项目上传到GitHub、码云和腾讯工蜂里面
1.创建GitHub账号2.在GitHub中创建仓库3.进行复制在文件夹里面创建一个你创建仓库的名字的文件夹把你要上传的项目复制进刚刚的文件夹里面然后再进入文件夹里面，右键git bash here进入，输入以下命令：git add .git commit -m "init"git push -u origin master就可以去到GitHub里面查看你建的仓库里面，就有上传的项目了。4.如果想再传到腾讯工蜂里面就更加简单了，在腾讯工蜂里面：..
2020-05-27 16:26:10
1941
原创 Vue中js+css鼠标悬停拖动、移动小图片，大图片也移动
效果图：页面代码： <div class="rightcon" id="box_BigImg" > <img :src="url" /> //主要显示的大图片 </div> <div class="leftcon" id="left"> <img :src="url" /...
2020-04-28 11:14:09
1534
原创 Vue+cropperjs插件实现裁剪图片功能
一、首先安装插件npm/cnpm install cropperjs二、引入插件：import Cropper from 'cropperjs'import 'cropperjs/dist/cropper.min.css'三、编写页面代码：<div class="rc-cropper__iconCrop1"> <el-tooltip content...
2020-04-23 14:20:27
743
1
原创 vue+element打包项目、图标无法显示，element-ui升级
首先打包命令：npm run build:prodnpm run build打包好后，在项目本地会出现dist文件，就可以到服务器上把dist里面的文件拉上去接下来是打包遇到的问题：打包到线上发现图标无法显示，这时候就要查资料了，后面亲测有效的一种办法找到以下这个文件：build/webpack.prod.conf.js打开修改一个内容：就完美...
2020-04-15 10:42:50
551
1
原创 VUE开发移动端上拉触底加载更多（分页、scroll）
一、首先先编写页面加载时、加载完成、没有数据的页面显示<div v-if="showParts==true" style="display: flex;margin:.4rem 0;justify-content: center;align-items: center;">没有数据咯~~~</div> <div v-if="showParts=='no'"&g...
2020-04-10 13:59:52
3841
原创 get传递数组请求接口--qs.stringify （序列化成URL的形式）
需求：我运用了el-select中的multiple来实现多选，这样得到的数据就是数组格式，但是要传递给后端接口，而且是用get请求，就需要操作数据，得到这样的格式，以URL的形式来传递的首先是查看，swagger首先1.安装qsnpm install qsnpm命令进行安装，是一个npm仓库所管理的包qs.stringify()将对象 序列化成URL的形式，...
2020-03-18 11:11:21
3200
原创 vue+localStorage保存数组
需求：做一个手机版的web表单，提交后数据就保留在web页面的localstoge中，下次用户再打开这个页面的时候，判断一下用户是否已经提交过，没有提交则显示表单页面，已经提交了则显示填写的信息页面1.首先编写表单布局（以下面的为例子）：<div><div class="demo-input-suffix" style="margin-top: 10% !impo...
2020-02-13 17:26:47
5316
原创 vue+Echarts+element-ui+百度地图实现地图可视化
1.安装Echartsnpm i echarts -S ||npm install echarts --save官网教程：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts2.安装element-uinpm i element-u...
2020-02-10 12:27:53
6724
原创 mysql无法启动，查找原因解决
先说问题：我在服务里面找不到mysql这个服务，说明电脑里面根本没有mysql这个服务，所以你需要排查问题，例如环境变量配置了吗等等1.在本地搜索cmd用管理员身份运行（不然可能会拒绝你的请求等）2.打开你的安装文件夹里面的bin目录下面输入：net start mysql //启动命令net stop mysql //关闭命令发现启动不了，在任务管理器里面也...
2020-02-05 17:05:58
559
1
原创 vue页面刷新/路由刷新vue-router---例如（二维码刷新）
this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好用vue-router重新路由到当前页面，页面是不进行刷新的。location.reload()。这种也是一样，画面一闪，体验不是很好所以就可以用用provide/inject组合原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下...
2019-12-24 16:02:05
3452
原创 vue window.open跳转带参数
在需要跳转的页面里面写方法，点击该方法就执行let routeData = this.$router.resolve({ path: '/qrCode', query: { data: JSON.stringify(this.qrcodeData) } }); window.open(routeData.href, '_blank');//path: 是你跳转的页...
2019-12-19 14:23:55
8327
1
原创 vue 鼠标移入移出事件（移入出现按钮），element-ui表格移入移出
效果图：注：@mouseenter="enter(index)" @mouseleave="leave()" 重点 <div class="img_box"> <div v-for="(img,index) in photoData" class="demo-image__preview" @mouseenter="enter(index)...
2019-12-10 14:22:24
21874
原创 vue+el-pagination分页 踩坑笔记
设置选中效果和默认效果的相关博客：https://blog.csdn.net/weixin_42418774/article/details/103242571设置选中效果和默认效果一、首先说一下原因，我是一页写两个分页器，所以就有一些问题出现了二、先展示两个分页 这里是最左边的两个导航分栏<el-row class="tac"> <el-co...
2019-12-04 13:38:11
2223
原创 vue 获取cookie
要达到微信扫描二维码获取微信用户信息返回个PC端，请看：https://blog.csdn.net/weixin_42418774/article/details/103168448一、使用三个js文件你的接口js封装文件request.js 请求文件auth.js cookie文件import axios from 'axios'import reques...
2019-11-27 11:03:23
8001
原创 Vue Element-UI Table点击某一行，将该行背景色改变 超级简单
在你的页面的table里面开启element table 行高亮选项：highlight-current-row<el-table :data="tableData" style="width: 11%;margin-left: 1px;margin-top: 1px;padding-top: 110px;font-size: 16px;heig...
2019-11-25 17:53:10
7309
1
原创 vue+js+element组件上传图片（el-upload）与图片展示
一、首先搭建vue，和配置element-UI组件这个我就不多说了，前面的文章里面都有讲到二、编写布局安装你的需要来写布局，我这里是点击上传按钮，就会弹出新的一个弹出层页面，是运用element里面的el-dialog 来达到效果的效果图：主要代码：上传按钮：<el-table-column label="操作" width="100" >...
2019-11-22 15:46:27
3138
原创 微信扫描PC端二维码跳转到小程序确认登录通过WebSocket来获取用户信息达到PC端登录
需求：在pc端获取后端给的token值来生产二维码（这里后端给了我两个url：一个是二维码url,一个是ws的 url），用微信扫描二维码跳转到小程序写的确定登录页面（进行确定）；然后在PC端使用WebSocket来达到获取用户信息来确认登录并跳转到首页。最最最开始可以先看一下，一位大佬发给我的原型图解释：一、首先需要去配置微信公众平台微信官方文档解释：https://...
2019-11-21 18:08:07
3966
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人