![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端vue
文章平均质量分 51
echo忘川
有问题可联系QQ:806020881
展开
-
vue在光标处加入内容
vue如何在光标处插入文字原创 2022-11-10 10:45:03 · 1080 阅读 · 1 评论 -
浏览器的ctrl+f的搜索功能
<vxe-column field="name" title="菜单名称" tree-node show-overflow="title"> <template #default="{ row }"> <div class="ellipsis"> <i :class="'iconfont ' + row.icon"></i>原创 2022-05-24 11:01:43 · 1433 阅读 · 1 评论 -
树的删除和修改以及上下移动(不调用刷新树的接口)
涉及到树的操作最好转化成扁平的数据格式进行处理(处理参考链接),如果没有处理成扁平数据的格式的话,可以参考以下内容(内容基于vxe-table组件):1.删除树的节点后更新树的显示//批量删除菜单 handleRemoveRow(row, rowIndex, $rowIndex) { this.$confirm('请选择是否删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消',原创 2022-05-23 15:49:31 · 426 阅读 · 0 评论 -
vue this.$router.push 页面不刷新总结(8种解决方式----覆盖所有场景)
这其实是一个很常见的问题,当使用push的时候,会向 history 栈添加一个新的记录,这个时候,再次添加一个完全相同的路由的时候,就不会再次刷新了.没有耐心的可以直接看第九种方式,绝绝子,适用所有场景.解决办法有这么几种:1. 添加activated函数。 activated(){ 在这里插入代码片 }2. 通过路由监听的方法。将mounted下的方法函数放到watch路由下// 不推荐、用户体验不好watch: { '$route' (to, from) { // 路由发原创 2021-10-23 15:26:26 · 29571 阅读 · 17 评论 -
使用webpack5的模块联邦实现微前端思想
我们模拟2个团队,团队A开发组件部署到线上给团队B使用,团队B使用远程组件。本地端(团队A):const path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin')const HTMLWebpackPlugin = require('html-webpack-plugin');const { ModuleFederationPlugin } = require("webpack").containe原创 2021-10-19 20:07:09 · 920 阅读 · 0 评论 -
video重写控制条——解决video全屏层级最高问题
文章目录一、页面的HTML部分二、css部分三、暂停功能/播放功能四、全屏功能五、当前时间和总时间的显示六、进度条拖动功能七、播放结束时候的处理八、data部分九、结语全屏video会在最上层,这个时候设置定位或者z-index都是无效的,按照有些博客中的z-index设置成2147483647也没用,x5-video-player-type="h5"也没用,于是决定重写控制条。经过分析,简单的重写控制条的话,有这么几个功能点:1.暂停功能/播放功能播放时进度条跟随功能播放时时间改变功能暂停时原创 2020-10-27 15:10:11 · 4759 阅读 · 3 评论 -
使用自定义指令给前端页面或图片或视频添加水印
文章目录一、新建 watermark.js二、min.js 引入 watermark.js三、调用指令一、新建 watermark.jsimport Vue from 'vue'Vue.directive('watermark', (el, binding) => { function addWaterMarker(str, parentNode, font, textColor) {// 水印文字,父元素,字体,文字颜色 var can = document.create原创 2020-10-14 16:19:51 · 2532 阅读 · 3 评论 -
vue3-bate初体验
看详细的话 建议直接点击这里->中文文档现在可以直接通过npm安装vue3,首先要升级脚手架查看脚手架的版本vue -V从 v4.5.0 开始,vue-cli 提供了内置选项,可在创建新项目时选择 Vue 3 预设。所以如果低于4.5,可以升级npm install -g @vue/cli升级之后就可以直接安装vue3了,如下显示vue create hello-vue3部分改变:1.Mixin合并行为变更,浅层次执行合并2.v-if可以和v-for一起写,v-if优先原创 2020-09-25 16:45:53 · 251 阅读 · 0 评论 -
pdf添加水印
文章目录一、vue-pdf二、pdfh5一、vue-pdf在项目开发过程中,如果我们只需要展示pdf,那么我们可以选择vue-pdf,可以查看我之前的一篇但是现在的需求是需要显示带水印的pdf出来,这就存在一个问题,vue-pdf会屏蔽签名图层,导致显示不出来水印。解决方案一:我在issues上看到有人提出了这个问题。issues地址解决方案是直接修改pdf.work.js的源码,全局搜索AnnotationFlag.HIDDEN:// if (data.fieldType === 'Sig'原创 2020-09-25 10:50:11 · 1201 阅读 · 0 评论 -
vue视频播放——vue-video-player
文章目录一、安装二、使用三、效果一、安装github地址安装:npm install vue-video-player --save引入:import VueVideoPlayer from 'vue-video-player';import 'video.js/dist/video-js.css'//自定义样式import '@/assets/styles/video.css'样式文件(这个地方也可以写自己的默认样式):/* 视频开始的按钮样式 */.video-js .vjs原创 2020-09-25 09:49:09 · 541 阅读 · 0 评论 -
electron+vue中使用NodeJS连接mysql连接池增删改查
一、二、rowDataPacket的问题这里有一个坑 rowDataPacket的问题 如下图:原创 2020-09-14 15:34:50 · 3468 阅读 · 6 评论 -
for和forEach的区别——一个小知识点
文章目录一、跳出循环二、性能之前的时候一直以为for和forEach的区别体现在语法和性能上,但是今天的时候突然发现return、break都无法结束foreach的循环。一、跳出循环1.foreach使用break时直接就会报错,如下:2.foreach使用return 只是中止本次继续执行,而不是终止循环,有点像for 循环里面的continue,然后forEach 里面的return是没有返回值的效果的所以foreach跳出循环的方式为: throw new Error("End");原创 2020-09-14 09:12:51 · 662 阅读 · 0 评论 -
mammoth.js/sheetjs/vue-pdf内网文件的预览问题
文章目录一、word预览--mammoth.js二、excel预览--sheetjs三、pdf预览——vue-pdf前端小功能:Word,PDF,Excel文档vue预览最新需求需要内网环境进行预览,pdf可以直接使用浏览器自带的方式进行预览,但是word和excel需要借助插件,预览本地文件,或者是内网文件,可以使用以下方法进行预览:PDF:Vue-pdfWord: mammoth.jsExcel: SheetJS一、word预览–mammoth.js安装:npm install --sav原创 2020-09-08 18:23:29 · 9469 阅读 · 34 评论 -
canvas绘制坐标点连线/动态改变宽度导致canvas渲染失败
文章目录一、有关canvas二、绘制图案三、放大缩小功能四、canvas清空画布的三种方式五、动态改变宽度导致canvas渲染失败现在需要根据坐标点绘制对应的连线,于是考虑采用canvas来完成对应的功能。原图:效果图:一、有关canvas是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行。Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。但是需要注意,canvas 元素本身并不绘制图形,它只是相当于一张空画布。如原创 2020-08-19 14:13:22 · 843 阅读 · 0 评论 -
eslint生成报告
首先安装eslintnpm i -g eslint然后在终端输入以下命令eslint -f compact "src"> results.txt这是将src下的文件检查后导出到results.txt文件中。如果有如下这样的报错,就检查一下.eslintignore文件。You are linting "src", but all of the files matching the glob pattern "src" are ignored.If you don't want to原创 2020-08-12 17:01:40 · 4349 阅读 · 0 评论 -
vue打印兼容xp32位系统/vue的打印功能
文章目录一、vue-print-nb二、vuePlugs_printjs一、vue-print-nb这个插件很好用,也很简单,但是问题就是不兼容xp32位。官方安装及使用文档1.安装npm install vue-print-nb --save2.main.js中全局引入import Print from 'vue-print-nb'Vue.use(Print); 3.使用id<div id="printMe" > <p>打印内容</p>原创 2020-08-11 17:40:24 · 604 阅读 · 0 评论 -
localstorage+beforeRouteLeave实现列表页和详情页的缓存
首先可以封装一个localstorage的公共方法,封装localstorage然后在main.js中全局挂载(也可以在页面上单独引入)import { setLocalStorage, getLocalStorage, removeLocalStorage, clearLocalStorage} from "@/utils/localStorage";//localStorage的挂载Vue.prototype.setLocalStorage = setLocalStorage原创 2020-08-11 16:41:35 · 395 阅读 · 0 评论 -
表头纵向排列
文章目录一、基于elementUI实现的表头纵向排列效果:代码:<template> <div> <el-table :show-header="false" :data="tableData" border style="margin: 20px;width:381px " > <el-table-column width="180原创 2020-08-06 16:57:57 · 3715 阅读 · 1 评论 -
直接在项目中使用Vue.use来使用自己的公共组件
之前一篇讲解了怎么搭建属于自己的组件库,那么如果不通过npm --save xxx 自己的组件,怎么直接在项目中通过use来使用自己写的公共组件呢。使用:在公共组件中新建一个index.js 文件index文件的内容如下:import commonRadio from '../components/zrd/commonRadio';import commonSelect from '../components/zrd/commonSelect';import commonMuitSelect原创 2020-08-01 17:20:44 · 816 阅读 · 0 评论 -
vue使用keep-alive详解——实现数据缓存不刷新、修改值后刷新、相同参数区分等
应用场景:从列表页跳转到详情页面,然后从详情页返回列表页的时候,列表页的数据不刷新,但是从其他页面进行跳转到列表页的时候,列表页的数据刷新。简单来说,是一个前进刷新,后退不刷新的功能。keep-alive是一个缓存的机制,keep-alive要配合router-view使用使用方法:...原创 2020-08-01 16:03:19 · 6585 阅读 · 1 评论 -
electron +vue 桌面端应用
electron有这么几种方式,第一种是利用官方的demo来进行构建,第二种是在vue 中引入electron,第三种是新建electron-vue项目。electron的项目不能使用history模式,也不能使用路由懒加载。一、利用官方的electron-quick-start1.显示利用官方的demo是最简单的方式,只要将项目打包后,替换demo的static和index.html即可,先clone项目:git clone https://github.com/electron/elect原创 2020-07-01 16:36:53 · 2659 阅读 · 3 评论 -
vue添加自定义右键菜单
一、写原生方法1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" >原创 2020-06-28 16:38:22 · 13523 阅读 · 15 评论 -
基于@vue/cli 3搭建属于自己的组件库
文章目录一、创建项目二、创建测试组件三、根目录新增vue.config.js四、修改package.json五、新增.npmignore,添加好忽略文件,打包发布六、使用一、创建项目vue create add-ui default (babel, eslint)> Manually select features ? Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progre原创 2020-06-24 16:13:14 · 1198 阅读 · 0 评论 -
在拦截器中跳转页面和全局的loading且修改loading的图标
一般axios请求会进行封装,封装的文件中会对拦截器、错误码、全局的loading等做相应的处理。一、全局loading的实现如下:在request拦截器中添加loading的配置import { Loading } from 'element-ui'let loadinginstace;// request拦截器service.interceptors.request.use( config => { loadinginstace = Loading.service({原创 2020-06-16 18:29:34 · 1472 阅读 · 0 评论 -
vue局部定时刷新
定时刷新一般都会想到定时器,vue局部定时刷新如下:一、设置定时器 timer: "",//定时器 //定时器刷新待办事项 this.timer = setInterval(() => { self.reload(); }, 1000);二、局部刷新 <div class="DealtTop" v-if="isRefreshAlive"> isRefreshAlive: true, //刷新//局部刷新 reload() {原创 2020-06-16 17:11:38 · 1330 阅读 · 0 评论 -
vue表单修改值后页面输入框中的没有更新(表单的强制刷新)
有的时候我们变化data内的内容,console.log打印的时候是显示已经变化了的,但并没有渲染到界面上去。受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。深入响应式原理1.$set()方法重新渲染this.$set(this.student,"age", 24)2.深拷贝let name2 = JSON.parse(JSO原创 2020-06-09 16:18:02 · 6270 阅读 · 2 评论 -
ctrl+alt+t 函数注释快捷键失效KoroFileHeader
文章目录一、安装插件KoroFileHeader(函数标准注释)二、设置三、使用四、使用无效一、安装插件KoroFileHeader(函数标准注释)在插件市场搜索KoroFileHeader,并安装,如下:二、设置安装完成后,点击vscode的设置面板,然后输入“fileheader”文件头部注释:Fileheader:custom Made函数注释:Fileheader:cursor Mode随便点击哪个"在setting.json"中编辑,输入以下设置后保存,然后重启vs原创 2020-06-08 14:21:26 · 6852 阅读 · 0 评论 -
vue前端开发规范
一、开发工具使用规范建议使用统一开发工具vscode;使用统一缩进,以tab缩进;二、注释规范注释规范主要是作者规范和函数规范。作者规范:/* * @Author: * @Date: 2020-06-01 11:58:32 * @LastEditors: */ 函数规范:/** * @Decp: * @Author: * @Date: 2020-06-08 10:57:39 * @param {type} * @return: */三、命名规范1.原创 2020-06-08 13:48:14 · 342 阅读 · 0 评论 -
vue中引入jq
跟平常的引入是类似的,只是需要在配置文件中再加入一段。之前感觉很简单就没有写,但是用的时候总是要去搜一下,不如干脆自己记录一下,如下:先安装npm install jquery --save在vue.config.js 文件中配置因为vue-cli从3.0开始就没有config文件了,这里提供一个模板var webpack = require('webpack')const path...原创 2020-05-07 14:37:36 · 1002 阅读 · 0 评论 -
SassError: expected selector报错 ::v-deep 替换 /deep/
今天打开项目npm run dev,发现出现了报错信息如下: ERROR Failed to compile with 1 errors 20:27:22 error in ./src/nzk/components/themeEditor/layout/components/LeftPan...原创 2020-04-16 20:46:34 · 36465 阅读 · 3 评论 -
vue : 无法加载文件 G:\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。
问题:安装完vue-cli,在命令行下运行报vue : 无法加载文件 G:\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的about_Execution_Policies。方法一:首先采取的是这个办法1.管理员身份打开windows po...原创 2020-03-10 23:24:52 · 4785 阅读 · 1 评论 -
git commit之后自动对代码检查,导致commit报错
git commit之后自动对代码检查,导致commit报错一、第一种方式是修改配置文件package.json "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,vue}": [ ...原创 2020-02-21 16:25:43 · 618 阅读 · 0 评论 -
npm install 安装插件报错踩坑路
先出现的是超过最大调用栈问题:npm ERR! Maximum call stack size exceeded百度之后说给npm降级或者升级降级 : npm install -g npm@5.4.0升级 : npm install -g npm 升级到最新版结果降级之后再尝试的时候就直接报版本跟node.js不兼容的问题,然后各种在升级都不好使,只能重新删掉在升级WARNING: ...原创 2020-02-06 20:46:58 · 4820 阅读 · 0 评论 -
可拖拽效果
最近要做拖拽相关的功能,想着之前在轮子工厂看到过,准备直接用组件来完成。相关组件:vue-draggable-resizable 用于可调整大小和可拖动元素的组件并支持组件之间的冲突检测与组件对齐github链接但是由于需求并不需要整个工具栏都能拖拽,而是点击图标拖拽一整个工具栏,如图:组件中没有找到需求对应的解决方法(如果有的话留言一下 我加上去)因此,我采用的原生的方法,思路是:点...原创 2020-01-09 18:27:43 · 348 阅读 · 0 评论 -
element el-col click事件失效
使用vue给element ui的标签el-col绑定点击事件时无效,后来换成@click.native="aa($event)"即可。转载于https://my.oschina.net/uwith/blog/3022435原创 2019-12-23 17:21:33 · 1802 阅读 · 0 评论 -
树形结构
由于使用的element组件,所以最初是打算采用组件提供的{ id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }这种数据结构形式,直接在前端渲染数据,然后调用 Tree 实例的filter方法过滤树节点,添加和删除节点的方式例子中也有直接说明,然后添加一个创建根节点的方法,如下:点击添加栏目或者添加时,都会弹出一个弹出框,...原创 2019-12-17 16:00:01 · 248 阅读 · 0 评论 -
vue-cli4.1取消eslint校验
适用范围:有的时候项目已经搭建完了,这个时候想要取消eslint解决方案:是否把插件配置文件写在package.json文件里若是,在package里删掉@vue/standard若否,在.eslintrc.js中去掉@vue/standard...原创 2019-12-03 18:03:27 · 1499 阅读 · 3 评论 -
vue路由跳转权限验证
权限控制的方法:1.路由元信息(meta)2.动态加载菜单和路由(addRoutes)一、路由元信息方式一:钩子函数:Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/Vue.afterEach(function(to,form)) /*在跳转之后判断*/to:router即将进入的路由对象from:当前导航...原创 2019-12-03 17:44:32 · 965 阅读 · 0 评论 -
nginx静态服务器的搭建记录详解
先在官网下载nginx的zip压缩包,windows环境下解压,进入配置文件修改端口号,原默认80产生冲突,这里修改为5555点击exe文件或在cmd中进入文件夹所在位置,执行start nginx.exe,然后进入此路径,出现如下画面,即为成功。增加配置项添加8081端口,新建resource文件夹(静态资源文件夹),将resource文件夹的路径添加到配置文件中,并配置...原创 2019-08-21 17:54:32 · 109 阅读 · 0 评论 -
vuex存储和本地存储的区别
1、实质的区别vuex存的是状态,存储在内存,localstorage是浏览器提供的接口,让你存的是文件,以文件的形式存储在本地2、应用场景vuex用于组件之间的传值,localstorage则主要用于页面之间的传值3、永久性当刷新页面时,vuex存储的值会丢失,localstorage不会4、总结个人在使用的时候,觉得用localstorage可以代替vuex, 对于不变的数据确实...转载 2019-10-21 11:07:47 · 1212 阅读 · 0 评论