vue
关注
分享
扫一扫
文章平均质量分 58
早起的小笨鸡
记录成长的点滴
展开
-
vue项目右键弹出菜单
右键唤出菜单原创 2022-07-11 12:55:59 · 2020 阅读 · 1 评论 -
vue封装公共方法、组件
vue组件封装调用原创 2022-07-11 12:40:44 · 3900 阅读 · 0 评论 -
vue父子组件传值
先前做了echarts可是化，但是的由于图表比较多，所以呢打算封装公共的组件。下面看一下我们的设计图稿：折线图与柱状图的格式差不多的，封装统一的格式是很好的选择。这时候就用到了vue的父子传值。首先，我们需要对vue之间的组件通信有一定了解，具体可以去看官方文档vue-api组件通信是很必要掌握的技能，常见的父子组件，父=>子，子=>父；兄弟传值，甚至是祖孙。我们这里重点说父子组件的传值。index文件是父组件，其它三个都是子组件；子组件想要在父组件显示，首先要引入组件：之后，用原创 2020-12-23 17:32:26 · 380 阅读 · 1 评论 -
使用echarts遇到的问题总结记录
关于echarts使用的问题1.关于安装echarts包遇到的问题（点击移动）2. 关于echarts的自定义图例设置：这个是我们ui的设计稿图例需要我们自定义的图标，按照官方文档的方式配置这样的图标配置，页面显示不出来不报错，就表示官方文档提供的配置是没有问题的，问题出在图片引入。换一种方式：用这样的方式引入，就OK了：3.需求：数据滑动加载展示根据官方文档介绍的datazoom配置，可以设置图表滑动，显示数据条数也是可以配置的；只要滑动加载用官方提供的api，可自行查看官方文档：e原创 2020-12-16 11:43:29 · 1083 阅读 · 0 评论 -
vue-cli脚手架项目构建以及按需引入antd
安装vue-clinpm install vue/cli -g查看vue版本注意：V要大写vue -V如果下载速度太慢，可以使用cnpm淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org此时下载出来的应该是2.9.6版本的脚手架vue项目创建分为两种vue-cli2vue init webpack namevue-cli3vue create name一.CLI.原创 2021-10-25 17:35:34 · 1387 阅读 · 0 评论 -
关于vue项目刷新当前页面的几种方式
目前在做一个后台管理系统，项目要求在页面右上角加上一个刷新图标按钮，点击按钮时刷新页面。 对于页面刷新个人知道这几种方式 1.利用vue的路由跳转： this.$router.go(0) 这种方式的刷新方式利用了路由特性，优点很明显，方便。一行代码即可搞定，但是呢，缺点也很致命：页面会一瞬间的白屏，体验不是很好。在当前的项目需求中不适合 2.location对象的reload方法： location.reload(). 此方法作用类浏览器的刷新按钮，刷新时页面会瞬间白...原创 2020-08-19 15:35:32 · 721 阅读 · 0 评论 -
element-ui的form表单校验踩坑
今天查看项目，发现了一个小小的bug，之前从来没注意过，记录下。管理系统的修改跟增加功能用的同一个表单，只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样，由此，出现了一些奇怪的事情，先看看代码：这是我改完之后故意写错的问题： <el-form :ref="fuleCalorificForm" :rules="rules" label="left" :model="fuleCalorificForm" la原创 2020-08-21 15:05:20 · 1306 阅读 · 0 评论 -
更改vue-element-admin的浏览器图标与标头
基于vue-element-damin项目开发，想要改变浏览器的标头与图标。图标：public文件夹下的index.hhtml文件<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scal原创 2020-08-19 17:33:26 · 4812 阅读 · 0 评论 -
vue项目引入echarts控制台报错echarts is not defined的问题解决
项目用到了echarts做BI，安装echarts的包并在入口文件引入挂载时一直报错：echarts is not defined我去看了下package.json文件，里面确实有echarts的包我之后又尝试在页面内引入：打印echarts是undefined，换一种引入方式：const echarts = require("echarts")可以的，但是不甘心，为啥import就不行。我突然想起来之前，element-admin项目中的echarts包是4点几的版本，会不会跟版本有关，原创 2020-12-16 09:45:51 · 12838 阅读 · 10 评论 -
upload上传组件上传本地图片至阿里云oss
项目中要求图片管理使用阿里云（OSS）。之前公司从没用过这种方式，于是查看了文档，整理记录下操作实现流程。我的项目是vue的项目，基于element-ui的组件库进行开发，因此，上传图片之类的第一个想到的就是upload上传组件。关于upload组件，不熟悉的可以去看一下element-ui的文档：https://element.eleme.cn/#/zhCN/component/upload#methods以下upload组件的内容： <el-upload class="upl原创 2020-08-19 16:31:17 · 1250 阅读 · 0 评论 -
记录vue开发微信公众号的问题
最近在开发公众号网页，用的vue开发。此篇就记录开发中遇到的问题首先了解公众号开发的概念，其实就是h5的页面，只是需要管理人员配置给你。由于我只是单纯的开发，那些配置我也不是配置者，就不说了。应该跟小程序配置差不多，公司也不会要你去配置。1。项目开发时，后台会给你定义一个网址，就是公众号网页的重定向地址：例如：http://xxx.com/?Api-Token=xxx&Mp-Appid=xxx#/user/console这是我们的重定向地址页面,所以你在配置 路由的时候，一定记得将项目首页原创 2021-03-29 13:28:13 · 536 阅读 · 0 评论 -
element-admin-template模板项目动态添加路由
最近项目要求鲁有需要动态获取，从后端返回数据进行处理。我的项目模板是基于element-damin-template的。官方文档也有介绍https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E9%80%BB%E8%BE%91%E4%BF%AE%E6%94%B9通常的路由使我们自己在router/index里面自己定义的路由，写死的一些路由，这些路由在加载时如果不做处理就会直接全部加原创 2020-11-27 16:10:44 · 2296 阅读 · 3 评论 -
vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: “Dashboard“, path:
最近在做动态路由，遇到很多问题。刚才碰到个一直警告路由重复，但是事实上我的路由并没有重复的信息。这个是我的首页，我一步一步追踪路由信息变化发现，因为这个首页是我的公共路由，加载时会重复加载。原因呢，很简单，router的原生addRoutes方法是添加路由信息。我在项目中把后端返回的动态路由是通过addRoutes添加的。但是我只添加每次加载时吃书画的公共路由信息都会存在，因此会出现重复的情况。我们只需要在添加路由前给路由信息删除了再去添加不就解决了吗：router.$addRoutes = func原创 2020-11-27 15:18:21 · 9617 阅读 · 0 评论 -
前端大数字精度丢失问题
项目中突然遇到数据提交出错，通知后端时说我返回数据有问题。9137822703981626000 这串数字是我收到的后端返回的编号数据，实际后端数据为 9137822703981626197。造成这个的原因就是后端返回数据过大，超过了16位的整数，而js解析只能解析到16位，超过16位就会丢失精度，类似于浮点数的运算误差，这是属于语言限制解决方式：我的项目是vue项目，用的axios做的接口交互，axios提供了专门的API，transformResponse去自定义转换后端返回的数据类型js原创 2020-09-25 14:38:08 · 3084 阅读 · 0 评论 -
关于element-ui的table组件hover时边框消失的问题
今天看项目时偶然发现一个问题，之前没有的问题，记录一下：我发现表格有点歪，不太对的上，突然就感觉挺别扭的：这是因为我的表格行我设置了width属性，导致宽度出现问题，调整了width宽度之后问题解决，但是发现了另一个问题：行与行之间的边框消失了。我看了下，导致这样的原因其实就是table默认的hover样式覆盖了这个边框。查看了table组件的文档在table中加入如下代码：:cell-style="{background:'#fff'}" <el-table :c原创 2020-09-10 13:49:56 · 2441 阅读 · 7 评论