vue
steamedbread321
菜鸟的web前端记录易错点
展开
-
2021-08-20问题记录
问题记录elementui图片上传限制尺寸直接上代码吧:HTML代码 <el-upload :auto-upload="false" class="editor-slide-upload" action="" :multiple="true" :file-list="fileList" :show-file-list="true" accept=".png,.jpg,.jpge" li原创 2021-08-21 15:52:51 · 121 阅读 · 0 评论 -
vue项目中运行项目报错:You may use special comments to disable some warnings.
以上情况是vue中于法检测工具搞得鬼,解决办法如下原创 2021-07-31 19:59:59 · 135 阅读 · 0 评论 -
在表格点击详情弹出中动态添加audio标签的src
如果直接使用:src是不能绑定成功的所以第一步:使用ref做绑定,详细代码如下dom中的代码: <audio ref='audio' controls> <source :src=popList.audioUrl type="audio/ogg"> </audio>js中的代码 this.$nextTick(()=>{ this.$refs.audio.src = `${window.g.BAS原创 2021-07-31 19:57:19 · 355 阅读 · 0 评论 -
npm 报错 Cannot find module ‘core-js/modules/es6.regexp.constructor‘
解决:不识别es6语法cnpm install core-js@2原创 2021-07-21 11:44:12 · 560 阅读 · 1 评论 -
openlayer中EPSG:900913标准下坐标转EPSG:4326标准坐标
首先,创建地图。这里是创建的高德地图的卫星图。 map = new LMap.Map("map", { // projection: "", // displayProjection: "EPSG:4326", projection: new LMap.Projection("EPSG:900913"), displayProjection:new LMap.Projection("EPSG:4326"),原创 2021-07-21 11:39:11 · 594 阅读 · 0 评论 -
ECHARTS图表当坐标轴文本过长时使用省略号显示
主要是在axisLabel中增加formatter属性具体代码如下:这里以x轴为例子 axisLabel: { interval: 0, textStyle: { color: 'deepskyblue', fontSize: 12 }, formatter:function(value){ let valuetext = "" if(value.length > 12){原创 2021-06-02 17:59:19 · 875 阅读 · 0 评论 -
echarts如何给柱状图设置渐变色
在series 的 itemStyle 里面进行设置color的属性值,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: ‘#cd7cf3’}, {offset: 1,color: ‘#de5df2’}]),}},这里设置后每个柱子的颜色渐变方向是从低到上从#cd7cf3到#de5df2...转载 2021-06-01 17:46:39 · 1966 阅读 · 0 评论 -
安装vuex调试工具(无脑)
https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd // 点击推荐下载在谷歌浏览器地址中输入chrome://extensions/ // 如果没有显示 添加扩展工具的话 请把左侧的开发者模式打开把解压包里面的那个crx 文件直接拖拽过来 到空白位置 安装成功之后 重启浏览器注意 vue开发者工具 你得运行一个vue项目才会出来作者:啊咻代码的搬运工链接:https://www.jianshu.com/p/6c7转载 2021-04-30 10:07:28 · 307 阅读 · 0 评论 -
vue-element-admin使用vue-video-player打包问题
在vue-element-admin中使用vue-video-player在本地可以播放流媒体文件,可是打包以后不能播放流媒体文件,回报错提示mock哪里有错误打开main.js注释以下代码即可解决原创 2021-04-02 16:46:44 · 403 阅读 · 0 评论 -
elementui复选框组改为二选一功能
需求如下:需要使用elemenui中的复选框组实现单选框组二选一的功能,以及两个都不勾选的功能。解决方法:使用change函数限制勾选的长度具体代码如下:vue文件中的代码: <el-checkbox-group v-model="checkList" @change="changeCheck"> <el-checkbox v-for="(item, index) in list" :key="index" :label="原创 2021-03-31 15:21:36 · 1115 阅读 · 0 评论 -
vue中prop传值获取不到值
在使用prop传值时,父组件传值到子组件,子组件拿不到值得情况下。解决办法:将prop传到子组件的值转换为本地的值具体如下:子组件中的代码: props: { curlData: { type: Object } }, watch:{ curlData(){ this.realData =this.curlData } },watch中的函数名使用prop的变量名称,watch监控字段值得变化,相当于在此处监听curlData值得变化。原创 2021-03-31 15:11:18 · 2390 阅读 · 0 评论 -
vue-element-admin中实现自适应功能
有这样一个需求:在1920*1080下视图显示正常,但是需要在1600*900下也要显示正常(在vue-element-admin下)我们直接使用postcss-px-to-viewport这个插件。网上很多说这个是vue3.0才可以使用,但是我这边实际情况是vue2.x版本也可以用。操作步骤1:下载插件npm install postcss-px-to-viewport --save-dev2:使用:在package.json中加入如下代码:module.exports = { plu原创 2021-03-31 14:22:38 · 3073 阅读 · 4 评论 -
vue加载html文件
使用iframe标签,如果是外部的链接,比如百度就直接写地址,如果是自己的本地html,就放在后端的public里面代码如下:HTML <iframe id="iframeId" :src="url" frameborder="0" class="pc iframe" scrolling="auto"> </iframe>JS data() { return { url:"http://localhost:7001/public/cl原创 2021-01-27 17:58:20 · 1030 阅读 · 0 评论 -
vue+webpack项目动态设置页面title的方法
https://blog.csdn.net/weixin_42333548/article/details/103626427?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1转载 2021-01-27 16:18:22 · 380 阅读 · 0 评论 -
animated-number局部刷新功能
首先,我们需要使用到AnimatedNumber这个插件可以参考以下这篇文章:https://blog.csdn.net/weixin_44766633/article/details/111296624现在的需求如下:,点击一个刷新按钮的图标数字会跳动,可是我没有找到AnimatedNumber里面的官方用法,所以,使用到了局部刷新。效果如上。局部刷新的代码如下:<span class="item_number" v-if="isRouterAlive"><animated原创 2021-01-19 13:53:08 · 400 阅读 · 0 评论 -
elementui表格中实现点击单个单元格触发事件
需求是这样得:表格中循环遍历出值,然后点击单个单元格触发事件。在官方文档中得事件cell-click,在点击每一行得时候都会触发,显然这不符合要求。解决方法如下:在你所需要点击触发事件得单元格中添加如下代码 <el-table-column prop="name" label="姓名" > <template scope="scope"> <div class="sub-bo原创 2021-01-18 11:13:53 · 9573 阅读 · 2 评论 -
vue中引入js文件踩的坑
一开始是这样引入的js文件,看着没有毛病但是一直报错【导致页面加载不出来,白屏】找了文章发现问题如下:原来是文件名字出了问题,我import的时候import xxx from ‘./index’ 那么此时有两个index文件,因为优先级js>vue,自然就会调用index.js文件,那页面显示空白就是正常的了,js里都是定义的方法,没有vue模版报Failed to mount component: template or render function not defined.也顺理成章.原创 2021-01-15 18:22:29 · 1590 阅读 · 0 评论 -
vue中抽取css
<style lang="scss" scoped>@import './module.scss';</style>后缀要改为scss不然不生效,具体原因我也不知道原创 2021-01-15 18:16:27 · 447 阅读 · 0 评论 -
element-ui多个组件只修改其中的一个样式
原理:先找到上一级元素,再去定位你想修改的那个.peopleNl /deep/.el-input{ width: 148px!important; }原创 2021-01-13 12:49:39 · 1249 阅读 · 0 评论 -
vue中去掉v-for遍历数组中的最后一个逗号
<span v-if="i<fwData.householdRegisterList.length-1">,</span>加一个v-if判断就好了,判断只要是长度-1的都有,其他的就没有原创 2021-01-05 10:31:53 · 2888 阅读 · 0 评论 -
elemen-ui走马灯中循环元素
图中的效果使用element-ui做出来的详细代码如下 <div class="foo"> <div class="middleTitle1"><span>行政信息</span></div> <div class="foo_lun"> <el-carousel :interval="5000" arrow="always" height="22vh" :loop="false" .原创 2020-12-30 16:07:59 · 417 阅读 · 0 评论 -
vue中跳转页面以后返回还是原来的值
存储再localstorage中然后再取出来原创 2020-12-29 16:16:45 · 711 阅读 · 0 评论 -
element-ui中给表格添加单选框组(el-radio-group)
需求如下:默认选择每一行的双向通行,然后可以点击其他并且有排斥的效果主要是使用三元表达式的多次判断代码如下: <el-table-column prop="b" label="管理" width="620" show-overflow-tooltip align="center"> <template slot-scope="scope"> <el-ra.原创 2020-12-29 15:26:16 · 3804 阅读 · 3 评论 -
vue中使用echarts-gl(3d环形图)
以这个为例子:https://www.makeapie.com/editor.html?c=x1-kIyaV6u记得要先下载echarts 和echarts-glnpm install echartsnpm install echarts-gl然后就是导入 import echarts from 'echarts' import 'echarts-gl'然后就是效果图最后就是代码<template> <div> <div class="Center原创 2020-12-28 10:06:33 · 10949 阅读 · 11 评论 -
vue中数字自动增加到一个指定数字vue-animate-number
如题,需要用到vue-animate-number插件下载插件# Yarn$ yarn add animated-number-vue # NPM$ npm install animated-number-vue --save下载完成以后引入插件以及注册import AnimatedNumber from "animated-number-vue";注册: components: { AnimatedNumber },使用<animated-number :原创 2020-12-16 17:39:30 · 2715 阅读 · 1 评论 -
使用懒加载加载element-ui中的表格(原生分页)
需求:在element-ui表格中,使用滚动条滚动到最底部再去做网络请求。代码:HTML代码块 <el-table :data="tableData_work" style="width: 100%" stripe ref="myTable" height="550"> <el-table-column prop="title" label="标题" width="290" align="left" :show-overflow-t原创 2020-11-29 16:11:46 · 434 阅读 · 1 评论 -
element-ui表格中表头表内容的居中左右对齐
element-ui表格中表头表内容的居中左右对齐第一个是内容第二个是表头原创 2020-11-20 16:16:58 · 2368 阅读 · 0 评论 -
element-ui单元格内容过长时省略号代替
只要在需要设置的列加上:show-overflow-tooltip='true’即可想在那一列添加效果就在那一列添加<el-table-column prop="url" label="说明书下载地址" width='200' :show-overflow-tooltip='true'></el-table-column>...原创 2020-11-20 10:52:06 · 206 阅读 · 0 评论 -
element-ui中分页的坑
element-ui中分页的坑在分页中有时候哦需要通过一些条件去筛选条件,然后点击搜索再返回渲染到表格中,如果没有我下面的添加代码,就会造成搜索不出来的效果。特别是:比如你在第二页搜索东西,肯定不会出来东西。必须再第二页原因如下?:因为分页中page一直是1所以不行具体代码如下: async searchPeople() { await HjKu({ page: 1,//xiu rows: this.pageSize_ldrk原创 2020-11-18 17:59:17 · 471 阅读 · 0 评论 -
vue中新打开一个标签页面
普通跳转(跳转的是路由) const {href} = this.$router.resolve({ name: "newDate",//这里是跳转页面的name query:{//要传的参数 floor_id:this.floor_id } }); window.open(href, '_blank');//打开新的窗口跳转新的网页原创 2020-11-18 16:17:22 · 3071 阅读 · 1 评论 -
vue-seamless-scroll实现自动无缝滑动
1:安装npm install vue-seamless-scroll --save2:全局引入(main.js)import scroll from 'vue-seamless-scroll'Vue.use(scroll);3:使用在想要的地方使用vue-seamless-scroll标签,这里是双标签这里需要注意的是:data中使用的是v-for循环遍历的数据,必须一致哦,不然找不到在哪里给你滚动哦 <div class="footer_right_tabl"&原创 2020-11-12 16:13:10 · 370 阅读 · 0 评论 -
vue中返回上一页
methods:{ back(){ this.$router.go(-1);//返回上一层 },},原创 2020-11-12 13:50:49 · 148 阅读 · 0 评论 -
Vue中mapbox的使用
Vue中mapbox的使用1:首先下载包文件cnpm i mapbox-gl -S2:导入包文件(main.js中导入)import mapBoxGl from 'mapbox-gl'Vue.prototype.$mapboxgl = mapBoxGl3:new一个地图出来<!-- mapbox --><template> <div id="map"> <div> <el-radio-group v-model="curr原创 2020-11-05 16:56:04 · 1616 阅读 · 3 评论 -
router的动态切换$route.meta.title
router的动态切换$route.meta.title这里主要是 meta 属性下面设置一个自定义的键值 title这个技术可以用来做什么?在头部nav切换选中效果,在二级页面或者三级页面也具有此切换选中的效果。在layout中template中 使用v-for渲染页面 <div v-for="(item,index) in titleList" :key="item.name" class="tab-list-item"原创 2020-11-05 14:59:39 · 1993 阅读 · 0 评论 -
vue切换多个div盒子
1:使用原生js切换多个div盒子(在div中)这边使用的是一个比较笨的方法,使用点击事件click去判断v-if是否生效举个例子:HTML代码 <div class="middleTitle1"><span>村级信息</span></div> <div class="fooContent" ref="foo_zuo"> <img src="../../assets/img/zuo.png" a原创 2020-11-05 11:41:12 · 1136 阅读 · 0 评论 -
Vue报错(element UI):type check failed for prop “stretch“. Expected Boolean, got String.
支柱:类型检查失败的支柱“拉伸”。期望布尔,得到字符串在报错 ’stretch‘属性前面加 :即可就是没有绑定属性出现的错误转载 2020-11-02 17:06:54 · 362 阅读 · 0 评论 -
工作笔记--10.27(vue+CSS+element ui)
1:v-for遍历图片 data数据中格式如下img: require("../../assets/img/renyuan.png"),这里最好还是添加上require不然有时候会导致无图片的情况2:element ui 中select文字样式的改变.el-input { width: 195px; height: 40px; /* border: 1px solid #1A60B2; */ } .out1_nov2 .el-input__inner {原创 2020-10-27 17:33:37 · 106 阅读 · 0 评论 -
vue中阻止form表单自动提交
有时候我们在用vue项目时,肯定会遇到这样的问题,业务中需要用到form,但是点击提交按钮会触发form的默认提交,如果用在form上绑定return false,需要单独写验证函数和接收到数据后对数据的处理函数,这样非常不方便,有没有办法阻止form自己的默认提交,在点击提交按钮或者在输入框聚焦时点回车,我们根据自己的需求处理数据呢?很简单,vue中的@submit.prevent属性可以帮我们实现这个功能,当我们点击提交按钮时,表单并不会提交,而是会触发绑定的函数,就像下边的onSubmith函数一样转载 2020-09-11 18:37:48 · 2878 阅读 · 0 评论 -
form表单中name的作用
name 属性规定 input 元素的名称。①name 属性用于对提交到服务器后的du表单数据进zhi行标识②或者在客户端通过dao JavaScript 引用表单数据。注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。简单的说就是你在前端页面想使用form表单传递值的时候,必须要把name的值写成你传递的变量的名称一样。不然不能传参eg: <form action="http://192.168.3.196:7001/upload" method="post"原创 2020-09-11 18:36:18 · 4993 阅读 · 0 评论 -
vscode中 vue代码提示器插件
原创 2020-09-11 10:26:45 · 3416 阅读 · 0 评论