呆子小木心的博客

vue项目中使用qrcode.js生成二维码图片出现的一些问题

element ui的组件el-date-picker 禁止选择当前日期之前的日期

vue项目打包发布出现的报错

vue 前端下载excel文件模板

elementUI组件中使用el-image的预览属性preview-src-list

Vue里面的一个坑：vue.esm.js?c9fd:628 [Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘0’)”；1，起因：在页面使用到的数据是嵌套多层的时候，比如是拿的是数组的第三层的数据进行展示，像data[0][0]，在页面进行初始化的时候，会报错：Cannot read properties of undefined (reading ‘0’)；但是页面是可以正常使用的

element-ui el-table 数据变化时表格出现抖动项目有个需求，有一个表格是通过改造el-table来适应需求，表格的head和body数据都是通过v-for渲染遍历生成的，通过多选框Checkbox来勾选表格头部需要展示的数据，进行切换到时候表格出现抖动不美观。部分原代码：<el-table :data="tableData" border class="spec-table"> <el-table-column v-for="(item,index) in

elementui 下拉框滚动加载数据-vue项目1，新建一个js文件：directives.js，写入如下：// directives.js import Vue from 'vue' Vue.directive('loadmore', { bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-sele

npm下载依赖报错npm ERR! code EPERMnpm ERR! syscall unlinknpm ERR! path E:\code\20200212\web\cbos2.0-wenlv-wx-cli\node_modules\.staging\caniuse-lite-70323fe6\data\features\document-scrollingelement.jsnpm ERR! errno -4048npm ERR! Error: EPERM: operation not p

