- 博客(39)
- 收藏
- 关注
RSS订阅原创 哈哈哈哈哈
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：Ctrl/Command + I标题：Ctrl/Command + S
2024-04-04 10:15:31
867
原创 解决vue报错this.$refs[xxx].validate is not a function
正常情况下报错this.$refs[xxx].validate is not a function可能我们使用nextTick 延迟加载去解决，如若使用了nextTick依旧报错当使用this.$refs[xxx].validate 的时候，如果是xxx为一个变量传进来的，如下这种情况下，是不需要加[0]的这种情况下必须是this.$refs[xxx][0] 否则会如标题的报错...
2021-07-29 15:10:23
2211
原创 Vue中右键弹出菜单(vue-contextmenu)
点击右键，弹出菜单安装：npm install vue-contextmenu --save引入：import VueContextMenu from 'vue-contextmenu'Vue.use(VueContextMenu)使用：<template><div id="app" @contextmenu="showMenu" style="width: 100px;height: 100px;margin-top: 20px;background: red
2021-04-06 14:55:24
3344
2
原创 JS判断数组中是否包含某个值的几种方法
方法1：array.indexOf此方法判断数组中是否存在某个值，如果存在，则返回数组元素的下标，否则返回-1。var arr=[1,2,3,4];var index=arr.indexOf(3);console.log(index);方法2：array.includes(searcElement[,fromIndex])此方法判断数组中是否存在某个值，如果存在返回true，否则返回falsevar arr=[1,2,3,4];if(arr.includes(3)) console
2021-03-16 16:14:15
2471
原创 element不上传文件，解决点击提交无法触发 http-request
<el-upload ref="upload" :headers="myHeaders" class="avatar-uploader avatar-uploaderOne" action="http://47.93.4.35:9090/shop/upload" :http-request="uploadImg" :show-file-li...
2021-03-16 10:39:44
6437
原创 js实现选中当前元素并改变颜色
jq伪类选择器（:not）的使用:not() 选择器选取除了指定元素以外的所有元素/* 选择所有不是段落（p）的元素 */:not(p) { color: blue;}
2021-03-15 15:31:02
1328
原创 video标签如何实现点击按钮视频回放、全屏播放功能
回放重置下currentTime属性document.getElementById('videoID').currentTime=0全屏播放比如要控制视频全屏播放，页面上有个按钮：html<button id="fullScr">全屏播放</button><video src="xxx.mp4" id="movie"></video>jsvar btnFullScr = document.getElementById('fullScr'
2021-03-12 16:55:03
3001
原创 echarts Y轴只显示整数，或保留n位小数
yAxis: [ { type: 'value', minInterval: 1//只显示整数 } ],axisLabel: { formatter: function (value, index) { return value.toFixed(1); /
2021-03-11 10:50:21
1005
原创 String()和toString()的区别和应用
String()和toString()都是将其他类型的变量转换为字符串类型。let a =1;let b = 123;String(a); // '1'typeOf(a); // StringtypeOf(b); //Numberb.toString(); // '123'typeOf(b); //String;区别toString()无法转换null和undefinedlet a;let b=null;a.toString();//Uncaught TypeError: Cann
2021-03-10 14:32:38
129
原创 修改element UI的popover样式
1.在vue页面文件中使用el-popover组件时，在style标签中设置样式无效。解决方法：el-popover的class是el-popover，他比较特别的是,el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级，需要设置全局style。2.当不同页面都使用到了el-popover组件，并且样式有区别，这样该怎么办？解决方法：如果设置全局样式，则会导致全局的样式污染，element-ui官网：在全局设置样式时针对每一个p
2021-03-10 13:57:30
4988
原创 vue中使用vue-pdf插件显示pdf
最近项目需求需要在vue中预览pdf文件，使用vue-pdf这个插件，并且还有许多方法、属性能进行功能扩展。一、安装npm install --save vue-pdf二、基本示例<template><div class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf></div></template><script>import pdf f
2021-03-09 14:49:06
2679
1
原创 vue v-for循环的用法
1、v-for循环普通数组(1) 创建vue对象(2) 循环数据结果：2、v-for循环对象数组(1) 创建vue实例对象(2) 循环对象数组结果：3、v-for循环对象(1) 创建vue对象实例(2) 循环对象结果：4、v-for循环数字(1) 创建vue对象实例(2) 循环对象结果：5、v-for中key的使用方式(1) 创建vue对象实例注意：push()方法一般是添加到数组的最后的位置；unshift()方法是往最前面的位置添加。注意：
2021-03-05 14:57:02
8653
原创 element-ui Checkbox 实现单选
<el-table id="tables" ref="multipleTable" row-key="id" :data="tableData" max-height="450" border style="width: 100%" @selection-change="handleSelectionChange" //将用到此 :header-cell-style="{background:'#F8F8FA',color:'#606
2021-03-05 14:03:06
1202
原创 css选择第一个子元素或者非第一个子元素有哪些方法实现
如果我们要获取到ul标签下面的第一个li标签来设置样式，有哪些css方法来实现呢？一 、获取第一个元素1. 使用 :first-childul li:first-child { ......}2. 使用 :first-of-typeul li:first-of-type { ......}3. 使用 :nth-childul li:nth-child(1){......}4. 使用 :nth-of-typeul li:nth-of-type(1){......}
2021-03-05 13:46:19
15779
原创 vue-json-viewer实现JSON格式化效果【高亮、可折叠、可复制】
初学前端，用的架子是 vue+element ，目前有个需求，想将string类型的json字符串，以json格式展示。利用vue-json-viewer插件，利用这个插件，可方便快速实现 高亮，JSON折叠，copy 三种功能 ！！！官网地址：https://www.npmjs.com/package/vue-json-viewer效果展示先放最终效果：效果看完，那么我们来上干货了！安装vue-json-viewer插件基于npm的安装：$ npm install vue-json-v
2021-03-03 14:58:57
6185
2
原创 解决VUE报错Duplicate keys detected: ‘M01010004‘. This may cause an update error.
异常：原因： v-for的key存在重复值解决：使用index，搞定tips:当再同一循环体内多个v-for嵌套使用时，不可都用v-for="(item,index)",要注意区分，例如v-for="(val,key)"
2021-03-03 14:44:35
192
2
原创 vue中按回车键进行条件搜索
搜索条件：<el-row class="views_box" :gutter="20"> <el-col :span="4"> <div>商品ID：</div> <el-input v-model="dataForm.id" placeholder="请输入商品ID" @keydown.enter.native="seachEnterFun" ></el-input
2021-03-03 14:40:21
698
1
原创 vue项目中，定义并使用 全局变量，全局函数
一、定义变量，并全局使用原理：单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。在main.js中引入，并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用；或者直接引入到需要的模块文件中使用；项目目录步骤1、新建 global_variable.js文件，用于存放变量，示例如下：const baseURL = 'www.baidu.com'const token = '123456'const userSite
2021-03-03 10:35:28
753
原创 解决 These dependencies were not found: * core-js/modules/es6.array.fill in xxx 之类的问题
解决方法：在babel.config.js中添加：presets: [ [ “@vue/app”, { useBuiltIns: “entry” } ] ]
2021-03-03 09:37:23
1337
原创 elementUI+el-upload 上传文件大小与文件类型校验
嵌入组件<el-upload accept="image/jpeg,image/gif,image/png" class="upload-demo upload-tip" :action="uploadUrl()" :on-preview="handlePreview".
2021-03-02 16:52:32
5030
1
原创 js获取文件名称（去掉扩展名）
//获取uuid文件名称（去掉扩展名）function getFileName(data) { return data.substring(0,data.indexOf(".")); }
2021-03-02 16:25:54
1003
原创 el-tree子级与父级不需要强关联
绝大部分我们在使用el-tree组件的时候如果需要勾选，那么子级选中的时候，父级往往也被勾选中，今天项目中遇到一个需求就是，el-tree组件子级与父级既可以关联使用，也可以不产生关联使用，其实el-tree提供了一个配置‘check-strictly’在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false 默认是关联的 为true的时候就不会产生关联...
2021-03-02 16:12:25
985
原创 vue点击复制功能
1、选中复制这个比点击复制简单点<template> <div> <el-button type="primary" plain @click="copy()">复制</el-button> </div></template><script>export default { data(){ return{ } }, methods:{ copy()
2021-03-02 15:26:44
501
原创 vue项目中实现图片懒加载的方法
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。实现方法(使用vue的vue-lazyload插件)安装插件npm install vue-lazyload --save-dev在入口文件main.js中引入并使用import VueLazyload from 'vue-lazyload'直接使用Vue.use(VueLazyload)
2021-03-01 14:27:47
557
原创 vue动态更改图片的src地址
html:<img ref="study" :src="studyDataPic">script:data: { return { studyDataPic: require('@/assets/images/school.png') }}更改图片地址：this.studyDataPic = require('@/assets/images/load.gif')注意：1.必须使用require因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上re
2021-03-01 13:48:57
3300
1
原创 VUE el-input正则验证
①只能输入大于0的整数check(value) { let reg = /^[1-9]\d*$/; var _this = this; if (value) { if (new RegExp(reg).test(value) == false) { setTimeout(() => { _this.actionDataForm.studNum = ''; _this.erro
2021-02-26 17:12:52
2145
原创 vue.js 进行初始化遇到的关于core-js的错误@core-js/modules/es6.array.find-index]
D:\vuejselement\workSpace\zutnlp_platform_show>cnpm install --save core-js/modules/es6.array.find-index× Install fail! Error: [@core-js/modules/es6.array.find-index] resolved target D:\vuejselement\workSpace\zutnlp_platform_show\core-js\modules\es6.arr
2021-02-26 16:46:17
1069
原创 使用this.$set给对象种添加属性
我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div></template>&l
2021-02-26 16:19:43
1081
原创 vue+axios中断正在发送的请求
axios内部提供axios.CancelToken.source().cancel()方法用于取消正在发送的请求，我们可以利用这个去处理简单的api封装，具体看公司项目的封装方式import axios from 'axios'export function getDataList (cancelToken) { return axios({ method: 'get', url: 'http://xxx.xxx.x.x:4399/getList', cancelTo
2021-02-25 15:01:31
2465
6
原创 在vue中将markdown转换成html并渲染样式
1.下载依赖npm install marked2.在需要使用的页引入import marked from 'marked'3.语言转换注：这里blog是转换后的html语言，而blogDetailData.content是从数据库取出来markdown文本this.blog = marked(this.blogDetailData.content)4.将转换后的html文本绑定在div上注意这里使用的是v-html，而不是v-text，虽然同样是绑定文本，但是v-text绑定之后
2021-02-25 11:19:35
2015
1
原创 element el-input 去除边框/自定义
el-input 的边框，官网是这样子的，有的时候我我们需要做一些自定义的样式可能我们需要这样子的然后我们常规操作，border: none; 或者 border: 0; 发现行不通，哈哈哈哈哈tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。>>> 是vue的深度选择器，vue引用了第三方组件，需要在组件中局部修改第三方组
2021-02-25 11:04:54
10773
7
原创 element中dialog出现滚动条记忆功能
今天使用element中的Dialog组件时发现一个问题：当Dialog内容过多时会出现滚动条，而当你滚动到一定位置后关闭Dialog，然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。网上找了两种方法都不太管用，最后在同事的帮助下解决了。 使用element-ui，dialog中的destroy-on-close属性，关闭时销毁 Dialog 中的元素。这样在每次打开dialog时，滚动条都是在最顶部的。...
2021-02-25 10:48:55
901
原创 vue如何给封装好的组件加click事件
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符当你使用 <Menu>组件时 <Menu mode="horizontal" theme="dark" :active-name="$route.path" > <MenuItem name="/" to="/" @click.native="handclick(1)">我的
2021-02-25 10:40:43
856
1
原创 如何实现Vue底部按钮点击加载更多
一次请求1.1 页面使用slice来进行限制展现从0，a的数据：<div v-for="user in draw_user.slice(0,a)" :key="user.uid" class="user-item">//判断a的值是否小于数组的长度，小于就显示点击加载更多<div class="load-more mr-bottom" v-if="a<draw_user.length" @click='loadMore' >点击加载更多</div>.
2021-02-24 15:03:39
821
原创 Git提交代码报错husky 」 pre-commit
关键词是husky > pre-commit，是本地项目中的.git下的一个文件导致的提交失败，这个文件是pre-commit文件。找到项目中的.git文件夹(需要显示隐藏文件才会出现)，双击进入就能看到关于git的一些文件进入hooks文件夹，并找到pre-commit文件，这就是commit失败的根源所在了。该文件所起到的作用是：pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。如果代码不符合相应规则，则报错。我们将该文件删除之后，再进行commit，
2021-02-24 15:00:12
1173
原创 使用json-server快速搭建本地数据接口
1.安装全局安装json-server：npm install -g json-server如果是linux系统或者mac系统，需要在前面加sudo进行全局安装，然后输入密文密码就可以了sudo npm install -g json-server2.测试json-server -h //测试命令如果出现下面内容，表明安装成功！3.新建一个文件夹，比如在桌面新建文件夹JSONSERVER.然后cd JSONSERVER.进入文件夹中.
2021-02-23 15:14:51
357
2
原创 echarts 柱状图，折线图互转实例（数据动态请求后台）
function initDayChart(){ var myChart = echarts.init(document.getElementById('appLoginLogDayChart')); myChart.setOption({ title : { text : '每日活跃用户总数分析', left : 'center', top : 20, textStyle : { color : '#555' } }, tooltip:
2021-02-23 14:22:05
349
原创 父子组件传值的方法
Vue父子组件传值的方法1.父组件向子组件传值 props2.子组件向父组件传值 $emit3.父组件调用子组件的方法通过ref4.可以通过`$parent`和`$children`获取父子组件的参数5.vue 全局事件(eventBus)6.兄弟之间的传值 Vuex1.父组件向子组件传值 props父组件：<child :inputName="name">子组件：（1）props: { inputName: String, required: true }（
2021-02-22 21:55:49
177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人