Vue
Vue
S筱潇S四维Smile
代码搬运工~前端engineer
展开
-
拖动和调整div大小vue-draggable-resizable组件
拖动和调整div大小vue-draggable-resizable组件原创 2023-01-04 16:31:49 · 2776 阅读 · 0 评论 -
Vue packages version mismatch If you are using vue-loader@>=10.0, simply update vue-template-compile
Vue packages version mismatch原创 2022-12-21 15:40:05 · 3651 阅读 · 0 评论 -
iview UI 的table组件设置复选框选中状态
iview UI 的table组件设置复选框选中状态原创 2022-12-20 16:13:25 · 1285 阅读 · 0 评论 -
iview UI的Table组件数据刷新但是页面不刷新的问题
iview UI的Table组件数据刷新但是页面不刷新的问题原创 2022-11-16 19:25:42 · 1522 阅读 · 0 评论 -
npm init vite@latest 构建项目报错SyntaxError: Unexpected token ‘.‘解决办法
npm init vite@latest 构建项目报错SyntaxError: Unexpected token '.'解决办法原创 2022-08-01 17:28:30 · 4042 阅读 · 1 评论 -
iView UI 使用input组件自动获取光标方法
iView UI 使用input组件自动获取光标方法原创 2022-07-15 17:20:32 · 546 阅读 · 0 评论 -
VUE监听页面滚动到底部方法
methods: { scrollBottom() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = document.documentElement.clientHeight; let scrollHeight = document.documentElement.scrollHeight; i.原创 2022-04-29 12:10:41 · 3839 阅读 · 0 评论 -
el-cascader级联选择器清空初始化方法
<el-cascader class="w500" ref="cascader" :options="options" :props="props" @change="cascaderChanged"></el-cascader>this.$refs.cascader.$refs.panel.checkedValue = []; // 清空选中值this.$refs.casc..原创 2022-04-28 17:31:38 · 2086 阅读 · 1 评论 -
vue递归组件eventBus策略解决父子组件通讯问题
一、首先你需要做的是创建事件总线并将其导出,以便其它模块可以使用或者监听它。 创建一个bus.js文件代码如下import Vue from 'vue'export var bus = new Vue()二、父组件在created里面定义$on监听事件import {bus} from '../../bus.js' created(){ bus.$on('bindFuction', (res) => { console.log(re...原创 2022-04-22 18:58:37 · 1471 阅读 · 0 评论 -
iView UI常用组件DatePicker清空技巧
清空DatePicker(日期选择器)的方法:this.$refs.element.handleClear()清空TimePicker(时间选择器)的方法: this.$refs.element.handleClear()清空Select组件的方法:this.$refs.element.clearSingleSelect()清空Table组件的方法: this.$refs.element.selectAll(flase)清空input组件的方法:直接让绑定的变量等..原创 2022-04-15 20:44:54 · 2083 阅读 · 0 评论 -
JavaScript距离当前日期倒计时的方法(Vue项目)
项目中,会遇到有过期时间的倒计时,使用方法如下:export default { data() { return { day: 0, //天 hour: 0, //时 minute: 0,//分 second: 0,//秒 timer: null, expireat: '2022-05-01',//过期时间 }; }, me原创 2022-04-15 20:30:55 · 853 阅读 · 0 评论 -
iView UI 使用page分页添加跳转按钮-输入页码后点击跳转
使用电梯,快速跳转到某一页在iview里,分页组件的电梯功能输入页码后需要按回车才能跳转这让不知道需要按回车的人摸不着头脑呀,所以呢,动动手写个跳转按钮~<div class="overflow-h mt10"> <span class="fr mt5 ml10"> <Button class="btn-page mr10" type="primary" size="small" @click="goElevat原创 2022-04-08 15:52:40 · 682 阅读 · 1 评论 -
Vue packages version mismatch:- vue@2.6.14 - vue-template-compiler@2.6.11解决方法
起因vue执行了npm i vue@2.6.14的更新命令, 就会出现如下提示: error in ./src/pages/system/permissionsmanagement.vueModule build failed: Error:Vue packages version mismatch:- vue@2.6.14 (/Users/dx/Documents/2021works/TaiTaiLeYingXiaoPC/node_modules/vue/dist/vue.runt原创 2022-03-24 14:59:30 · 11585 阅读 · 0 评论 -
解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能视而不见。解决方案:方案一:只需在 router 文件夹下,添加如下代码:// src/router/index.jsVue.use(Router)const router = new Router({ routes}) const VueRouterPush = Router.prototype.pushRouter.prototype.push = function push (to) { retu原创 2022-03-17 14:41:38 · 1083 阅读 · 0 评论 -
vue中处理base64图片的显示
<img :src="'data:image/png;base64,'+imgurl" alt=""> <script>new Vue({ data:{ imgurl:"base64路径" }})</script>原创 2022-02-15 22:58:49 · 4615 阅读 · 0 评论 -
vue.min.js:6 TypeError: Cannot read properties of undefined (reading ‘_wrapper‘)
最近项目中总是出现这个报错,会影响组件的显示解决办法:检查html标签中是否引用未定义的方法,在methods添加方法名即可~原创 2022-02-10 16:49:16 · 5667 阅读 · 0 评论 -
vue项目H5 跳转微信小程序
1. 绑定域名登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。2. 引入JS文件在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)备注:支持使用 AMD/CMD 标准模块加载方法加载。3.原创 2021-03-12 16:30:27 · 10326 阅读 · 9 评论 -
微信小程序富文本组件mp-html
功能介绍支持在多个主流的小程序平台和uni-app中使用 支持丰富的标签(包括table、video、svg等) 支持丰富的事件效果(自动预览图片、链接处理等) 支持设置占位图(加载中、出错时、预览时) 支持锚点跳转、长按复制等丰富功能 支持大部分html实体 丰富的插件(关键词搜索、内容编辑等) 效率高、容错性强且轻量化(≈24.5KB,9KB gzipped)查看功能介绍了解更多使用方法原生平台 npm方式 在项目目录下安装组件包 ...转载 2021-11-12 11:49:01 · 2248 阅读 · 0 评论 -
[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)
在vue项目中,使用echarts报一下的错误:[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化,利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象<div id="mian" ref="chart" >原创 2021-11-11 17:10:37 · 4584 阅读 · 1 评论 -
Module build failed: Error: ENOENT: no such file or directory 解决报错
解决方法:npm重新编译node-sassnpm rebuild node-sass原创 2021-10-28 17:03:02 · 1776 阅读 · 0 评论 -
vue 监听div滚动事件
使用场景,列表下拉刷新数据:<div class="table-box" @scroll="divscrollFn($event)"></div>css 设置overflow-y: auto;.table-box{ width: 90%; margin: 1rem auto; height: 20rem; overflow-y: auto;}js监听方法:divscrollFn(event){ //监听滚动事件 let el .原创 2021-04-26 11:43:19 · 1181 阅读 · 0 评论 -
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime
Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72)For more information on which environments are supported please see:https://github.com/sass/node-sass/releases/tag/v4.9.0 a.原创 2021-03-17 10:40:30 · 212 阅读 · 0 评论 -
vue项目 es6语法报错
1.不识别es6语法扩展运算符...报错...是es6的对象扩容运算符,目前babel暂不支持,需要引入新的包来解决,要安装一个babel插件翻译对象展开运算符语法。解决方法:npm install babel-plugin-transform-object-rest-spread根目录下创建 .babelrc文件.babelrc文件中写:{ "presets": [ ["es2015", { "modules": false }] ],原创 2021-03-02 20:37:17 · 4048 阅读 · 0 评论 -
vue启动项目报错 Couldn‘t find preset “es2015“ relative to directory
解决方法1、安装 ES 标准npm install babel-preset-es2015 --save-dev2、在webpack.base.conf.js文件中加入如下代码module: { loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', ...原创 2021-03-02 20:34:43 · 382 阅读 · 0 评论 -
ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.3/fse-v1.2.3-
npm install 时报错:原因:node版本太高,我的是v14.16.0。解决方案:换个低版本的node就行了,然后npm install后就可以了。现在低版本nodejs,重新安装即可https://nodejs.org/zh-cn/download/releases/原创 2021-02-24 18:06:17 · 1242 阅读 · 0 评论 -
vue draggable 火狐拖拽搜索bug解决
created() { document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); } },原创 2020-12-29 09:44:06 · 564 阅读 · 0 评论 -
mpvue 微信小程序设置背景音乐
在mpvue小程序项目中,设置背景音乐:1、在公共js中设置一个变量,创建背景音乐例,我的是在utils文件下的global.js//背景音乐const bgrAudioContext = wx.createInnerAudioContext();export default { bgrAudioContext:bgrAudioContext}2、根目录下的main.js文件引入global.jsimport Vue from 'vue'import App fro原创 2020-11-30 15:02:29 · 520 阅读 · 0 评论 -
{ parser: “babylon“ } is deprecated; we now treat it as { parser: “babel“ }.
npm run dev 错误提示:{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.项目中找到 \node_modules\vue-loader\lib\template-compiler\index.js//将以下代码if (!isProduction) { code = prettier.format(code, { semi: false, parser: 'babylon' }原创 2020-09-07 16:27:30 · 460 阅读 · 0 评论 -
Uncaught (in promise) Error: Avoided redundant navigation to current location: “/index“. 解决方法
在router.js中加入以下代码就可以const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}如果你的改了push还是没有生效,修改路由replace方法,阻止重复点击报错const originalReplace = VueRou原创 2020-09-04 14:18:09 · 3198 阅读 · 0 评论 -
微信小程序保存canvas绘制的图片到本地,拒绝图片授权后继续授权
canvasToImage() { // canvas画布转成图片 var that = this; wx.canvasToTempFilePath({ quality: 1, fileType: 'jpg', canvasId: 'mycanvas', success: function(res) { wx.hideLoading(); ...原创 2020-05-21 21:28:36 · 606 阅读 · 0 评论 -
Vue自定义指令—— 完美解决H5页面不同尺寸屏幕的适配问题
H5适配一直是一个头疼的问题,基于vue框架针对H5在不同分辨率的手机做出来一套适配方案,具体如下:设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的: width:750px , height:1108px(可使用该方法应对其他设计图尺寸)一、以设计图的尺寸为标注的做一套适配方案,就是出完美高度比:function getResheightAndWidth() { ...原创 2020-01-17 16:09:15 · 2021 阅读 · 0 评论 -
vue中进入详情页记住列表滚动位置keep-alive解决
一、配置路由 keepactice:true { path: '/index', name: 'index', component: index, meta: { keepalive: true // 组件是否需要被保存 } }二、在App.vue页面当中,将需要保存的组件通过路由标签r...原创 2020-01-07 15:45:10 · 808 阅读 · 0 评论 -
mpvue解析富文本mpvue-wxParse
1.参考git:https://github.com/F-loat/mpvue-wxParse2.安装npm i mpvue-wxparse3.使用<template> <div> <wxParse :content="article" @preview="preview" @navigate="navigate" /> &l...原创 2019-12-18 17:41:38 · 368 阅读 · 0 评论 -
解决H5的a标签的download属性下载service上的文件/图片出现跨域问题
1.通过点击下载多媒体文件(图片/视频/文件等)最简单的方式:<a href='url' download="filename.ext">下载文件</a>如果url指向同源资源,是正常的。如果url指向第三方资源,download会失效,表现和不使用download时一致——浏览器能打开的文件,浏览器会直接打开,不能打开的文件,会直接下载。浏览器打开的文件...原创 2019-11-12 14:08:51 · 3447 阅读 · 0 评论 -
vue打包后路径404问题解决方法
1、静态文件路径错误找到config文件夹下的index.js文件修改以下位置assetsPublicPath: './',2、在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改以下位置 publicPath:'../../'3、修改build文件夹下的webpack.prod.conf.js 修改以下位置p...原创 2019-11-12 13:58:24 · 3480 阅读 · 0 评论 -
vue.js高德地图实现热点图
1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>2.地图dom<div class="map-container"> <div id="container" style="width:1...原创 2019-04-18 11:32:19 · 4185 阅读 · 0 评论 -
vue.js中使用微信扫一扫,解决invalid signature问题
1、点击按钮,实现微信扫一扫功能:<template> <a class="btn" @click="scan">扫一扫</a></template>2、使用config接口注入配置信息,wx.config调用方法如下:(其中appId,timestamp,nonceStr,signature必须从后台获取,传参当前网页的UR...原创 2019-03-28 14:12:37 · 2901 阅读 · 0 评论 -
vue.js中H5使用微信摇一摇抽奖,判断摇一摇次数
微信摇一摇抽奖:export default { data() { return { SHAKE_THRESHOLD:4000,//定义一个摇动的值 last_update :0,//定义一个变量保存上次更新的时间 x:0, //定义xyz记录三个轴的数据以及上一次出发的时间 y:0, z:0, last_x :0, las...原创 2019-03-28 11:54:18 · 2652 阅读 · 4 评论 -
vue在个组件中给body加样式,或者给父级组件元素加样式
在h5项目中,经常遇到不同组件需要不同背景色,通过vue的生命周期来解决。这组件创建前设置我的样式,销毁之前移除我设置的样式。用以下方式给body添加样式:<script>export default { beforeCreate: function() { document.getElementsByTagName("body")[0].class...原创 2019-03-13 10:09:16 · 6554 阅读 · 0 评论 -
Swiper 在vue中的使用,loop=true获取真实index,数据更新刷新初始化swiper
1.安装npm install swiper --save-dev2.在组件中引用import Swiper from "swiper"import 'swiper/dist/css/swiper.css';3.初始化swipernew Swiper('.swiper-container', { pagination: '.swiper-pagination', ...原创 2019-03-12 10:32:59 · 6151 阅读 · 1 评论