uniApp使用高德地图api1，在自己项目中的/src/common/js中的weixin.js写入，没有就新建文件，（具体目录因自己项目而议）export const weixin = {/* 获取地理位置接口 */ getLocation: function (callback) { let option = { type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: fun

vue使用原生的高德地图api高德地图api的官方网址：https://lbs.amap.com/demo/javascript-api/example/callapp/markonapp需要去官网申请要使用的对应功能的Key值，具体步骤自己上网查。1，在vue项目的index.html文件中的head标签中引用：<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/><scrip

Vue watch监听路由不生效，没反应直接上代码： watch: { $route: { immediate: true, // 一旦监听到路由的变化立即执行 handler(to, from) { console.log("监听路由：" + JSON.stringify(to.name)); }, }, }这样监听路由就能解决问题！...

解决：vue项目报错：Avoided redundant navigation to current location: “/suggestPageIndex”在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复解决：router文件夹下面的index.js中加上下面几句代码，搞定 // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const origi

Vue页面跳转后当前位置不在顶部的解决办法(几种办法)1，在main.js中添加如下代码：// 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); })//或者router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0 // firefox documen

关于vue 里:class 的几种使用方式关于:class的使用 结合自己的实现 整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用 也是类似的一， class1 自定义class 通过vue computed 计算属性 实现 我的class 是名称+时间戳，是独一份的，可以作为id角色使用。html:<div :class="_module"></div>js:data(){ return { ar

解决el-menu动态渲染菜单数据后折叠菜单栏时文字不隐藏1，安装 vue-fragmentcnpm i vue-fragment --save2，在main.js中引入// main.jsimport Fragment from ‘vue-fragment’Vue.use(Fragment.Plugin)3，使用fragment标签<fragment v-for="item in menuData" :key="item.id"> <el-submenu v-i

按下回车，如何让下拉菜单隐藏（或者失去焦点，因为下拉项要显示的前提是获取焦点）<!--@visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false--><el-select style="width: 100%;" v-model="form.provinceId" placeholder="省份" ref="selectProvinces" @visible-change="isShowSelectOptions" @ch

vue项目中遇到点击查询按钮可以查出数据，点击回车键也能查出数据，所以就想点击回车键时调用查询方法。示例代码如下：一、第一步： 给input按钮绑定@keyup.enter；如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created或者mounted里，直接绑定在document上。 <div class="btn"> <!--如果是封装过的按钮，不是原生的按钮，需要加上.native才能生效--&

vue3.0 pc端自适配方案1.引入插件使用yarn或者npmyarn add px2rem-loader -Syarn add postcss-px2rem -Syarn i lib-flexible -Snpm install px2rem-loader -Snpm install postcss-px2rem -Snpm i lib-flexible -S2.vue3.0由于没有build配置文件，在根目录新建文件vue.config.js（用来解决跨域或者配置文件）const

Vue项目优化: 使用vue-lazyload插件实现图片懒加载vue-lazyloadvue-lazyload插件用于 vue 项目中图片的懒加载npm地址：https://www.npmjs.com/package/vue-lazyloadvue-lazyload安装通过npm安装 npm install vue-lazyload --save-dev通过CDN引入使用<script src="https://unpkg.com/vue-lazyload/vue-lazylo

出现问题的原因：项目使用了eslint 规范代码，而你的代码违反了规范第一种方案（推荐）：通过编辑器格式化代码，统一缩进方式第二种：关闭eslin 对空格和tab的校验vue 3.0版本以下：1，找到build->webpack.base.config.js。注释或者去掉对eslint-loader的引用。{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', includ

elementUi在vue项目中改变 SCSS 变量来实现自定义主题Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-ch

elementui弹出层中的tabs出现蓝色边框的问题可以在当前页面的样式中添加.navHead /deep/.el-tabs__item:focus.is-active.is-focus:not(:active) { box-shadow: none; border-top-left-radius: 20px; border-top-right-radius: 20px;}...

VUE 自定义下拉框时，点击其它区域触发事件（关闭、修改等）this.$el是在mounted中才会出现的，在created的时候是没有的所以我们引用的时候，它指的是当前组件的的元素。$el读取的是组件实例挂载的dom元素。($el指向当前组件template模板中的根标签)。Vue.js//contains()，js原生方法，用于判断DOM元素的包含关系；//需要注意的是：它以HTMLElement为参数，且返回布尔值。mounted(){ document.addEventListe

VUE 事件里写了retrun后，后面代码却还是在执行项目中写了一个函数：判断数组，如果有不符合条件的地方，就return，结束函数；否则继续进行后续处理。selectData() { $("input[name='a[]']").each(function(){ var vid=$(this).val(); if (vid==null || vid==""){ alert("我最帅");

使用el-table组件加上分页后，多选翻页和查询后仍保持选中状态及回显.实现表格翻页和查询后仍保持选中状态一，实现表格翻页和查询后仍保持选中状态在el-table中加 :row-key=“getRowKeys”，在type为selection的el-table-column中添加:reserve-selection=“true”，在js的methods中加getRowKeys方法，即可实现table翻页及搜索查询后仍保持之前的选中状态；<el-table ref="multiple

vue模糊查询使用indexOf()报错Cannot read property ‘indexOf’ of null"自己手写一个了模糊查询的事件1，原本报错的代码，报错Cannot read property ‘indexOf’ of null"。查看后发现使用filter循环后赋值给的e，不被indexOf()所识别或者是为空等等。// 查询按钮事件 queryMessage() { //报错的代码 var self = this; var newTables =

el-table表格超出部分显示省略号，去掉鼠标悬浮显示1.el-table是有这个控制属性的：:show-overflow-tooltip=“true”<el-table-column align='center' prop="description" label="描述" min-width="280" :show-overflow-tooltip="true"></el-table-column>2.如果需要去掉鼠标悬浮显示的全部内容可以设置样式，因此需要修改一下。注

使用Vue-cli3.x开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chunk {n} failed.或者Uncaught SyntaxError: Unexpected token < 的错误vue路由配置如下：const router = new VueRouter({ mode: 'history', routes: [ { path: '*', co

更改vue项目的浏览器图标与标头修改public文件里面的index.html文件，如果不在index.html不放在public文件夹里面的，在根目录找到或者其他地方 <link rel="icon" type="image/x-icon" href="<%= BASE_URL %>/wb_school.svg" /> <title>XXXXX管理平台</title>在根目录中找到vue.config.js中加上pwa: { iconPa

创建vue.config.js并配置：module.exports = { publicPath:'./', //在打包时添加这段代码，处理静态资源找不到问题 runtimeCompiler:true,//在启用vue-router路由时需要配置该带码否则会报错 devServer: { open: false, //是否自动弹出浏览器页面 host: "localhost", port: '8080', https:

第一种indext.html中用script引入<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>组件中调用方式<script >import { Component , Vue } from 'vue-property-decorator';declare let echarts:any; //要先声明@Component

报错：Parameter ‘XXX’ implicitly has an ‘any’ type.解决方法tsconfig.json添加"noImplicitAny": false，或者 “strict”: true,改为false{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDe

解决vue+ts中报错：Cannot read property ‘push’ of undefined一，出现的问题：在vue项目中，用TypeScript定义了一个数组，遍历操作的时候，进行push操作时，查看控制台竟然出现“Cannot read property ‘push’ of undefined”错误, 代码如下：public arr: Array<string>;public created() { for(let i = 0; i < this.rout

vue点击按钮刷新当前页面简单粗暴的方法： window.location.reload();较为温柔的方法：this.$router.go(0)

VUE关闭代码规范性检测在vue项目根目录下，创建 vue.config.js :module.exports = { lintOnSave: false};完美解决！！

npm运行/打包项目报错：UnhandledPromiseRejectionWarning: TypeError: loaderContext.getResolve is not a function使用的是stylus/less/sass这项技术，不过在安装stylus/less/sass后，运行vue项目后报错：UnhandledPromiseRejectionWarning: TypeError: loaderContext.getResolve is not a function，查了之后才知道这

在vue项目中配置pug解析支持vue-cli 2+ 配置:下载包:npm i -D pug pug-html-loader在build/webpack.base.conf.js 的 module 中添加规则:module: { rules: [ { test:/\.pug$/, loader: "pug-html-loader" }, // 省略其他规则 ] }好了启动或重启项目,即可开心的尝试了

在vue项目中stylus的安装和简单使用建立好项目后安装stylusnpm install stylus stylus-loader --save-dev在.vue文件的style块中使用这个很简单，只要在style标签加上lang="stylus"就可以了<style lang="stylus">#app{ width 800px height 600px}.audioPlayer{ position relative top 50px}</sty

vue + ts搭建项目安装vue-cli3npm install -g @vue/cli创建vue项目vue create test // test是项目名![在这里插入图片描述](https://img-blog.csdnimg.cn/2020120317420556.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjNl82