胡肖一-CSDN博客

实现效果select选择器滚动到底部请求下一页组件封装<template> <el-select v-model="selectValue" filterable remote :filter-method="handleSearch" clearable v-loadmore="loadMore" v-bind="$attrs" > <el-option v-for="item in

2022-02-16 17:12:01 910 1

如图: table表格里引用了自己封装的select组件，但是子组件在created里总是执行两次(因为我在created里请求接口了),后来发现是表格里写了fixed的缘故,fixed会让表格重新复制一遍，这样就相当于加载了两次表格的dom，所以子組件才会执行两遍fixed复制可以查看我的另一篇博客,讲的相对细致https://blog.csdn.net/weixin_44157964/article/details/120205080解决方法:如果fixed没有用到的话,可以去掉fixed如

2022-01-24 17:57:42 3348 2

原创 element button自定义图标

实现效果如图，我想实现二维码的图片可以根据不同状态进行disabled的切换，本来是用两个img实现的，但是img还需要设置图片不可点击，虽然css使用cursor:no-drop也能实现，后来突然想到button就默认支持disabled呀，我只用把这个二维码的图片设置为button的自定义图标，我就可以使用button的disabled去控制是否可以点击了代码实现button的icon属性自定义一个图标名称，这个自定义的图标名称会默认添加到button下i标签的class上，我们只需要设置i标签

2021-10-15 16:25:51 10175

原创基于element dialog二次封装弹窗组件

实现效果组件封装<template> <el-dialog :title="title" :width="width" :visible.sync="dialogVisible" :close-on-click-modal="false" v-if="dialogVisible" v-bind="$attrs" > <slot></slot> <div slot="footer

2021-09-30 14:24:35 749

原创前端状态标识组件封装

