- 博客(14)
- 收藏
- 关注
原创 防抖节流代码
防抖1.借助外部变量var myBounce=nullfunction Bounce(){ if(myBounce){ clearTimeout(myBounce); } myBounce=setTimeout(function(){ console.log('函数触发');},1000)}2. 闭包function myBounce1(fn,delay){ let timer return function(){ clearTimeout(timer
2021-10-06 21:33:22
265
原创 深拷贝源代码(个人手写)
嗯,虽然自己很少用。但是毕竟面试考的挺多个,写一个吧function deepClone(obj) { let isArray = Array.isArray(obj); let result = isArray ? [] : {}; if (isArray) { obj.forEach((item, index) => { result[index] = deepClone(item);
2021-07-06 15:10:18
538
原创 文字按钮鼠标滑过背景色从中间渐变
<a href="#" class="btn"><span>LOAD MORE</span></a>.btn{ bottom:0px; display: block; margin: 0 auto; text-align: center; margin-bottom: 60px; position: relative; width: 180px; color: #f7f1f0; /* background-color: #ff5235
2021-07-05 19:54:43
198
原创 文本超出单行显示省略号
超出显示省略号 /* 单行超出显示省略号 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-wrap: break-word; white-space: normal; overflow: hidden;
2021-07-05 19:50:39
127
原创 vue编译完文件过大处理
前言在之前做的项目中,因为是第一次和别人合作做项目,只有我们两个人(一个前端和后端的同学),所以尽管项目本身并不大,但是是完全的自主开发,所以开发之路充满了坎坷,无论是后端对接,接口定义规则还是开发规范都需要我们两个人自己进行商量了解。再加上随着项目的深入,技术上的匮乏逐渐明显。这也就导致了随着暑假的到来,我们不得不中止项目的进行转而两人去继续深入的学习需要的技术。我会在之后陆续总结当前阶段项目进行中遇到的各种稀奇古怪的问题。今天先总结第一个问题的解决方案(vue编译之后文件过大)简介这是一个在项目
2021-07-05 14:09:36
1250
原创 element-ui表格根据文字自适应宽度
在之前的项目中遇到了一个挺难已搞定的问题。自己封装了一个根据传递的数组自己生成表格的组件。但是因为组件中的每一个表格都是根据数据生成的,所以每一个表格的宽度都是固定的,我们没有办法去手动改变。element-ui也给了相关的fit的属性,但是用起来并不尽人意。通过在各个前端群里的冒泡有人给提供了如下的解决方案。使用 af-table-column 解决af-table-column,该组件需要我们npm下载后使用。主要功能就是使表格根据内容自适应宽度。安装npm install af-table-
2021-07-05 14:08:24
2055
原创 element-ui上传Excel文件
前言最近在学校接了个小项目,在设计过程中遇到了一个问题,需求中需要可以使用Excel导入数据,这里我就要考虑前端上传Excel文件,最开始想的是在前端把Excel文件处理好了之后将数据传递到后端,但是因为各种原因选择将文件直接送到后端去处理。我选择了使用element-ui的upload组件进行上传。开始我以为,照着文档 copy过去后修改后台地址和数据格式等限制即可。事实证明,我还是太单纯。过程中出现了,跨域等问题,想设置请求头对文档理解又有些偏差,所以我选择了手动上传代码<el-form&
2021-05-23 21:04:40
4425
1
原创 axios解决post请求跨域问题
时间:2021-05-09问题描述:axios请求后台时出现跨域问题 this.$axios .post(`http://383vm21556.eicp.vip/shgvp/ceshi`,{usernmae:username,password:password}) .then((res) => { console.log(res.data); });代码如上,这里浏览器中报了跨域的错误一开始我们认为是后端部署出现了问题,后
2021-05-11 20:35:58
12149
2
原创 vue学习日志,slot插槽的使用
slot插槽slot简介当我们使用子组件中的内容需要父组件来给予时,我们可以通过prop来传递。而有时,我们需要父组件给子组件传递一个标签,这时prop就会有些束手无策。这是就可以使用slot(插槽来解决)。我们可以简单的理解为,子组件中留出了一块空间让父组件放入父组件想要的标签或者是组件。slot的使用实例子组件代码<template> <div> <h2>这里是拥有插槽的子组件</h2> <slot><
2021-04-26 16:37:48
235
原创 vue学习日志,组件访问。
$chlidren 与 $parentChildren 用于父组件访问子组件。parent用于子组件访问父组件。//父组件 click(){ console.log(this.$children[1].text) }//子组件 click() { console.log(this.$parent.text); }需要注意的是children 拿到的是当前组件的子组件数组,所以我们需要像使用数组一样使用。但是children并不保证组件的顺序。所以,这两种方式在以
2021-04-20 15:55:56
384
原创 vue学习日志,——组件通信,sync修饰符。
sync修饰符当我们仅仅需要通过子组件的事件来修改父组件的一个data时,完全没有必要使用自定义函数传参来修改,只需要使用ysnc修饰符即可。直接上图父组件.sync修饰符后面跟着的是父组件的data属性(age)子组件换一种理解方式,我们可以理解为:父组件通过 .sync 修饰符将自己的age属性给了changAge并传递给了子组件,而在子组件的事件中。我们通过this.$emit(‘update:changeAge’,this.newage) 将父组件中由sync修饰的changeA
2021-04-20 14:21:39
98
原创 vue过渡&动画,学习日志
vue在插入、更新、移除dom时提供多种方式的应用过渡效果在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM单元素、组件的过渡在vue的transition标签中封装要使用过渡动画的组件或元素。只有组件进入、离开时才可以使用过渡动画。在条件渲染,条件展示、动态组件、组件根节点中可以给任何元素添加过渡动画练习时的实例 <button @click="show
2021-03-29 13:02:48
309
原创 promise对象学习的总结
promise对象,一种异步编程解决方案我们知道,异步操作通常滞后于同步操作且异步操作没有次序性。这在我们编程的过程中,经常会因为异步操作的处理而出现各种稀奇古怪的问题。而ECMAscript提供的promise对象,可以将异步操作以同步操作的流程表现出来,避免了层层嵌套的回调函数。Promise对象的特点对象的状态不受外界影响。一个promise对象就代表一个异步操作。当对象的状态被确定,就不会改变promise对象的三种状态:pending: 初始状态,不是成功或失败状态。fulfil
2021-03-22 12:48:31
142
原创 Ajax异步操作学习日志
Ajax异步操作学习日志在同步请求中,浏览器通常都是直接想服务器请求数据并直接接收、处理数据,而在这期间,我们只能干等着服务器处理请求,什么也做不了。基于同步请求模式,异步请求是将请求交给代理对象"XMLHttpRequest",由该代理对象向服务器发送请求,并接收处理数据,最后返回到浏览器组件中,实现页面的局部刷新。异步请求让我们的浏览器不会等待服务器处理请求,不需要重构整个页面请求响应的数据,在请求的过程中浏览器还可以进行其他操作原生Ajax实例的创建一般来讲,我们通过构造方法来创建一个 XM
2021-03-22 11:49:30
159
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人