vue
文章平均质量分 70
HHH 917
这个作者很懒,什么都没留下…
展开
-
vue 自定义指令 自动添加省略号 ellipsis
vue 自定义指令 自动添加省略号 ellipsis转载 2023-01-13 17:25:31 · 680 阅读 · 0 评论 -
element-ui el-table表格组件 动态合并列
tableOptions 属性中包含了需要合并的表格列项列表columnIndexList 及判断 prop名称 proName。objectSpanMethod 通过判断 tableOptions 实现合并列。在tableData 数据 需要合并的项插入 tableOptions 属性。主要是原始的tableData表格数据。然后 使用 合并行或列的计算方法。codepen 预览地址。原创 2023-01-10 14:45:45 · 1032 阅读 · 0 评论 -
vue 或 js 使用谷歌翻译实现国际化
但由于使用浏览器中的谷歌翻译插件 会导致dom的结构发生改变,从而导致 vue react与dom操作绑定关系失效!其中( 翻译input提示内容 无法翻译),需要在public 的添加css及js 已放置在。下面的方法可以使得我们即使用谷歌翻译 又不会导致dom结构发生改变 兼容vue react(把vue代码改写一下)框架。这两个组件都可以通过 添加 notranslate 类名,这样谷歌翻译将不会翻译该元素内文字。一般没有适配国际化的页面 我们会使用谷歌翻译插件进行翻译。demo 代码 如下。..原创 2022-08-24 15:42:33 · 4971 阅读 · 3 评论 -
vue 使用 prerender-spa-plugin 预处理 seo优化 导致 history模式 页面刷新 文件加载404 问题
nginx已经加了没有使用prerender-spa-plugin插件之前history正常,增加插件后刷新文件加载异常main.js404问题原因及解决由于前端vue.config 配置的 publicPath 路径 使用了 './'相对路径(当时为了方便前端测试)正确方式publicPath 更改为’/'绝对路径...原创 2022-07-08 11:38:45 · 855 阅读 · 0 评论 -
vuecli页面 使用frp内网穿透 实现远程访问热更新
前提有云服务器及公网ipfrp的部署参考我之前写的 frp 内网穿透 实现外网远程桌面 (Windows+linux)这里再补充服务端frps.ini 对访问 Web服务器自定义端口frpc.ini 对 web页面的部署vue.config.js 运行访问host的配置frps.ini 补充vhost_http_port = 8080 #访问客户端web服务自定义的端口号frp.ini补充在frp.ini额外 添加以下代码 配置多个web页面客户端[web]type = htt原创 2021-12-17 16:28:50 · 1103 阅读 · 0 评论 -
vue router.resolve 解析地址 不要带 hash模式的#号
let router1 = this.$router.resolve({ path: '#/bills/generateOrderDetail?orders_id=42810&parentPath=/bills/billsCPP',});let router2 = this.$router.resolve({path: '#/bills/generateOrderDetail?parentPath=/bills/billsCP',});let router3 = this.$route原创 2021-10-15 10:43:29 · 635 阅读 · 0 评论 -
js 动态修改css动画@keyframes (基于vue讲解 兼容ie)
先看效果已有的css样式 动画效果是2s时间由透明变为不透明;修改后的动画效果styleSheets对象Document.styleSheets 只读属性,返回一个由 StyleSheet 对象组成的 StyleSheetList,每个 StyleSheet 对象都是一个文档中链接或嵌入的样式表。let styleSheetList = document.styleSheets;它是一个 StyleSheet 对象的有序集合。styleSheetList.item(index)原创 2021-01-07 15:34:35 · 8066 阅读 · 2 评论 -
Hbuiber 终端运行ts 报错 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参
问题全局安装typescript后,Hbuiber 的终端运行tsc -V 报错 如图Windows默认禁止运行脚本问题原因 应该是hbuiber的终端没有使用管理员状态下运行使用管理员身份运行 重新执行 tsc -V命令 运行成功!查看当前权限get-ExecutionPolicy //获取本地计算机上的当前用户的有效执行策略 // Restricted 默认的设置, 不允许任何脚本运行; //AllSigned 只能运行经过数字证书签名的脚本; //RemoteSigne原创 2020-12-31 15:59:15 · 593 阅读 · 2 评论 -
vuecli3.0 性能优化 进行Gzip压缩js与css 并使用Nginx 下开启gzip(优化代码,Windows下模拟后端 详细步骤 模拟时gzip_static on 未生效!)
首先 对比优化前后的效果(本地部署nginx)优化前浏览器显示 大小2.0MB优化后浏览器显示 大小732kbdist 的js文件夹第一步 vue压缩文件vue先进行压缩,这样做nginx处理时dist有js文件和js的压缩包,nginx会直接使用压缩包,而不会把js进行压缩,减少nginx处理js过程所需时间。...原创 2020-12-23 10:50:37 · 1446 阅读 · 0 评论 -
vue.js 会多打印出css样式的字符串问题 分析原因及解决
问题如图 打印预览显示 css样式的字符串也打印出来了分析原因既然是打印多出来了css,我就从css样式查看。我的css样式是less格式 并通过外部使用@import引入进去的外部的less样式如下:// demo: 组件用法/* <template> <div class=" NoRouterPopup"> <div class="no-router-content"> sd </div> &l原创 2020-11-05 16:06:10 · 614 阅读 · 0 评论 -
vue 实现组件递归(嵌套自身)
vue 实现组件递归主要使用到了 组件中的name, 当我们设置了组件的name,组件递归调用自身使用的组件名为name;例子// 递归组件 demo.vue<template> <div> <div v-for="(item, index) in treeData" :key="index"> <p>{{ item.title }}</p> <div class="children" v-if="原创 2020-11-05 09:54:08 · 5672 阅读 · 0 评论 -
vue 通过router 路由管理 设置登录校验
思路vue router 给路由添加一个自定义的meta对象,然后通过判断自定义的meta对象内的自定义属性,设置不同的校验。 再通过vue router导航守卫router.beforeEach(),再进入前进行检验拦截。router 路由配置 { path: '/', name: 'Admin', meta: { requireAuth: true, }, component: () => import('../views/Admin.原创 2020-11-04 12:02:20 · 1553 阅读 · 0 评论 -
vue 中使用.env文件配置全局环境变量
.env 全局默认配置文件.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件使用在文件根目录下创建该文件。其中,.env.development 与.env.production会覆盖.env 的全局属性。.env.development 为npm run serve 即开发环境中加载。.env.production 为npm run build 即生产环境中加载。全局属性 自定义命名VUE_APP_NAME = ''VUE_APP_原创 2020-11-03 14:41:18 · 1296 阅读 · 1 评论 -
vue 通过vuex与window.onresize事件 全局监听窗口的变化
实现原理1,通过引用外部js 全局使用一个window.onresize事件(多个会被覆盖),并通过vue实例化 向vuex中存储数据,2,通过watch 监听vuex 中数据的变化,从而实现自适应等需求。main.js// Window.onresize 事件 动态调整窗口import "@/assets/js/onresize";var vue = new Vue({ router, store, render: h => h(App), components:{原创 2020-11-03 13:41:17 · 1920 阅读 · 3 评论 -
vue 多个遮罩层 只显示最高层
效果如下:这里有三个弹窗 但遮罩层只有最新打开的弹窗有具体实现首先统一 弹窗遮罩层的类名 假设class 名为popup-fixed-scroll,我们只需要保证这个类名只有弹窗的时候使用,且一个弹窗只有一个。这样,当我们打开两个的弹窗时 就存在了两个 class 名为popup-fixed-scroll的遮罩层元素,可以通过JS的 getElementsByClassName 返回的一个数组,新弹出的窗口为数组最后面那个,由此,我们可以通过判断 其余窗口遮罩层都设置透明,只保留最后数组元素的遮罩层原创 2020-11-03 11:47:08 · 909 阅读 · 0 评论 -
vue 外部js文件调用 vue实例 this
假设外部文件为 onresize.js 需求则是 onresize.js内部 可以调用 vue 实例 this 从而达到使用vue对象内数据与方法。第一步(非必须)在main.js 引入 onresize.js (这不是必须的 看需要哪里使用到该js文件!)// Window.onresize 事件 动态调整窗口import "@/assets/js/onresize";第二步(必须)使vue实例化 并导出vue// vue实例化var vue = new Vue({ router,原创 2020-11-03 10:59:52 · 4308 阅读 · 0 评论 -
vue-cli 配置路径 及 @,~,~@的使用
1.vue-cli2自定义vue-cli2需要在build的webpack.base.conf.js内设置 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '#': resolve('src/assets') } }2.vue-cli3需要在build的webpac原创 2020-10-28 10:20:55 · 3723 阅读 · 0 评论 -
原生 js获取可视区域宽高(整理)
返回窗口的文档显示区的高度。(IE 8 及更早 IE版本不支持这两个属性。)这个我用的比较多,用来写弹窗window.innerWidthwindow.innerHeight在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:document.body.offsetWidthdocument.body.offsetHeight在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:document.documentElement.clientWidthdocum原创 2020-10-22 13:59:28 · 5785 阅读 · 0 评论 -
canvas实现动画效果(gif) 对图片进行多重中心旋转动画的原理及实现 详解
首先先看效果看是否是你想要用到的知识这里主要使用canvas 的drawImage方法context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);参数描述img规定要使用的图像、画布或视频。sx可选。开始剪切的 x 坐标位置。sy可选。开始剪切的 y 坐标位置。swidth可选。被剪切图像的宽度。sheight可选。被剪切图像的高度。x在画布上放置图像的 x 坐标位置。原创 2020-09-04 15:18:45 · 2355 阅读 · 1 评论 -
js实现前端无限滚动中的虚拟列表效果(只渲染可视区域,dom元素可复用)
初次 效果代码<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无限滚动(只渲染可视区域,dom元素可复用)</title> <meta name="viewport" content="initial-scale=1.0原创 2020-08-26 18:18:20 · 6039 阅读 · 0 评论 -
vue js 添加自动滚动效果(单击滚动暂停,再次点击继续滚动)
主要使用了setInterval定时器来改变获取滚动条scrollTop高度效果使用步骤1.在需要滚动的区域添加指定id属性<div id="scroll_in2" class="htp-list scroll_in"></div>2.函数 methods: { // 添加自动滚动 /* Id 需要滚动的区域 id名称 */ autoSroll(Id) { // flag 为true时停止滚动原创 2020-08-13 16:34:31 · 4943 阅读 · 0 评论 -
vue 或 js 实现 excel表格的导出(笔记)
主要使用了插件 js-xlsx官方 github:https://github.com/SheetJS/js-xlsx参考博客 小茗同学的博客园 https://www.cnblogs.com/liuxianan/p/js-excel.html使用方式 参考 小茗同学的博客园的demo(直接去小茗同学的博客园查看介绍更详细)demo链接:http://demo.haoji.me/2017/02/08-js-xlsx/进入demo链接 使用鼠标右键 下载网站源码原生js可以直接参考上面demo直原创 2020-08-13 11:41:01 · 1036 阅读 · 0 评论 -
vue 使用浏览器自带打印机打印功能
文章参考脚本之家: vue中使用vue-print.js实现多页打印本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。引入安装vue-print.jscnpm i vue-printjs --save-dev解决打印多页只出现一页问题由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装下载 print.jshtt原创 2020-08-13 10:34:03 · 11365 阅读 · 4 评论 -
vue 实现图片的放大缩小(以鼠标位置为中心放大缩小)以及拖拽功能
先看效果 (最下面会贴出完整的组件源码)图片 放大缩小(以鼠标位置为中心放大缩小) 的实现直接贴出代码,实现原理 代码注释有提到!(可能有兼容问题,兼容问题自行修改) fnWheel(oImg, function (down, oEvent) { var oldWidth = this.offsetWidth; var oldHeight = this.offsetHeight; var oldLeft = this.offsetLeft;原创 2020-08-13 10:07:01 · 19775 阅读 · 6 评论 -
vue开发 百度地图 加载大量点导致卡顿解决方法(vue+vue-baidu-map+mapv)
造成卡顿原因 及解决方法(解释可能有误!!!)自行通过F12进入调试窗口,可以发现点标注Marker会以div元素在dom树中渲染出来,需要占用的内存大,渲染慢且大规模的 DOM 操作(会造成重绘或重排)也会造成用户操作阻塞,从而导致卡顿。而mapv则把所有的点转成canvas绘制出来,比div方式渲染性能更好。(因为canvas是无状态的,绘制的内容不能继续引用,不需要另外的内存来保存。而dom中需要存储相应对象数据)另外,如果对点的图标没什么要求的也可以直接使用百度地图的 海量点(PointColl原创 2020-07-17 12:15:20 · 15390 阅读 · 11 评论 -
使用pl-table解决 vue+elment el-table 或el-tree (表格列表或树形控件)渲染万条以上的大数据,数据过多导致卡顿问题
1、卡顿原因因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。具体原理可参考别的大佬写的文章: DOM性能瓶颈与Javascript性能优化.2、解决方法及原理原理解决思路可参考: 页面中长列表滚动的优化.解决方法使用第三方插件 https://github.com/livelyPeng/pl-table.具体使用方法也需参照上面github 这里el-tree卡顿直接去上述链接github参照pl-table进行修改并修改部分样式就是一个el-tr原创 2020-07-12 16:22:06 · 17784 阅读 · 15 评论 -
vue解决开发模式下的跨域问题 及生产环境下的跨域问题
开发环境下: 我的是node与vuecli4.0搭建的页面 根目录下自行添加配置vue.config.js文件代码如下://vue.config.jsmodule.exports = { // 基本路径 assetsDir: 'static', //build 打包 publicPath: './', //build 打包静态资源路径 devServer:{ ...原创 2019-11-17 21:16:28 · 681 阅读 · 0 评论