vue
在vue开发中遇到的问题
易小花
这个作者很懒,什么都没留下…
展开
-
初次使用docsify
初次使用docsify如何使用1.全局安装docsifynpm i docsify-cli -g2.初始化项目docsify init ./docs3.运行docs/本地预览docsify serve docs最后访问地址:http://localhost:3000,会发现之前docs的分支下新增了三个文件。侧边栏(右侧导航)指路:https://blog.csdn.net/weixin_46096901/article/details/105813542...转载 2021-04-21 14:51:25 · 347 阅读 · 0 评论 -
【vue】el-table格式化el-table-column内容(主要的三种方法)
el-table格式化el-table-column内容遇到一个需求,一个循环展示的table中的某项,或者某几项需要格式化。对于格式化的方法,主要有template scope、formatter;一、template scope 、v-if判断<el-table-column prop="cyxb" label="性别"> <template slot-scope="scope"> <span v-if="scope.row.cyxb == 0原创 2020-11-24 17:07:29 · 85892 阅读 · 9 评论 -
Vue 实现弹框自由拖拽(不出可视范围、解决快速拖动问题)
Vue 实现弹框自由拖拽(不出可视范围、解决快速拖动问题)由于页面中弹框很多,往往会挡住想要查看的内容。从而,有了自由移动拖拽弹框的需求;但在使用的过程中发现,一开始编写的drag.js文件会移出可视范围,会影响项目的整体布局;并且在拖动过程中发现,快速拖动弹框时,可能会失效或者略微延后。1.在项目中新建drag.js文件,文件中代码如下(直接复制使用)(以下代码已解决移出可视范围和快速拖动延后问题,并为拖动时设置对应的鼠标样式)import Vue from 'vue';//使用Vue.direc原创 2021-02-22 17:21:08 · 5610 阅读 · 4 评论 -
vue 父子组件、兄弟组件之间的传值
vue 父子组件、兄弟组件之间的传值vue 父子组件的传值1.编写子组件2.引入写好的子组件<search-group v-if="isShowSearchGroup" :isShowOneResult="isShowOneResult"></search-group>import searchGroup from '../SearchGroup/SearchGroup.vue'; components: { searchGroup, //搜索组件},3原创 2021-01-10 11:06:27 · 223 阅读 · 0 评论 -
Vue+OpenLayers实践 —— 显示地图
Vue+OpenLayers实践 —— 显示地图首先自己创建一个vue项目,百度一下下,方法都有滴。安装OpenLayers依赖npm install ol全局引用ol,在main.js中引入import ‘ol/ol.css’<div id="map-div" style="width:800px;height:500px;"></div>//引入需要的东西import View from 'ol/View'import Map from 'ol/Map原创 2020-11-26 13:57:43 · 2446 阅读 · 0 评论 -
【vue】scss的安装及基本用法
scss基本用法在vue项目中的引用方式,指定语言为scss<style lang='scss' scoped></style>1.变量的使用(1)以$开头声明变量(2)变量具有作用域的。(3)变量中连接符中划线和下划线是互通的。例:声明一个错误信息的颜色值<span class="error">错误文字</span><span class="error2">错误2</span><style lang="原创 2020-11-12 17:06:03 · 7503 阅读 · 0 评论 -
【vue】对el-table-column循环展示中的某列修改长度(利用三元表达式)
【vue】对el-table-column循环展示中的某列修改长度(利用三元表达式)循环显示表格中数据,基本长度固定。但对于某些行,换行太多,所以针对某一行,改变它的宽度。<el-table :data="djbList" border style="width: 100%; overflow: auto" max-height="150"> <el-table-column type="selection"> </el-原创 2020-11-11 10:05:21 · 3019 阅读 · 0 评论 -
【vue】下拉框回显问题(显示数字,实际应该显示中文)
【vue】下拉多选框回显问题前端选择显示为中文。保存后,刷新数据回显,为1。但,我想要显示的效果是文字,而且在别的需求页面中我也是这样写的。百度,访问多篇博客,了解到问题的解决方法。解决的重点:注意两边对应的数据类型。所以,我去检查了。申明变量的时候,我用的是this.jtjx = null;数据的返回结果也是数字类型。查看option时发现了问题,option的value类型是string类型。两边类型对不上,那自然就读取不到对应的label啦。问题解决。总结:value值原创 2020-10-23 09:40:43 · 7404 阅读 · 5 评论 -
el-table-column 结合template对某列后台数值,在前端显示对应文字,并不同数据显示对应不同样式
el-table-column 结合template对某列后台数值,在前端显示对应文字,并分不同的状态,显示醒目新需求:对table中的某列,后台数据为数字,在前端显示对应的中文,并根据数值,对数据分为三个状态,为空、进行中、完成。对vue刚入门没多久的我,自然首先百度。嗯,确实查到了方法。但是,不适用我的情况。<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">原创 2020-10-10 15:51:02 · 13209 阅读 · 0 评论 -
html背景渐变 and 边框渐变
html背景渐变 and 边框渐变一.html背景渐变background: linear-gradient( to right,//从左往右渐变 rgba(8, 202, 210, 0) 0%, rgba(8, 202, 210, 0.5) 30%, rgba(8, 202, 210, 0.8) 50%, rgba(8, 202, 210, 0.5) 80%, rgba(8, 202, 210, 0) 100% );//第四位是透明度,后面的百分比是原创 2020-09-16 09:57:11 · 1736 阅读 · 0 评论 -
Echarts实现省级地图的两种方法(以浙江省为例)
Echarts实现省级地图的两种方法(以浙江省为例)在echarts调用地图时,我们往往会使用GeoJson格式的数据,根据网上的资料,会发现官网会提供世界、中国以及各省的数据。但是,访问下载最新的echarts组件时,会发现echarts暂不提供地图下载。所以,我们需要自己找GeoJson数据,仔细一点会发现,其实在安装echarts依赖时,已经将数据下载到项目中了。你想要的省级Js、Json文件,node_modules文件下全都有。echarts下载地址https://echarts.apache原创 2020-09-30 10:20:03 · 11572 阅读 · 5 评论 -
【vue】el-tree某一分支实现单选,其他分支可以多选
【vue】el-tree某一分支实现单选,其他分支可以多选这个我真的不想多说啥,心累了。花了好久的时间才倒腾出来。心塞塞。直接上代码,也算造福广大被el-tree折磨。欲哭无泪。我主要是针对这个方法。@check-change=“handleCheckChange”handleCheckChange(CChangeData, selfChecked, leafChecked) { this.basemapData = []; this.treeData[0].child原创 2020-09-21 09:48:38 · 958 阅读 · 0 评论 -
【vue】el-tree 自定义图标 小三角在右边
【vue】el-tree 自定义图标 小三角在右边<el-tree class="filter-tree" :data="treeData" :props="defaultProps" :check-strictly="true" show-checkbox :filter-node-method="filterNode" :render-after-expand="false" node-key="id" @原创 2020-09-18 17:16:30 · 4617 阅读 · 1 评论 -
Echarts引入省级地图(简便快捷,以浙江省为例)
Echarts地图引入省级数据(简便快捷,以浙江省为例)最近需求,利用echarts地图显示浙江省行政区。一开始找了很多资料,但是一直没法实现,也不知道为什么。网上的办法试了个遍,感觉要用GeoJson真的是很麻烦,直到我看到了一篇博文,哈哈哈,博主的吐槽深得我意。接下来,就是见证奇迹的时刻。哈哈哈哈initZheJiang () { let mychart = this.$echarts.init(document.getElementById('mychart')) window.addEve原创 2020-09-03 14:13:23 · 2624 阅读 · 1 评论 -
Uncaught TypeError: Cannot read property ‘length‘ of undefined( /property ‘0‘ of undefined)
Uncaught TypeError: Cannot read property ‘length’ of undefined问题描述在写echarts的时候遇到找不到length,然后我将this.cityList.length替换成了数字,于是又出现了Cannot read property '0' of undefined。我的代码如下mychart.on('click', function (params) { console.log(params); let selCity原创 2020-08-31 18:08:10 · 1271 阅读 · 0 评论 -
Echarts 柱状图、饼状图等变换颜色、渐变色
Echarts 柱状图、饼状图等变换颜色、渐变色本文只总结了几种用到过的方法,当然,方法远不止这些。以下实测有效。之后,当然遇到测试成功的方法,也会对文章进行更新。方法一:itemStyle: { color:function(params) { var colorList = ['#c23531','#9BD4B9','#FFF384'];//这是一个颜色的数组 return colorList[params.dataIndex] },},方法二原创 2020-08-21 15:21:25 · 2477 阅读 · 0 评论 -
‘BMAP_STATUS_SUCCESS‘ is not defined (no-undef) at src\components\Navigation.
BMAP_STATUS_SUCCESS’ is not defined (no-undef) at src\components\Navigation.问题描述自己写组件调用百度api,但是别的项目里同样这调用确是可行的。后来,查看了一下配置文件,发现配置文件中有eslint。所谓eslint,就是是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。简单来说,就是一个校验的工具。所以很多参数无法通过校验,导致了报错,所以后来,把涉及到eslint都卸载了。问题果然解原创 2020-08-13 11:25:14 · 1823 阅读 · 1 评论 -
【Vue】路由传参中的坑(query、params)
【Vue】路由传参中的坑(query、params)路由传参主要有query、params两种参数传递方法。this.$router.push(参数)1.query传参this.$router.push({path:'/路径',query:{userName:username,PassWord:password}})//path处填上路径,一般会在路由配置文件里配置好//query中存放的是一系列的需要传递的参数名和对应的值前端的调用显示let username= this.$rout原创 2020-07-30 10:06:47 · 2927 阅读 · 0 评论 -
【vue】地图显示缓慢问题
【vue】地图显示缓慢问题最近写代码,又掉进了css运用不熟练的坑里。我的需求是,针对tabs不同的标签页,点击某个tab页时才将隐藏的元素显示出来。一开始先去element-UI官网中查询了,tabs的事件用法。我把官网示例简单化一下<el-tabs @tab-click="handleClick"> <el-tab-pane label="用户基本信息" name="1">用户基本信息</el-tab-pane> <el-tab-pane la原创 2020-07-30 10:04:27 · 2946 阅读 · 0 评论 -
【vue】获取当前年份,判断是否是闰年
【vue】获取当前年份,判断是否是闰年原创 2020-07-29 10:55:02 · 3116 阅读 · 0 评论 -
[Vue warn]: Invalid prop: type check failed for prop “disabled“
vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop “disabled” . Expected Boolean, got String with value “isdisabledFn()”问题描述vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop “disabled” . Expect原创 2020-07-27 17:03:11 · 11448 阅读 · 0 评论 -
vue安装淘宝镜像以及遇到的问题
vue安装淘宝镜像以及遇到的问题vue安装淘宝镜像1.用 npm 全局安装 nrmnpm install -g nrm 2.添加源nrm add taobao https://registry.npm.taobao.org//添加淘宝镜像nrm add 名称 https://地址//添加自己定的源的名称,以下名称均以private代替3.其他操作①切换到某个源nrm use taobao //使用淘宝镜像nrm use private //使用自己的源②其他操作nrm ls原创 2020-07-23 18:15:19 · 1875 阅读 · 0 评论