实现效果没有失败的截图,失败就是红色的点组件封装<template> <span class="badge"> <span :class="{ 'badge-status-dot': !!status, [`badge-status-${status}`]: !!status }" /> <span class="badge-status-text">{{ text }

2021-09-28 16:00:56 280

原创 el-table中同时使用expand和fixed，展开内容被分割成三段解决办法

问题描述如下图所示，el-table中，如果同时使用expand和 fixed的话，expand中的内容会被分割成三份,展开的内容不具有连续性解决结果展示解决最终效果如下,expand中的展开内容连续展示,不会被分割问题分析如下图所示,如果加了fixed之后,element会把table复制两份(如果只加一侧fixed,则只会复制一份),我们在页面上看到的结果是三个表格最终合并之后的样式可以看到,左中右这三个表格是独立存在的,如果只双击中间的内容,左右的内容并不会被同时选中解决办法

2021-09-09 17:34:03 4590 5

原创 el-select二次封装带有全选和数量统计功能

实现效果二次封装el-select组件<template> <div :style="{ width }" class="select-all"> <el-select multiple v-model="selectedList" @change="changeSelect" @remove-tag="removeTag" placeholder="请选择" class="select-

2021-09-01 16:32:59 634

原创重学javascript 1(持续更新)

数据类型原始值类型「值类型/基本数据类型」number 数字string 字符串boolean 布尔null 空对象指针undefined 未定义symbol 唯一值bigint 大数对象类型「引用数据类型」标准普通对象 object标准特殊对象 Array、RegExp、Date、Math、Error……非标准特殊对象 Number、String、Boolean……可调用/执行对象「函数」functiontypeof 检测数据类型以二进制进行检测对象：对象都是以000开头

2021-07-25 15:39:38 172 1

原创 js面试0.1+0.2!==0.3原因以及解决方法

问题原因因为js底层都是按照二进制来存储数据的,十进制的小数转化为二进制如下图它的计算过程如下:给该小数乘以2,然后取整,然后获取小数继续乘以2取整，以此循环所以十进制的小数转换为二进制会出现无限循环，对于无限循环的情况，会自动截掉多余的部分，只存储64位，所以，十进制的小数，在计算机底层存储的时候，就已经“失真”了0.1+0.2在进行运算的时候，是按照二进制来计算的，把计算的结果变成10进制，交给客户端呈现。而浏览器呈现的数值是有长度限制的，超过长度限制的也会被截取掉，截取后的数值从小数最后一位

2021-07-24 23:07:14 611

原创 js for循环遍历每一项异步请求，遍历结束后执行使用promise.all

场景：数组遍历中每次遍历都需要去请求getStaffCover接口，拿到该接口的结果拼接到数组的每一项，等到数组遍历完之后，拿到拼接好的数组。拼接的数组必须是最终遍历的结果，所以得等到所有的请求结束之后进行操作，使用map可以返回每一次异步请求的Promise合集，注意这里不需要return，然后使用Promise.all等待执行完所有的异步操作，然后才会执行后面的代码解决 const promise = nv.aiFaceData.items.map(async item => {

2021-07-08 18:04:48 6999

原创 flex布局超出一行显示省略号失效(占满整行解决方法）

实现效果：如图二报错问题：如图一，标题并没有显示省略号，并且还独占一行问题原因：因为整个li是flex布局，detail为右侧占flex：1，并没有设置固定的宽度，当title设置不换行时，拿到的宽度时整个li的宽度，所以需要把detai设置width:0代码结构解决方法：给父元素的width设为0 li { width: 100%; height: 68px; display: flex; align-items: center; justify-

2021-07-05 20:06:35 4975 2

原创 css更改滚动条样式

实现效果如下.comment-list{ &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(128, 128, 134, 0.8); } &::-webkit-scrollbar-track {

2021-07-05 15:09:21 85

原创 vue中public中的html引入图片不能使用相对路径

得使用绝对路径，/表示根路径

2021-06-29 20:06:27 1065

原创 element 表格固定高度滚动时出现多余线条

解决方法/deep/ .el-table::before { z-index: inherit;}

2021-06-29 17:53:44 494

原创 vue 数组监听新旧值相同的解决方法

场景:我使用的是数组的splice和push更改数组 , 一般使用watch监听也就使用新值就可以 , 刚好这次还需要用到旧值，正常的数组监听只能监听到新值的改变，新老值打印并不能打印出旧值的数（新值和旧值一样），如果需要获取旧值，需要新建一个computed属性，使用JSON转换，然后再监听这个computed，就可以监听到新旧值的改变computed:{ timeMark() { return JSON.parse(JSON.stringify(this.timeList));

2021-06-29 14:02:10 1098

原创 element menu自定义图标以及css动态修改svg颜色

需求：如下图，使用element menu切换菜单的时候当前菜单需要高亮，正常的menu使用的是icon，会自动根据点击变化颜色，但是如果有自定义的图标就需要使用svg，这时候需要动态的设置svg的颜色svg的颜色是在标签内通过fill属性写死的，使用CSS3滤镜filter中的drop-shadow可以更改 .el-menu-item.is-active { .menu-icon { left: -80px; filter: drop-shadow($

2021-06-18 15:21:35 7187

原创全局安装vue-cli报错EEXIST: file already exists

解决方法：npm install -g vue-cli --force 报错图中已经提示了，使用force覆盖

2021-06-07 17:38:04 1789

原创 vue项目打包之后在本地运行最简单的方法

看到网上很多都说使用express-generator,但是个人感觉还是有点麻烦，下面方法用两句命令就搞定啦一、在bash命令行输入npm install -g serve二、接着输入serve -s dist然后如下图，就可以启动了

2021-04-25 15:09:16 2170 1

原创前端开发遇到的问题及解决记录

关于Fiddler打开之后，浏览器无法打开HTTPS网页的解决方法如何优雅的撤销commit和add操作后续补充

2020-09-28 13:10:35 1008

原创前端面试必问（后台管理系统的权限控制与管理）

此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理，建议搭配视频教程一起食用效果更佳在Web 系统中，权限很久以来一直都只是后端程序所控制的．为什么呢？因为Web 系统的不质围绕的是数据，而和数据库最紧密接触的是后端程序．所以在很长的一段时间内，权限一直都只是后端程序要考虑的话题．但是随看前后端分离架构的流行，越来越多的项目也在前端进权限控制一、权限相关概念1.1 权限的分类后端权限从根不上讲前端仅仅只是视图层的展示，权限的核心是在于服务器中的数据变，所以

2020-09-05 22:58:45 26255 20

原创 Webpack4从入门到精通以及和webpack5对比

一、Webpack 简介1.1 webpack 是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2 webpack 五个核心概念1.2.1 Entry入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。1.2.2 O

2020-09-05 15:36:22 1169 1

原创 mobx基础及在react中的使用

一、mobx入门https://cn.mobx.js.org/一、observable可观察的状态https://cn.mobx.js.org/refguide/observable.htmlmapimport {observable} from 'mobx'// 声明const map = observable.map({a: 1, b: 2});// 设置map.set('a', 11);// 获取console.log(map.get('a'));//11console.log

2020-08-29 11:40:22 1904

原创 react中如何支持装饰器(decorators)

create-react-app 中支持decorators安装yarn add @babel/core @babel/plugin-proposal-decorators @babel/preset-env创建 .babelrc{ "presets": [ "@babel/preset-env" ], "plugins": [ [ "@babel/plugin-proposal-decorators",

2020-08-29 11:33:55 812

原创 react-native基础知识以及从零搭建

React native基础React native介绍使用JavaScript和React编写原生移动应用React Native应用是真正的移动应用，React Native产出的并不是“网页应用”，或者说“HTML5应用”，又或者“混合应用”。最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起

2020-08-28 23:42:54 1429

原创 react报错[Intervention] Unable to preventDefault inside passive event listener due to target being tre

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See 解决：在style全局样式添加* {touch-action: pan-y;}， pan-y表示启用单指垂直平移手势(上下滑动事件)。* { touch-action: pan-y;}...

2020-08-17 12:42:12 2558

原创前端25k+面试题及大白话答案整理(持续更新)

1 构造函数,实例,原型对象三者的关系每一个构造函数都会有一个原型对象，通过构造函数的prototype指向原型对象原型对象里也有一个属性叫做constructor ，它又重新指回了构造函数这是构造函数和原型对象之间的相互关系我们可以通过构造函数来创建一个实例对象，只要我们new了构造函数就可以产生一个实例对象，所以我们构造函数就可以指向实例对象，实例对象里面也有一个原型为__proto__ ，这个__proto__指向原型对象 ,并且__proto__里也有一个constructor指向构造函

2020-08-11 22:13:16 6683 2

原创域名解析以及部署阿里云

1、域名解析在阿里云找到域名控制台，点击解析绑定公网IP地址域名可以访问，但是这时候网站还没有和域名绑定，显示80端口默认的页面2、nginx配置使用ftp连接阿里云屏蔽默认80端口的页面因为直接访问域名的话会默认使用80端口，80端口会显示下面这个页面修改nginx.conf代码，注释掉80端口对应的代码修改代码先从从服务器在本地修改完然后在上传到服务器，还有一种可以使用vim的方法可以直接修改服务器代码，下面会讲到。注意：修改完配置文件是要重启nginx的，使用nginx

2020-08-07 22:52:59 625

原创 react-redux的源码分析

react-redux的源码分析这里简单带着大家看一下react-redux的源码：但是第一因为这个教程不是讲源码为主的教程（穿插讲解部分源码），所以源码只会阅读核心的部分；另外我经常会说，整个社区在hooks出现后大量的库转向了hooks，所以在源码中会出现大量的hooks代码；因为某些hooks的作用在这里也不方便解释（可以学习完hooks之后再详细阅读）；首先，我们简单看一下Provider的源码：使用了一个useMemo来返回一个contextValue的对象；这里使用useMe

2020-08-01 17:48:34 255

原创 vue中的.passive修饰符的作用以及应用场景

passive这个修饰符会执行默认方法。你们可能会问，明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事

2020-07-03 20:44:34 1935

原创 vue递归组件的理解

vue的官网递归组件的解释https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6但是解释的例子不是很明确，下面我补充了一个例子，可以详细的理解递归组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi

2020-07-03 16:20:10 381

原创前端团队协作开发git流程

开始1、git软件下载下载地址https://git-scm.com/downloads选择对应的操作系统进行下载，安装的过程中选择默认值，一直点击下一步即可。安装完成后，点击鼠标右键会多出两个选项，代表安装成功，点击Git Bash Here可以进去git命令行工具。输入git --version即可查看当前git版本2、git的工作流程git主要分为三个部分：git仓库：主要存放提交记录暂存区：临时存放被修改文件工作目录：被git管理的项目目录开发者使用git时，需要先将工

2020-07-02 11:06:20 1170

前端技术分享-Electron入门教程

前端技术分享-前端文件上传(大文件分片).pptx

空空如也