![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue中平常遇到的一些问题的记录
星繁~
认真搞前端,深度学习计算机内部原理
展开
-
VUE使用BUS进行兄弟组件传值
1.新建bus.jsimport Vue from 'vue'export default new Vue2.在需要传值和接受值的vue文件中,各自引入bus.jsimport bus from '../../../utils/bus' // 在src目录的下面3.定义传值的方法,使用bus.$emit(‘methodName’,data)4.要接收值的组件里,使用bus.on(‘methodName’,val =>{ })5 具体示例如下所示index.vue<temp转载 2021-08-23 21:54:57 · 842 阅读 · 1 评论 -
大屏可视化
vue + echarts 制作大屏可视化源码地址:https://gitee.com/jianaili123/visualization.git布局思路:1. 使用em布局不使用rem的原因:如果当前可视化界面只是系统界面中的一个子界面,使用rem布局会影响到别的界面的样式,而使用em只是设置当前页面父元素的字体大小,不会影响到别的页面2. 采用相对布局(父元素) + 绝对布局(内容) 3. 分块进行布局展示,设置好每一部分的宽和高;...原创 2021-08-12 11:05:16 · 164 阅读 · 0 评论 -
Vue中引入使用scss变量报错:./node_modules/vue-style-loader!./node_modules/css-loader?
1.第一种情况:这是由于css解析的时候出了问题,解决方案为:https://blog.csdn.net/dt1991524/article/details/834132112. 第二种情况(自己遇到的):样式文件的引入方式导致<style lang="scss" scoped>@import "../styles/index.scss"; // 这种引入正确// @import url(../styles/index.scss); // 这种方式引入报错</style&g.原创 2021-07-15 09:19:36 · 6103 阅读 · 0 评论 -
vuex中的mapState、mapMutations、mapActions、mapGetters具体用法
vuex的映射语法store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ // state就是所有的数据 state: { data: '我是vuex里面的数据', data1: 0, data2: 1 }, mutations: { changeData (state, type) { state转载 2021-01-19 16:25:52 · 1063 阅读 · 0 评论 -
关于vuex的...mapActions、 ...mapState、...mapMutations和...mapGetters的理解
背景mapState、mapGetters、mapMutations、mapActions他们返回的都是一个对象,而vue的methods、computed也是一个对象。在js中不能把多个对象直接放到一个对象中,如:{{name:‘aaa’},{age:18}}是错的,故而需要特殊的方法处理。下面,将以mapState为代表详细展示:首先:我们先回顾一下vue的methods用法:<script type="text/javascript"> var app=new Vu转载 2021-01-19 16:12:17 · 447 阅读 · 0 评论 -
vue状态管理器
1. 什么是vuex?vuex 是一个专门为vue.js应用程序开发的状态管理模式。2. 为什么使用vuex?当我们遇到多个组件共享状态时,多层组件的传值非常繁琐,不利于维护,因此我们把组件的共享状态抽取出来,统一管理,在这种模式下,不管在哪个组件都可以获取状态或触发行为。3. vuex五种基本对象state:存储状态(变量)getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()mutations:修改状态,并且是转载 2021-01-19 14:01:41 · 190 阅读 · 0 评论 -
axios和后端交互时,参数需要写在body和query中同时写
网上写法axios.post('/api/xxx',{// post body},{ params: { // query }})自己封装的写法对方法进行第一层封装export function add(FUNCTION, data, params) { return request({ url: `api/${FUNCTION}`, method: 'post', data, params })}对方法进行第二原创 2021-01-18 20:56:15 · 1841 阅读 · 0 评论 -
axios入门——常用五种请求方法介绍(get、post、put、patch、delete)
写在前面axios中文说明为方便起见,axios为所有支持的请求方法提供了别名params 是将与请求一起发送的 URL 参数,对应后台中的querydata 是作为请求主体被发送的数据,对应后台中的bodyaxios.request(config)axios.get(url[, config]) // 只支持 params 传参axios.delete(url[, config]) // 只支持 params传参axios.head(url[, config]) // 只支持 para转载 2021-01-18 20:36:25 · 19984 阅读 · 0 评论 -
element中el-upload图片的上传与回显
html <el-upload :file-list="blFileList" :class="{hide:upload.bl}" :http-request="((val)=>{return myUpload(val,1)})" :on-preview="handlePictureCardPreview" :on-remove="((file,fileList)=>{return handleRemove(file,fileList,1)})" :before-upload="hand原创 2021-01-18 11:31:40 · 8959 阅读 · 0 评论 -
element Drawer 抽屉里面嵌入子组件,子组件中图片无法回显
问题描述el-drawer里面嵌入子组件factoryForm先打开el-drawer之后才能拿到子组件factoryForm的ref即factoryForm,这个时候子组件factoryForm里面需要回填el-upload里面已经上传的图片,此时图片无法回填htmlel-drawer里面嵌入子组件factoryForm <el-drawer ref="drawer" :show-close="false" :title="drawer.title" :visible.sync="drawe原创 2021-01-18 10:56:45 · 1758 阅读 · 0 评论 -
vue-pdf预览pdf文件流
html <pdf v-for="i in numberPage" :key="i" :src="pdfUrl" :page="i" style="width:100%;height:auto" />js<script>import pdf from 'vue-pdf'export default { data() { return { pdfUrl: '', numberPage: 0 } }, created() {原创 2021-01-13 14:27:18 · 2576 阅读 · 0 评论 -
vue中在dialog中使用canvas提示 Cannot read property ‘getContext‘ of null“
问题在dialog中使用画布canvas的时候会提示报错Cannot read property ‘getContext’ of null"<el-dialog :visible.sync="dialog" :title="dialogTitle" append-to-body width="85%"> <canvas id="canvas" width="400px" height="400px"></canvas></el-dialog>解决原创 2021-01-07 21:32:53 · 4036 阅读 · 2 评论 -
vue中文件样式的引入(.css .scss)
全局引入在mian.js文件中进行全局引入import Vue from 'vue'import 'normalize.css/normalize.css' // A modern alternative to CSS resetsimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css' // 全局样式引入import '@/styles/index.scss' // global css 全局原创 2021-01-06 09:46:09 · 2715 阅读 · 1 评论 -
vue+element-ui中的el-table-column配合v-if导致列展示数据出错
<!-- 当是 我的上传 的时候才展示 --><el-table-column v-if="showFormal" prop="dictAuditStatus" label="审核状态" align="center" width="120px"> <template slot-scope="scope"> <statusLabel :status_label="scope.row.dictAuditStatus.toString() | auditFi..原创 2021-01-05 11:29:29 · 893 阅读 · 0 评论 -
vue中使用getBoundingClientRect()获取元素位置报错
“TypeError:this.$refs[refName].getBoundingClientRect is not a function” <el-row class="qzblgzhTable" ref="QZBLGZH"></el-row> 报错原因将ref定义在组件上面再使用如下代码去获取其方法获取其top,则会报错this.$refs.QZBLGZH.getBoundingClientRect().top正确写法 <div ref="QZ原创 2021-01-04 17:25:39 · 13366 阅读 · 1 评论 -
vue基础知识
序言2020年的初雪,写点东西纪念一下吧写在前面虽是基础,但也要经常回顾,以免遗忘,从而给自己的开发过程中带来不便概述Vue是由一个个实例构建而成的,一个组件就是一个Vue的实例官网https://cn.vuejs.org/v2/guide/ link属性和方法methods、watch、computed 、filtercomputed当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性注意:在data中没有直接声明出要计算的变量,也可以直接在computed中写入示例代原创 2020-12-29 21:15:25 · 147 阅读 · 0 评论 -
解决vue页面跳转后返回原页面顶部位置
要解决问题如下图所示:解决思路:当前页面加载完之后(mounted),添加对滚动(scroll)事件的监听;编写获取当前页面滚动高度的方法,并且将获取的当前页面滚动高度进行本地存储(localStorage);当切换不同子菜单项时候,获取本地存储里面存储的当前页面滚动高度,并且让其滚动到当前位置;当前页面销毁时(destroyed),移除对滚动事件的监听,并且清空本地存储。具体解决代码如下:mounted() { window.addEventListener('scroll', thi原创 2020-05-14 14:55:29 · 1877 阅读 · 0 评论 -
vue项目在码云预览步骤
第一步:需要将vue项目进行打包,即npm run build,打包完将dist文件夹push到码云上,但是注意将文件上传到 GitHub的时候默认是忽略到dist文件夹的,所以需要修改.gitignore 中文件的内容。如截图所示:第二步:登录码云,找到要预览的代码仓库,操作如以下截图所示,获取部署后的网站地址,第三步的时候需要第三步:在vscode中,修改该项目下的config/index.js文件下的build部分的内容,如截图所示:修改完之后,重新执行npm run build命原创 2020-05-16 01:02:10 · 963 阅读 · 0 评论 -
运行vue项目 npm ERR! missing script: dev npm ERR! A complete log of this run can be found in: npm ERR!
由于版本更新 npm run dev 和npm start 是老项目 运行方式使用新的运行方式:npm run serve原创 2020-05-13 13:32:06 · 4312 阅读 · 0 评论 -
VSCode搭建Vue项目并引入Element
1.搭建项目的前提:Vscode和Nodejs都已经安装好2.安装的具体步骤如下所示:3.按照提示回车默认即可4.安装完之后,可以看到"src"的目录下有一个"main.js"文件,这是程序的入口5.依次执行以下两条指令,如下图所示:6.根据提示,在浏览器中输入访问项目的ip地址,项目成功运行截图如下:7.项目开发完毕,打包上线的命令:npm run build到此,vue项目的搭建便完成了。...原创 2020-05-13 09:39:45 · 2775 阅读 · 0 评论