D1:Vue2
Vue系列
柒个M
兴趣是最好的老师!!!
展开
-
有关el-popover在屏幕尺寸改变后不显示问题
el-popover默认将弹窗放到body中,如图:根据官方文档,只要修改弹框el-popover放入到父级div中即可:配置如下::append-to-body="false":popper-options="{ boundariesElement: 'body', gpuAcceleration: true, positionFixed: true, preventOverflow: true}"配置后,在查看元素,发现,已经不在body下,而是放在.原创 2021-12-13 11:34:07 · 1706 阅读 · 0 评论 -
VueCli3.0搭建的项目,打包后访问页面空白
1、router.js中注释掉: // mode: 'history',2、在根目录下创建一个vue.config.js文件:module.exports = { publicPath:"./",}再次打包,就可以直接访问 index.html文件啦!!原创 2021-06-22 15:39:52 · 264 阅读 · 0 评论 -
el-tree实现拖拽节点到其他区域
简单的效果图:代码实现:html: <!-- 拖拽区域 --> <div class="down_panel"> <el-tree :data="treeData1" ref="tree1" class="tree" node-key="id" draggable de.原创 2021-04-06 14:15:21 · 4538 阅读 · 6 评论 -
使用canvas画图形
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images图形效果:代码实现: var cartFlag = true; var personFlag = true; if (personFlag) { // 人的图形 canvas.beginPath(); // .原创 2021-03-23 11:31:40 · 415 阅读 · 0 评论 -
Vue项目访问图片不显示的问题
因为public访问默认 / 所以直接在后面写图片路径即可例如我使用canvas引入图片 canvas.beginPath(); canvas.rect(60, 0, 60, 60); canvas.fillStyle = rgb; canvas.fill(); canvas.closePath(); // 车图片填充 var imgCart = new Image(); // 创建一个<原创 2021-03-23 11:08:47 · 1516 阅读 · 0 评论 -
The data property “flags“ is already declared as a prop. Use prop default value instead.
这种情况,一般是父组件传了个参数lang,但是在data里面又定义了lang把data里面的lang删除就行了。原创 2020-11-19 10:33:42 · 962 阅读 · 0 评论 -
Property or method “option“ is not defined on the instance but referenced during render. Make sure t
完整的报错信息如下:原因:你的“”xxx‘’属性或者"xxx"方法没有定义,查看你的data或者methods或者prop解决:export default { data(){ return{ xxx:"" }, methods:{ xxx(){} } },}原创 2020-11-19 10:36:09 · 3769 阅读 · 0 评论 -
解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location 的问题
最近写项目的时候, 重复点击路由会在控制台报这样的错误。它的提示是 避免到当前位置的冗余导航。 简单来说就是重复触发了同一个路由。这个错误是 vur-router更新以后新出现的错误。(我使用的是 vue-router 3.2.0)出现的 但是 (vue-router 3.0.6) 没有出现。 但是也不排除是我的 3.0.6之前做过配置。解决这个错误也非常简单。只需要在router /index的页面里面 加入const originalPush = VueRouter.prototype.原创 2021-01-20 13:55:33 · 7896 阅读 · 2 评论 -
Vue前端微服务报错
原因是:没有开始pms-transformation-operation-ui该项目原创 2021-02-05 10:38:15 · 415 阅读 · 3 评论 -
node安装依赖总报错: npm install
在安装项目依赖的时候,总报错,尝试了卸载node后重新安装,没有用,清理node的缓存等操作,也无济于事,最后试了试之前被我直接忽略的方式,就是用cnpm安装依赖,竟然成功了,我。。。。...原创 2021-03-15 15:36:08 · 2258 阅读 · 0 评论 -
Vue路由的一些知识点
1、把组件按组分块: 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。 Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。{ path: '/user/login', name: 'login', component: () => import(/* w...原创 2021-03-16 14:46:14 · 184 阅读 · 0 评论 -
el-tree自定义树前小三角形两种方法
1、更改content: ::v-deep .el-icon-caret-right:before { content: "\e723"; font-size: 16px; } ::v-deep .expanded:before { content: "\e722"; font-size: 16px; } ::v-deep .el-tree-node__expand-icon.expanded {原创 2021-01-26 18:07:00 · 2233 阅读 · 1 评论 -
Vue搭建项目时报错:error Empty block statement no-empty
创建项目时,控制台出现报错信息,页面中代码空格引起的,具体原因还是eslint校验:报错信息:先来看下Vue的版本:Vue4.0中安装使用eslint的两种方式:1、使用npm安装npm install eslint --save-dev2、安装 vue 专门的 ESLint 规则插件@vue/cli-plugin-eslintnpm i @vue/cli-plugin-eslint --save-dev3、添加配置文件配置文件常用的方法有两种:3-1、.原创 2021-01-07 11:07:56 · 16130 阅读 · 1 评论 -
Vue中table实现行的上移和下移
最上方的行不可以再向上移动:所以向上的按钮禁用,同理最下面的一行也是html代码:<el-table-column label="操作" align="center" width="250px" fixed="right"> <template slot-scope="scope"> ..原创 2021-01-05 16:42:10 · 3037 阅读 · 4 评论 -
vue中sessionStorage的使用
#:localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。#:sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。#:提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 改数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。1.方法sessionStorage.key(int index) //返回当前 sessionSto.转载 2020-11-30 17:03:11 · 14856 阅读 · 1 评论 -
vue实现页面跳转并传参的八种方法
我们知道,在vue中每个页面都需要在路由中声明,就是在router/index.js中写下面代码:import Vue from 'vue'import Router from 'vue-router'import Test from "../components/Test";Vue.use(Router)export default new Router({ mode: 'history', routes: [ { path: '/t', n原创 2020-11-30 16:07:51 · 61622 阅读 · 4 评论 -
vue高级组件之provide / inject
在vue中不同组件通信方式如下1.父子组件,通过prop2.非父子组件,通过vuex或根vue转载器通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信1.下面是a.vue<template> <div class="test"> <son prop="data"></son> </div></template>2.下面是son.vue<template&..原创 2020-11-25 10:00:53 · 1066 阅读 · 0 评论 -
Cannot read property ‘forEach‘ of undefined
项目要上线,发现控制台报很多错误,于是乎,改呗看到这个forEach ,你会想到这个是遍历对象用的,因为要遍历对象,而对象恰好又是undefined的,所以就会报这么一个错误,没有属性。解决思路;在遍历对象之前先进行判断,判断对象是否为空,然后再去遍历该对象,就会成功避免这个问题。...原创 2020-11-19 10:25:19 · 2332 阅读 · 0 评论 -
Vue中vue-awesome-swiper,一行显示多个图片
1、Vue中安装vue-awesome-swipernpm install vue-awesome-swiper --save-dev2、局部引入<template> <div class="component-style"> <div style="width: 100%;height: 300px;"> <swiper :options="swiperOption" ..原创 2020-11-13 10:17:16 · 5279 阅读 · 3 评论 -
Vue安装使用swiper报错
最近 Vue 项目中用到的触摸滑动插件 Swiper,执行npm install swiper vue-awesome-swiper --save安装 Swiper 后,在 main.js 中进行引入,import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/css/swiper.css'运行项目出现 ERROR:执行npm install --save swiper/css/swiper.css后提示无法安装问...原创 2020-11-11 10:19:01 · 2544 阅读 · 1 评论 -
el-table中改变某一行数据中的一个,控制台数据变,页面不渲染的坑
在一个报警音管理的页面中,每次点击试听的时候,需要把‘试听’ 更新为 ‘停止’,起初我们给row.play=0时,显示为 试听,row.play=1时显示为停止,但是在代码中每次为row.play赋值时,虽然代码运行,但是页面视图并没有更新。经过多种资料的参考,发现table表格数据,每次只能监听整个row的变化,row中某个属性变化时,是无法追中的。所以在改变row.play时,我们先设置row.play=1, 再this.$set(tableData,index,row) 来更新ta原创 2020-11-09 15:12:10 · 2295 阅读 · 0 评论 -
el-table点击一行数据,checkBox自动勾选Demo,table实现行内编辑
效果:代码:<el-table ref="table" border :height="tableHeight" v-loading="loading" :data="tableDate" @selection-change="selectItem" @row-click="原创 2020-10-26 09:59:11 · 2526 阅读 · 0 评论 -
el-table中echeckBox实现单选,以及控制工具栏是否禁用;
1、首先官网解释下:@select的作用和@selection-change的用法:例子:选择el-table中的checkbox框后,控制工具栏中的按钮的显示隐藏:一: 选择一条数据,勾选框框时,让工具栏按钮显示:二:取消勾勾后,工具栏的按钮禁用:以下方法,是具体的实现思路:<el-table ref="table" :data="tableD...原创 2020-10-22 12:01:38 · 606 阅读 · 0 评论 -
el-table实现行内编辑功能
远离其实很简单:就是在获取table数据后,对数组进行遍历,每一个都添加上一个show属性,并赋值为false,然后在每个el-table-column中进行判断:原理就是这样,其他的控件比如:选择框、时间框、数字选择框等等吧,都可以适用。<el-table-column prop="name" label="地址"> <template scope="scope"> // 如果show=true的话,就显示el-input原创 2020-10-21 18:49:26 · 11329 阅读 · 2 评论 -
vue-cli 4 跑项目时卡在 ‘98%’ after emitting CopyPlugin 无法运行
项目启动的时候突然卡在这里:问题:引入图片的时候,没有写地址解决办法:路径不能为空原创 2020-10-15 09:38:51 · 1021 阅读 · 0 评论 -
关于echarts和tab结合,echarts比例缩小的问题
当一个页面中既有echarts又有Tab标签,且echarts图不止一个时,会出现echarts图被压缩的问题,解决如下,亲测有效:在引入echarts组件时,添加一个v-if条件,在每次切换到该tab页时,才会加载echarts: <el-tabs v-model="activeName" @tab-click="handleClick" > <el-tab-pane label="故障率" name="gzl"> <Echart原创 2020-09-24 11:10:49 · 744 阅读 · 0 评论 -
[Vue-Treeselect Warning] Unloaded branch node detected. “loadOptions“ prop is required to load its
使用Vue treeselect时出现了[Vue-Treeselect Warning] Unloaded branch node detected. “loadOptions” prop is required to load its children.错误。原因是treeselect需要的数组children如果为空,应该直接把这个children属性去掉,否则就会报上述错误。而后端传递过来的数据中,当children为空时,赋值为null,所以导致了报上述的错误。解决方案:在treeselect原创 2020-09-21 12:29:23 · 6346 阅读 · 1 评论 -
Echartst图表的封装---v-charts
官网地址:https://v-charts.js.org/#/在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。1、安装npm i v-charts echarts -S2、完整引入// main.jsimport Vue from 'vu.原创 2020-09-18 16:57:08 · 1673 阅读 · 0 评论 -
封装el-selected
在开发项目中,发现表单上有很多el-selected组件,于是,倒不如把它封装起来,减少代码量,可以实现复用。SelectedPackage组件:<template> <div> <el-select v-if="selectedData.type==='select'" v-model="selectedValue" :multiple="sele原创 2020-09-18 16:42:26 · 420 阅读 · 0 评论 -
@vue-cli4.0或者3.0没有build文件夹,如何请求json文件
整了一上午,终于成功了。原来老版本的vue项目中有build文件夹,可以直接修改webpack.dev.conf.js文件即可;而新版本的vue项目已经没有了,但是可以在vue.config.js中进行配置一些我们需要的配置;废话不多说,上代码:首先我的vue版本是:第一步:在public文件夹中创建一个名叫data的文件夹,用来存放我们的json文件:home.json{ "data": { "skuDetailList": [ {原创 2020-09-16 12:28:33 · 8257 阅读 · 1 评论 -
echarts-折线图(折线虚实/颜色与拐点样式修改)
https://blog.csdn.net/duyan_s/article/details/78833845?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase原创 2020-08-21 17:27:07 · 1769 阅读 · 0 评论 -
Vue基础--下拉tree
<el-form-item label="选择部门" class="formItem_self"> <treeselect :multiple="false" :options="xldata" placeholder="选择部门" v-model="form.dlxl" @select="selectLinName" ...原创 2020-08-20 13:28:42 · 306 阅读 · 0 评论 -
Vue基础--封装el-upload的放大、下载、删除功能的实现
1、封装el-upload组件,一般放在components文件夹中:<!--公共附件列表--><template> <div> <el-upload :action="baseApi+'/rd/fileUpload/uploadFile?token='+token" :on-success="uploadsuccess" list-type="picture-card" :data="{'objId':objId}" :auto-upl...原创 2020-08-20 11:36:33 · 1423 阅读 · 0 评论 -
el-table单击某行,背景色改变:
<el-table highlight-current-row="true" @row-click="openDetails"></el-table><script> methods: { openDetails(row) { this.crud.selections = []; this.crud.selections.push(row); t.原创 2020-06-08 16:00:30 · 2519 阅读 · 0 评论 -
input去掉边框样式以及触发时的边框样式
input { border: 0; // 去除未选中状态边框 outline: none; // 去除选中状态边框 background-color: rgba(0, 0, 0, 0);// 透明背景 }原创 2020-06-08 15:47:28 · 696 阅读 · 0 评论 -
校验大全
/** * 校验 包括中文字、英文字母、数字和下划线 * 登录账号校验 */export function validateAccount(rule, value, callback) { let acount = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/ if (value && (!(acount).test(v...原创 2019-09-27 17:09:32 · 376 阅读 · 0 评论 -
Vue实现三级联动样式二
页面的效果图展示:vue.js文件:<template> <div class="linkage"> <el-select v-model="sheng" @change="choseProvince" placeholder="省级地区"> <el-option v-for="item in province" :k...原创 2019-09-18 14:42:41 · 951 阅读 · 0 评论 -
Vue实现三级联动样式一
转载地址: https://blog.csdn.net/izengjing/article/details/81354908#commentBoxElement UI 中国省市区级联数据页面样式:安装npm install element-china-area-data -S在线示例地址在此,网页打开会比较慢使用import{province...原创 2019-09-18 10:37:14 · 1371 阅读 · 0 评论