- 博客(28)
- 收藏
- 关注
RSS订阅原创 前端图片加载失败显示默认图片，onerror不生效，onerror用法
前端图片加载失败显示默认图片HTML部分，给img标签添加属性onerror绑定下面的imgOnerror方法<img :onerror="imgOnerror" :src="imageURL"/>以下是vue3写法，先导入图片，再复制，直接给img.src赋值图片路径，可能会导致图片路径识别失败，onerror属性不生效主要还是看路径是否正确// 第一步导入默认图片const IMGSRC = require('../../assets/images/empty.png')con
2022-04-27 14:56:10
2946
1
原创 el-form表单校验 动态添加el-form-item rules用法，嵌套表单校验
el-form表单校验 动态添加el-form-item rules用法，嵌套表单校验el-form中rules绑定的规则，只争对model绑定对象中的一级元素（如homeworkName）起作用，且定义rules规则的时候，名称要与绑定的对象的属性（prop中绑定的）名称一致对于个别el-form-item中的元素含有多层且套的情况，可以给el-form-item中绑定属于自己的规则，需要注意给prop绑定时的名称要保持一致（一级属性+索引+二级属性名称 :prop="‘list.’+index+
2022-04-26 17:12:19
16861
原创 解决vue导航守卫beforeRouteLeave浏览器返回时，页面闪烁
解决vue导航守卫beforeRouteLeave浏览器返回时，页面闪烁页面闪烁问题，加上延时可解决beforeRouteLeave(to, from, next) { if (!this.canReturn) { // 业务判断，无需关注 setTimeout(() => { this.$confirm('离开内容将被清空, 请确认离开？', '提示', { confirmButtonText: '确定', cancel
2021-11-24 10:53:28
1312
3
原创 使用el-checkbox-group时，el-checkbox后面的文本或者div不显示
使用el-checkbox-group时，el-checkbox后面的文本或者div不显示起初setScore类所在的div死活不显示，各种添加样式都不生效，强制渲染也没用，最后发现是font-size等于0，添加样式后ok了<el-form-item prop="titleType" style="float:right;"> <el-checkbox-group v-model="query.titleType" @change="changeBox"> <
2021-08-03 17:12:30
6146
7
原创 react组件的生命周期，钩子函数的使用，生命周期，钩子函数执行顺序
react组件的生命周期，钩子函数，执行顺序react生命周期分为三个阶段阶段一：组件创建时#mermaid-svg-DAjs6kjk0z62mU8x .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-DAjs6kjk0z62mU8x .label text{fill:#333}#mermaid-svg-DA
2021-08-02 23:02:18
489
原创 react父子组件传值
react父子组件传值react父子组件传值一、父给子传值1.子组件是函数组件时，通过参数props接收2.子组件是类组件时，通过参数this.props接收二、子给父传值react父子组件传值一、父给子传值1.子组件是函数组件时，通过参数props接收2.子组件是类组件时，通过参数this.props接收二、子给父传值1.由父组件给子组件提供一个回调函数，传递给子组件；2.当子组件给父组件传值时，调用该回调函数3.父组件通过回调函数调用，拿到子组件传来的参数结果：点击按钮后
2021-08-01 17:53:18
159
原创 复选框 el-checkbox选不上
复选框 el-checkbox选不上<el-form v-for="(item,index) in list" :key="index"> <el-form-item> <el-checkbox-group v-model="item.myArr"> <el-checkbox v-for="(ele,index) in item.checkBoxList" :key="ele.id" :label="ele.label">{{e
2021-06-02 17:24:27
3153
原创 el-table实现动态列，列数根据接口返回
vue，element-ui中el-table实现动态列，列数根据接口返回solt="header"是为了插入表头的，这里遍历listStudent[0],是因为表头都一样，所以取第一行数据的字段做为表头即可<template> <div> <el-table :data="listStudent"> <el-table-column label="id" prop="id"></el-table-column>
2021-05-26 16:58:53
5602
1
原创 解决ie浏览器get请求自动请求来自缓存的问题
解决ie浏览器axios发起get请求自动请求来自缓存的问题如果是单个get请求，直接拼接随机码参数或者时间戳function getShopList(params) { return service({ url: '/shoppingCart/getByUserId?t=' + new Date().getTime(), method: 'get', params: params })}如果是全部都加，则可以在axios请求拦截器中中配置service.in
2021-04-29 14:23:53
1168
原创 element-ui表格数量为空时，给表格中插入图片或其他元素样式
element-ui表格数量为空时，给表格中插入图片或其他元素样式通过插槽可以实现使用案例通过插槽可以实现<template slot="empty"> <div style="margin-top: 35px"> <img src="/static/images/cart-empty.png" /> </div> </template>使用案例<el-table :data="shoppDat
2021-03-12 10:06:26
608
原创 dialog弹出，点确定，页面隐藏滚动条，导致页面和message弹框抖动
dialog弹出，点确定，页面隐藏滚动条，导致页面和message弹框抖动解决办法：在main.js中导入element时添加配置：import ElementUI from 'element-ui'// 防止dialog导致页面滚动条消失抖动ElementUI.Dialog.props.lockScroll.default = false;如果仍然不起作用在body中添加/* 解决页面dialog出现时，页面滚动条出现消失导致的Message消息提示抖动问题 */body {
2021-03-11 10:55:55
1144
原创 保留文本框的输入空格和换行，并且可以自动换行
场景：直接使用<pre>标签不能自动换行<divclass="reply-content">{{item.content}}</div>.reply-content{width:100%;white-space:pre-wrap;*white-space:pre;*word-wrap:break-word;}
2021-03-01 16:24:19
479
转载 elment-ui按需引入不出现样式
转载:https://blog.csdn.net/weixin_43755104/article/details/105593836
2020-07-29 16:43:04
910
原创 如何在浏览器中记住页面滚动的位置
如何在浏览器中记住页面滚动的位置场景：在滚动A页面的时候，然后再去B页面，这时返回A页面，会发现A页面的位置滚动了和B页面一样高的距离，不能记住历史位置。原因：在滚动时滚动的是整个body页面，而不是单独的A或B页面。如何检查滚动的是否那个元素？将如下代码粘贴到控制台，然后滚动页面，打印结果即滚动的元素。function findscroller(element) { element.onscroll = function() { console.log(element); };
2020-07-23 22:57:50
1165
原创 axios与axios.create()的区别
参考原文：https://www.cnblogs.com/fsg6/p/13204365.htmlaxios.create()是添加了自定义配置的新的axios例如：用axios发送请求：axios({ method:'POST', url:'http://localhost:8000/login', data})用axios.create()创建一个新的axios发请求：cosnt requset = axios.create({ //基础路径 baseURL='http:
2020-07-22 10:42:25
9514
2
原创 在mounted获取不到data中的值，其中data的值是由在created中请求并初始化的。
在mounted获取不到data中的值，其中data的值是由在created中请求并初始化的。今天发现，在created中发起ajax请求，并给data中的值进行了初始化，随后想要在mounted使用初始化后的值，结果却怎么也获取不到，打印的结果如下：js代码是这样的export default { created() { this.getData(); }, data() { return { reportData: {} }; }, met
2020-07-19 17:09:29
6944
2
原创 Vue时间过滤器的使用
Vue时间过滤器的使用在main.js中定义// 定义时间过滤器，Vue.filter('dateFormat', function (originDate, pattern = '') { // 根据给定的时间字符串，得到特定的时间 var dt = new Date(originDate) // yyyy-mm-dd var y = dt.getFullYear() var m = (dt.getMonth() + 1).toString().padStart(2, '0'
2020-07-18 15:11:32
1581
原创 在表单验证当中，this.$refs.form.validate方法不执行
在表单验证当中，this.$refs.form.validate方法不执行 addUser() { console.log(12); // 可以执行 this.$refs.addFormRef.validate((valid) => { console.log(valid); // 不执行 }); }注：html代码如下<el-dialog title="添加用户" :visible.sync="addDialogVisible" wi
2020-07-15 16:19:25
15361
3
原创 Error: Avoided redundant navigation to current location:
Error: Avoided redundant navigation to current location: “/users”.问题触发原因：在Vue导航菜单中，重复点击一个菜单，即重复触发一个相同的路由，会报错，但不影响功能解决：在router的配置文件中加入如下代码const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return ori
2020-07-14 19:19:28
858
原创 js基础语法知识点梳理之数据类型
js基础语法知识点梳理1------数据类型文章目录js基础语法知识点梳理1------数据类型简单数据类型复杂数据类型基本包装类型简单数据类型复杂数据类型基本包装类型
2020-07-12 01:15:41
78
原创 element-ui 表单验证规则不生效原因 & 为什么使用:model
element-ui 表单验证规则不生效原因 & 为什么使用:model在使用element-ui的表单时，我们会看到如下代码,在el-form标签中使用 :model,在el-form-item项里面的文本框使用的是 v-model,这里，使用:model的作用仅仅是将父组件的数据loginForm传递给子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的（如下案例）。在表单校验中，注意要把 prop=“username” 的属性
2020-07-12 00:52:14
9574
7
原创 var、let、const的区别和使用
var、let、const的区别和使用作用域不同var声明的变量作用域为该语句声明的 函数内。let和const声明的变量作用域为该语句声明的 代码块中。if (true) { var a = 123;}console.log(a); // 123 可以访问到 var不具有块级作用域if (true) { let a = 123; // let声明的a只作用在一堆花括号的代码块中}console.log(a); // 报错：Uncaught ReferenceErro
2020-06-07 14:44:05
1566
原创 call、apply、bind的使用，改变this指向的三种方式
call、apply、bind的使用，改变this指向的三种方式call改变this的指向，通过第一个参数.调用函数，可以传递参数，和普通调用一样，参数从第二个开始，第一个默认认识是修改this指向的那个对象。实现继承 function Father(x, y) { this.x = x; this.y = y; } function Sun(x, y) { Father.c
2020-06-05 23:26:29
446
原创 怎样使页面加载完再执行js代码
怎样使页面加载完再执行js代码由于HTML页面的加载顺序是从上到下，所以js代码要写在页面靠下的位置，否则可能会发生元素获取不到的问题，为了避免这种情况，可以通过页面元素加载完之后，再执行js代码，这样即使代码写在html元素前面也没有问题。一、在原生js中，在页面所有元素加载完执行js代码 如下：1.使用load事件<script> window.addEventListener('load', function() { //js代码
2020-05-27 12:52:05
6900
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人