<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[AC_Surprise的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/AC_Surprise</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; AC_Surprise]]></copyright><item><title><![CDATA[Http状态码其实是一个高冷女孩？]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/136540090</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/136540090</guid><author>AC_Surprise</author><pubDate>Thu, 07 Mar 2024 17:32:50 +0800</pubDate><description><![CDATA[其实http可是一个高冷女孩呦~
今天用一种好记的方式分享一下http状态码（100 - 599状态码 全面讲解）。]]></description><category></category></item><item><title><![CDATA[vue3 vuedraggable常用拖拽标签组件+复选功能（组件封装使用）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/136252418</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/136252418</guid><author>AC_Surprise</author><pubDate>Fri, 23 Feb 2024 11:57:27 +0800</pubDate><description><![CDATA[今天封装（CV即用）了vue3常用的vuedraggable拖拽标签组件+复选功能，介绍了特性、属性、函数配置、事件、插槽、使用六个方面，让开发变得更加高效。]]></description><category></category></item><item><title><![CDATA[vue3 vue-cropper实现图片裁剪+上传功能（组件封装使用）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/135228919</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/135228919</guid><author>AC_Surprise</author><pubDate>Tue, 26 Dec 2023 18:54:12 +0800</pubDate><description><![CDATA[【代码】vue3 vue-cropper实现图片裁剪+上传功能（组件封装使用）]]></description><category></category></item><item><title><![CDATA[一篇文章彻底搞懂什么是闭包]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/122654577</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/122654577</guid><author>AC_Surprise</author><pubDate>Sun, 23 Jan 2022 18:00:07 +0800</pubDate><description><![CDATA[理解闭包的一个很重要的前置知识是作用域。
所以如果你对作用域还不是很了解的话，建议看一下这篇文章 《一文彻底搞懂作用域》
什么是闭包
闭包就是每次调用外层函数时，临时创建的函数作用域对象,因为内层函数作用域链中包含外层函数的作用域对象，且内层函数被外部使用，导致它一直保持着对父级作用域的引用，这个时候就形成了闭包。所以闭包通常是在函数嵌套中形成的。
例如下面的代码，就形成了闭包：
function foo (){
  var name = 'snail'
  return function(){
    c]]></description><category></category></item><item><title><![CDATA[el-form表单验证的一些方法总结]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/122654349</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/122654349</guid><author>AC_Surprise</author><pubDate>Sun, 23 Jan 2022 17:43:49 +0800</pubDate><description><![CDATA[Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
知识点

根据文档说明，model为表单的数据对象，el-form通过model绑定数据。
reles为表单验证规则对象，其中字段名要与model中的字段名一一对应
el-form-item 容器，通过 label 绑定标签，prop属性设置为需要验证的字段名
表单组件通过 v-model 绑定 model 中的数据

表单校验相关属性

hide-re]]></description><category></category></item><item><title><![CDATA[el-tree 踩过最深的坑，没有之一。设置与上级严格关联、下级不严格关联，CV即用]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/122455357</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/122455357</guid><author>AC_Surprise</author><pubDate>Wed, 12 Jan 2022 17:29:19 +0800</pubDate><description><![CDATA[先看需求
重点：当你点击勾选复选框时候，若点击父节点，其上下子节点全部统一跟随父节点变化；若点击子节点，子节点部分勾选时父节点处于全选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点还是选中状态。
效果
图是扒下来的，意思一样，实现效果一样（不会制作gif图 o(╥﹏╥)o）

实现逻辑
这个功能在官方文档上是没有直接呈现的，需要我们自己去对代码进行理解然后编写。
首先要用到官方文档提供的方法与事件：


第一步 我们需要设置 check-strictly 属性，目的是为了打破父子相互关联的做法，]]></description><category></category></item><item><title><![CDATA[前端js获取文件名、后缀，截取文件名后缀、多个小数点完整文件后缀]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/122383096</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/122383096</guid><author>AC_Surprise</author><pubDate>Sat, 08 Jan 2022 17:18:32 +0800</pubDate><description><![CDATA[工作中遇到了各种各样的获取文件名称文件后缀等等一些问题，这里做一个简单的记录
获取文件名，不带后缀
var  fileName = "xxxxxx.tif";     
var  strFileName=fileName.replace(/(.*\/)*([^.]+).*/ig,"$2");

获取文件后缀
(1)    var FileExt=file_path.replace(/.+\./,"");
(2)    var fileExtension = file_path.substring(file_]]></description><category></category></item><item><title><![CDATA[❤ 面试官最喜欢问的13种Vue修饰符 ❤ ♥♥ 建议收藏 ♥♥]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/120322684</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/120322684</guid><author>AC_Surprise</author><pubDate>Thu, 16 Sep 2021 11:39:34 +0800</pubDate><description><![CDATA[文章目录前言1. Lazy2. Trim3. Number4. Stop5. Capture6. Self7. Once8. Prevent9. Native10. Left，Right，Middle11. Passive12. Sync13. KeyCode结束语
前言
大家好，我是阿磊，众所周知，修饰符 是Vue的重要组成成分之一，利用好 修饰符 可以大大的提高开发效率，接下来给大家总结了一些 面试官最喜欢问的13种Vue修饰符。

1. Lazy
 Lazy 修饰符的作用是，改变输入框的值时value]]></description><category></category></item><item><title><![CDATA[JS原生方法（String篇、Promise篇）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/120236947</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/120236947</guid><author>AC_Surprise</author><pubDate>Sat, 11 Sep 2021 16:46:17 +0800</pubDate><description><![CDATA[在实际开发中，或许我们会使用很多JavaScript自带的方法，而且这些方法确实给我们带来了很多便利，大大提高了我们的代码小路，但是，有没有一瞬间，你想知道这些方法到底是怎么实现的呢？接下来我将用几篇博客来进行了解
通过这篇文章可以学到什么呢？

 重新巩固各种方法的使用方式
 巩固基础，即便没有这些方法，也能靠基础语法去实现

文章目录String篇SliceSubstrSubstringPromise篇AllRaceAllSettledAny
String篇
Slice
参数代表含义

start：开始]]></description><category></category></item><item><title><![CDATA[JS原生方法（Object篇、Function篇）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/120223380</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/120223380</guid><author>AC_Surprise</author><pubDate>Fri, 10 Sep 2021 16:11:32 +0800</pubDate><description><![CDATA[在实际开发中，或许我们会使用很多JavaScript自带的方法，而且这些方法确实给我们带来了很多便利，大大提高了我们的代码小路，但是，有没有一瞬间，你想知道这些方法到底是怎么实现的呢？接下来我将用几篇博客来进行了解
通过这篇文章可以学到什么呢？

 重新巩固对象与函数各种方法的使用方式
 巩固基础，即便没有这些方法，也能靠基础语法去实现

文章目录定义一个测试对象[Object]EntriesFromEntriesKeysValuesInstanceOfIs函数[Function]CallApply
定义一]]></description><category></category></item><item><title><![CDATA[JS原生方法（数组篇）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/120097130</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/120097130</guid><author>AC_Surprise</author><pubDate>Sat, 04 Sep 2021 15:36:54 +0800</pubDate><description><![CDATA[在实际开发中，或许我们会使用很多JavaScript自带的方法，而且这些方法确实给我们带来了很多便利，大大提高了我们的代码小路，但是，有没有一瞬间，你想知道这些方法到底是怎么实现的呢？接下来我将用几篇博客来进行了解
通过这篇文章可以学到什么呢？

 重新巩固数组各种方法的使用方式
 巩固基础，即便没有这些方法，也能靠基础语法去实现

文章目录定义一个测试数组ForEachMapFilterEverySomeReduceFindindexFindFillIncludesJoinFlat
定义一个测试数组
co]]></description><category></category></item><item><title><![CDATA[input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/120060116</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/120060116</guid><author>AC_Surprise</author><pubDate>Thu, 02 Sep 2021 16:03:16 +0800</pubDate><description><![CDATA[介绍
input 全部类型
input 框的类型到底有多少种呢，零零散散算下来有二十多种
总述
常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。
另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。
text]]></description><category></category></item><item><title><![CDATA[Http 请求常见状态码报错（200/404/500）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/119809630</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/119809630</guid><author>AC_Surprise</author><pubDate>Sun, 22 Aug 2021 14:13:20 +0800</pubDate><description><![CDATA[为了更好地了解各个状态码代表的意思，做了一个总结，在实际的工作中，主要涉及到的还是200,404,500等。
1. http状态码分为五大类：

2. 100-199 信息性质状态码
1XX的状态码不常用，这是HTTP/1.1引入的信息性状态码。目前已有的信息性状态码如下图：

100状态码的目的是对这样的情况进行优化：http客户端应用程序有一个实体的主体部分要发送给服务器，但希望在发送之前查看一下服务器是否会接受这个实体，当要避免客户端发送给服务器一个无法处理或使用的大实体时，发送100状态码Expec]]></description><category></category></item><item><title><![CDATA[Element Ui 级联选择器获取选中子节点的所有数据]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/119543719</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/119543719</guid><author>AC_Surprise</author><pubDate>Mon, 09 Aug 2021 18:13:54 +0800</pubDate><description><![CDATA[第一次写这种需求，花了两个小时时间，为了这个第一次做一个记录，如有更好的方法可评论告知 [抱拳]
这是要获取的数据，这是一个行业的选择，选中的结果是每一种行业的最后一级
需求就是图中所表达的，选中最后一级数据进行渲染，并且拿到最后一级的除了Value与Label的其他值

使用的是Element ui 中的级联选择器进行开发
HTML代码

使用options绑定我们的树形结构
使用props属性配置所需要参数
使用ref获取dom元素
绑定change事件使用getCheckedNodes方法获取选中子节]]></description><category></category></item><item><title><![CDATA[判断文件后缀名，根据不同的后缀名渲染不同的文件]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/118310765</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/118310765</guid><author>AC_Surprise</author><pubDate>Mon, 28 Jun 2021 20:00:00 +0800</pubDate><description><![CDATA[理想必须要人们去实现它，它不但需要决心和勇敢而且需要知识。——吴玉章
今天写项目的时候，遇到一个有意思需求，也是第一次搞奋斗了三个小时完工，也算是记录一下第一次把，哈哈…
项目需求是跟据后台传过来的数据，进行不同的页面渲染，听着是不是不难啊，但是后台传过来的数据有文件，有图片，有压缩包，而且还是个数组，一条记录里多个文件，这样一听是不是就觉的难了点，嘿嘿，给你们看一下需求：
点击按钮，弹出Dialog，还在开发中所以不要纠结数据哈，数据都是随便写的

图片要渲染轮播图方式，而且需要预览：

文件渲染也要轮.]]></description><category></category></item><item><title><![CDATA[Element UI 表单校验切换单选按钮遇到的坑（已解决）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/118160939</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/118160939</guid><author>AC_Surprise</author><pubDate>Fri, 25 Jun 2021 19:50:52 +0800</pubDate><description><![CDATA[既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。——康德
最近在写项目的时候遇见了一个不是很难但是很绕的坑，本人也是在坑中躺了半天才从坑里跳出来。先来给大家说一下遇到的问题：


对，你没看错，就是这么一个问题，让我躺坑好久（解决问题后崩溃了好一会）。点击不同的单选按钮使用表单中不同的字段，因为复用了同一个表单，所以出现了这个校验重复出现的问题，其实这个问题真的好简单，哈哈，解决完之后心态都不一样了。就像人们常说的 对于未知的东西总是充满各种各样的想法，当明白了之后又觉得瞬间索然无味。.]]></description><category></category></item><item><title><![CDATA[TypeScript 深入学习枚举类型]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/118160358</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/118160358</guid><author>AC_Surprise</author><pubDate>Wed, 23 Jun 2021 19:33:07 +0800</pubDate><description><![CDATA[今天看到一句话特别好，分享给大家：
立志是事业的大门，工作是登堂入室的旅程。——巴斯德
枚举是 TypeScript 新增加的一种数据类型，这在其他很多语言中很常见，但是 JavaScript 却没有。使用枚举，我们可以给一些难以理解的常量赋予一组具有意义的直观的名字，使其更为直观，你可以理解枚举就是一个字典。枚举使用 enum 关键字定义，TypeScript 支持数字和字符串的枚举。
1. 数字枚举
我们先来通过数字枚举的简单例子，来看下枚举是做什么的：
enum Status {// 这里你的TSL.]]></description><category></category></item><item><title><![CDATA[TypeScript与JavaScript的区别和基础语法对比]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/117778472</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/117778472</guid><author>AC_Surprise</author><pubDate>Thu, 10 Jun 2021 20:20:18 +0800</pubDate><description><![CDATA[做前端两年了，之前是一直使用JavaScript进行开发，时间长了发现现在的主流框架都已经开始向TypeScript方向靠拢了，正好公司也给了学习的机会，就把这几天的学习成果分享一下。
TypeScript与JavaScript是目前项目开发中较为流行的两种脚本语言，我们已经知道TypeScript是JavaScript的一个超集，就是覆盖了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。但是他们之间又有什么样的区别呢？我带你们了解一下。]]></description><category></category></item><item><title><![CDATA[VUE交互式组件的封装（内有代码实现逻辑与完整代码）]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/117586860</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/117586860</guid><author>AC_Surprise</author><pubDate>Sat, 05 Jun 2021 10:14:21 +0800</pubDate><description><![CDATA[这个组件封装很容易，难就难在了代码逻辑上，接下来带你了解一下这个组件的代码逻辑，写完之后发现好简单，哈哈…
下图是代码实现的效果，鼠标悬停不同六宫格，左侧手机的两个div显示不同的信息

代码分析：

首先写两个div分左右两个盒子，居中显示，屏幕自适应。
左侧盒子是贴了一张手机的backgroud（url），内置两个盒子，使用定位设置两个盒子位置
右侧盒子使用定位的方式决定六宫格的位置，六宫格首先做了一个白色的background（url）,然后使用：hover事件更改背景图片与字体颜色。
给循环体绑定@]]></description><category></category></item><item><title><![CDATA[给element ui 的table中的每一行增加样式]]></title><link>https://blog.youkuaiyun.com/AC_Surprise/article/details/116707225</link><guid>https://blog.youkuaiyun.com/AC_Surprise/article/details/116707225</guid><author>AC_Surprise</author><pubDate>Wed, 12 May 2021 14:39:31 +0800</pubDate><description><![CDATA[需求
现在做的项目是要求给表格中的前三位增加第一金牌第二银牌第三铜牌的一个需求
思路
跟据表格中每一行的索引来决定第一、第二、第三，然后分别给他对应的css样式
效果

第一步

第二步

第三步

完整代码如下：
html代码
           &lt;div&gt;
                &lt;el-table v-loading="loading"
                          header-row-class-name="headerRow"
         ]]></description><category></category></item></channel></rss>