![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue2.x
Vue2.x
Boriska1996
这里介绍不了我。
展开
-
vue-路由history模式刷新页面404及上线后的代理问题
为了追求路由美观,又或者说为了便于网页的SEO优化,常常会舍弃hash路由而改用history路由。router-index.js基础配置mode : "history" , base : process . env . BASE_URL , routes , // 切换路由后滚动条置顶 scrollBehavior() {return {} , });本地404设置完以后,问题来了,页面刷新会报404怎么办。设置publicPath、.........原创 2022-08-11 14:12:05 · 3596 阅读 · 1 评论 -
prerender-spa-plugin报错处理,prerender-spa-plugin-next长江后浪
由于业务需求需要用到预渲染,vite+vue3没有找到好的库。考虑使用prerender-spa-plugin这个插件满足需求。以下是我的配置信息。使用过程中诸多报错,但后续都以解决。最终卡在这个条报错信息上。...原创 2022-08-10 16:03:29 · 4310 阅读 · 15 评论 -
Vue3引入彩色阿里巴巴Iconfont图标
1、下载阿里巴巴矢量图标库代码(Symbol)2、main.ts全局引入一下两个文件import "../src/assets/iconfont/iconfont.js";import "../src/assets/iconfont/iconfont.css";3、自定义相应的Iconfont组件<template> ssssssssssssss <svg class="icon" aria-hidden="true" :width="fontSize" :heigh原创 2021-11-21 14:54:39 · 1562 阅读 · 0 评论 -
Vite2.0+ElementPlus打包报错Cannot find name ‘global‘.
Vite2.0引入ElementPlus打包报错。node_modules/element-plus/es/utils/types.d.ts:19:55 - error TS2304: Cannot find name ‘global’.在package.jsonbuild脚本命令行中添加–skipLibCheck保存再次打包即可。 "scripts": { "dev": "vite", "build": "vue-tsc --noEmit --skipLibCheck &am原创 2021-09-12 11:21:03 · 1611 阅读 · 0 评论 -
sass高版本Node环境下报错
Node Sass could not find a binding for your current environment: Windows 64-重构: npm rebuild node-sass更新:npm update完事原创 2021-09-08 17:48:49 · 219 阅读 · 1 评论 -
Vue视频背景自动播放组件
<template> <div class="homepage-hero-module"> <div class="video-container"> <div :style="fixStyle" class="filter"> <!--内容--> </div> <video :style="fixStyle" autoplay loop muted class="f原创 2021-09-07 11:49:07 · 1137 阅读 · 0 评论 -
Vue不同分辨率大小下的屏幕适配
亲测可用安装npm i lib-flexiblenpm i postcss-px2rem-excludeutils文件夹下创建rem.js复制以下全部代码(function() { // flexible.css let cssText = '' + '@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size原创 2021-09-02 16:13:30 · 1010 阅读 · 0 评论 -
推荐好用的可做动画控制的js库Gsapjs
AnimatejsAnimayejs许多小伙伴会在项目中使用到Animaye.css动画库,但是终究是css样式库,同一个页面不同的模块进行操作会有一些坑(例:动画发生的时间难于掌控)。推荐一个好用的库Gsapjs在VUE官网中的状态过渡这节中有用到这个库的例子。gsap.to()常用的方法gsap.to()即可搞定大部分的动画效果问题举例:动态数字累加告别冗余的计时器figureSurge.vue<template> <div class="figureS原创 2021-09-02 16:00:12 · 2083 阅读 · 0 评论 -
Vue中使用lodash防抖(debounced)&节流(throttle)
Vue中使用lodash防抖(debounced)&节流(throttle)废话不多说,直接上代码。<template> <div class="label-container"> <div style="flex: 1 1 auto"> <Form ref="label-form" :model="formItem"> <div v-for="(label, index) in f原创 2021-06-21 14:25:09 · 1546 阅读 · 0 评论 -
Vue2.x获取dom下子元素方法
Vue this.$refs获取DOM下子元素<template> <div class="subject"> <div v-html="insertedStr" @input="htmlHandler($event)" class="inputBox" ref="htmlInput" ></div> </div></template><script&g原创 2021-05-24 15:40:05 · 2796 阅读 · 0 评论 -
Vue前端神策数据埋点
集成JS SDK全埋点1、从 npm 获取 sdk npm install sa-sdk-javascript2、utils新建sensors.js文件夹,Vue全局挂载import sensors from 'sa-sdk-javascript';sensors.init({ // 神策系统配置 server_url: 'http://sademo.datasink.sensorsdata.cn/sa?project=VideoWebcastDemo', // 数据接收地址 i原创 2021-05-07 18:10:26 · 3082 阅读 · 0 评论 -
Vue3自定义指令的改动与使用
Vue2.0自定义指令的钩子函数 bind: function(el: any, binding: any): void { console.log("bind"); //指令第一次绑定到元素时调用,只执行一次。在这里可以进行一次性的初始化设置。 }, inserted: function(el: any, binding: any): void { console.log("inserted"); //原创 2021-04-28 15:58:07 · 1385 阅读 · 1 评论 -
vue3.0 main.ts createApp报错
import { createApp } from 'vueimport { createApp } from 'vue' 报错Module ‘"…/node_modules/vue/types"’ has no exported member ‘createApp’. Did you mean to use ‘import createApp from “…/node_modules/vue/types”’ instead?报错哥们 其实错不在你 不就是你的错创建项目的时候能长点心吗,别把原创 2021-04-21 11:22:37 · 2314 阅读 · 0 评论 -
ElementUI通知功能Notification和MessageBox踩坑
1.样式修改很多小伙伴会发现,不管是less种的**/deep/还是scss中的::v-deep都无法直接修改以上两种功能的底层样式,这里的关键字是scope**。那么如何修改样式?利用文档中的customClass属性,给Notification 加上类名,配合内置的类型即可进行样式修改。2.调用方法以及DOM结构修改利用Vue中的createElement 参数进行DOM元素的创建。直接上完整版代码。<template> <div class="contain"&原创 2021-04-19 14:32:03 · 1112 阅读 · 0 评论 -
Vue中的文字换行
Vue中数据单向绑定的文字换行怎么搞?两个关键 /n+white-space: pre-wrap;换行样式绑定给需要换行的父元素原创 2021-04-14 16:04:44 · 5396 阅读 · 0 评论 -
elementUI tooltip无法修改样式
elementUI tooltip修改样式不管用解决是vue使用scoped后会在当前组件下每个dom元素上添加一个组件唯一标识(例如data-v-fae5bece),class也会编译成data-v-fae5bece,而我们使用popper-class自定义class想写在scoped中,element动态添加的dom上不具备唯一标识data-v-fae5bece,所以样式不会生效只能用全局样式覆盖。解决办法再在底部新建一个style标签,来修改样式就好了,来修改样式就好了[外链图片转存失败原创 2021-04-14 15:17:05 · 1366 阅读 · 0 评论 -
vue-pdf打印乱码、方块字、无法打印
vue-pdf出现打印乱码、方块字、无法打印项目中需要用到vue-pdf组件来进行pdf的预览和打印,但使用vue-pdf打印图片没有问题,打印字体转码的PDF文件流会出现方块字。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LlZzHUnq-1613976037862)(C:\Users\HP\Desktop\40c90c2a1fe55a3cb5478e1d3f27ebb.png)]各大社区找解决办法,有修改pdfjsWrapper.js源码的报错(loadingTa原创 2021-02-22 14:42:11 · 2210 阅读 · 1 评论 -
PDF二进制数据流的阅览与打印
PDF二进制流数据的阅览与打印安装:npm install --save vue-pdf使用:在需要使用vue-pdf的页面中,使用到的pdf组件的关键代码就这两行。import Pdf from 'vue-pdf';<pdf :src="src2" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandle原创 2021-02-03 14:08:08 · 1484 阅读 · 0 评论 -
vue利用a标签点击下载保存图片
vue利用a标签点击下载保存图片想不调用接口直接下载保存图片,翻csdn把手都翻出血了。亲测一行代码搞定:把图片地址设在download属性上,而不是放在href中:关键代码: <a href="" :download="item.src" class="download"></a><template> <div class="contain"> <el-dialog title="图片预览" :visible.sync="原创 2021-01-26 17:36:07 · 2231 阅读 · 4 评论 -
Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔
Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔好长时间没用css动画效果了,今天恰好在封装某个组件时用上,随笔记下。<template> <div class="contain"> <div v-show="isShow" class="scrollBox"> <p class="font">NEW</p> </div> </div></template><原创 2021-01-25 10:49:58 · 758 阅读 · 1 评论 -
原生JS实现分页及简单搜索
后端不支持分页,前端背起分页锅项目中有时会出现后端不支持分页和查询的情况,需要前端来处理这个需求。直接上代码,看得更舒服。仅需前端分页consumersList指后台返回的所有接口原始数据(思路:一次性把所有的数据全拿到,再让前端做假数据的渲染),即需要分页处理的数据。tableData指渲染到table组件中已完成分页的数据。pagingFunc:该方法可写在utils方法库中再导出更方便//写在方法库中比较方便const pagingFunc = (array, page, size)原创 2021-01-20 11:19:12 · 557 阅读 · 1 评论 -
修改elementUI轮播图鼠标划入轮播暂停的原生效果
elementUI Carousel 走马灯原生效果:当鼠标划入轮播图的原生效果会使轮播图停止轮播。现要求鼠标划入轮播不停止,单单因为这个小需求而用原生JS重构一个轮播图又太浪费。在node_modules—>element-UI—>packages中查看Carousel源码会发现:源码中加了两个鼠标移入事件。如何修改原事件呢?直接操作轮播组件的DOM元素,将有的函数替换掉就行了: <el-carousel ref="carousel" :interval="3000"原创 2021-01-19 16:32:15 · 2486 阅读 · 9 评论 -
Vue禁止浏览器自动填充
如何禁止谷歌浏览器自动填充密码这里以elementUI为例:有给input加autocomplete="off"的 <el-form-item label="原密码:" prop="oldCode"> <el-input v-model="form.oldCode" placeholder="请输入原密码" autocomplete="off" clearable></el-input> </el-form-i原创 2021-01-07 10:42:40 · 2492 阅读 · 3 评论