m0_52765288的博客

原创 react配置gan货大全

1.中间件的使用1-1 react-thunk处理函数异步请求1.安装：npm i redux-thunknpm i redux-thunk1.2在store/index.js 进行导入配置import { createStore, applyMiddleware } from 'redux'import thunk from 'redux-thunk'1.3调用applyMiddleware将 thunk 添加到中间件列表中const store = createSt.

原创 gan货大全

1.将excel文件中的日期格式的内容转回成标准时间// 把excel文件中的日期格式的内容转回成标准时间export function formatExcelDate(numb, format = '/') { const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000) time.setYear(time.getFullYear()

原创 el-dialog弹框设置可拖拽

/ v-dialogDrag: 弹窗拖拽属性'top:0px;'// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);} else {}})()// 鼠标按下，计算当前元素距离可视区的距离const screenWidth = document.body.clientWidth // body当前宽度。

原创 key值的应用场景

我们知道我们在v-for中会绑定对应的key值，这个key作为虚拟dom的身份标识，当响应式更新时，diff算法会将key值进行比对，根据新旧虚拟dom的key决定是否重新渲染。除了在v-for身上他也可以巧妙的利用在组件上如下图我们的树上有个刷新按钮。很多人可能会用v-if将此dom重新刷新，但是还有种方式就是可以给tree绑定一个key，当点击刷新按钮更新tree的key值即可完成刷新操作。

原创 解决el-tree子节点过多导致渲染缓慢问题

el-tree子节点过多导致渲染缓慢问题

原创 vue-table那些走过的坑---持续更新

1.解决动态添加表格列顺序错乱// 等待dom更新将表格进行重新编排 this.$nextTick(() => { this.$refs.table.doLayout() })2.动态添加表格列 fixed布局错乱// 1.el-table身上加上loading属性 <el-table ref="table" v-loading="loading" :ele

原创 动态创建a标签下载excel

excel导出1，拿到后端返回的数据2.运行如下代码 var url = window.URL.createObjectURL(new Blob([res.data])) const link = document.createElement('a') link.href = url link.download = this.$t('sbom.spDef') + '.xlsx' document.body.appendChild(link)

原创 前端移动端刘海屏适配

body { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); .

原创 antd分页器修改跳至文字

原创 解决vant组件图片上传格式问题

//afterRead代表读取成功之后的回调 <van-uploader class="my-upload" :after-read="afterRead" >后端要求传入一个file文件 返回一个url给你。此时我们需要在外层套入一个formDate格式 async afterRead(file) { this.isLoading=true //创建formDate格式 let formData = new FormData() .

原创 Vue3新增特性

1、Vue3的生态与优势 1-1、Vue3的社区生态：社区生态 - 逐步完善 整体优化 - 性能优化/TS支持优化/组合式API加持 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3 社区生态组件（插件）名称 官方地址 简介 ant-design-vue Ant Design Vue ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步 element-pl...

原创 react项目如何打包优化

1.查看打包命令2.运行打包命令我的是 ` npm run build`3.项目打包和优化-项目本地预览目标：能够在本地预览打包后的项目步骤：1. 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务2. 在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器3. 在浏览器中访问：http://localhost:3000/ 预览项目4. 项目打包和优化-打包体积分析目标：能够..

原创 react中css modules基本使用

1.下载引入包npm i scss -D2.修改样式文件名从xx.scss -> xx.module.scss（React脚手架中的约定，与普通 CSS 作区分）3.组件中进行使用import styles from './index.module.scss'<div className={styles.css类名}></div> 4.最佳用法每个组件的根节点使用 CSSModules 形式的类名（ 根元素的类名：root）...

原创 如何在react导入正确的包

1.react包//useEffect：副作用函数，//useState：给函数组件提供状态 import { React, useEffect, useState, }2.react-dom//渲染domimport ReactDOM from 'react-dom'3.redux// 1.创建store的方法和中间件的方法import { createStore, applyMiddleware .

原创 react—登录功能用户访问权限控制

1.封装公共组件components/AuthRoute进行封装// import React from 'react'import { Redirect, Route } from 'react-router'import PropTypes from 'prop-types'import { hasToken } from '@/utils/token'export default function AuthRoute ({ path, Component }) { return

原创 react—非组件中使用history

1.问题场景我们对token失效进行处理时，需要使用到history来进行跳转，但是在react中history是由useHistory调用得来的，所以我需要在非组件中拿到history对象进行使用2.操作步骤2-1、utils/history.js进行封装import { createBrowserHistory } from 'history'export default createBrowserHistory()2-2、app.js一级路由配置进行全局传入此时我们的

原创 React路由的基本使用

1.安装路由的插件npm i react-router-dom@5.3.02.导入包并使用import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'3.使用HashRouter包裹整个应用，一个项目中只会有一个Routerimport React from 'react'import { BrowserRouter as Router, Route,

原创 开发常用正则校验

1. 手机号码的校验const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/2. 身份证的校验const sfzReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/3. 邮箱的校验const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])

原创 react项目使用redux初始化

1.下载依赖包npm i redux react-redux react-thunk redux-devtools-extension -D2.src下新建store文件夹store文件夹新建如下目录----store // redux相关存放文件夹 ---index.js // redux出口文件 ---actions/模块.js // 存放组件中dispatch的函数 ---actionTypes.js

原创 倒计时逻辑封装（手机发送验证码+五秒页面跳转都适用）

import { useEffect, useRef, useState } from 'react'export default function useCountDown (initCount = 10, callBack) { // 存入到useRef中 const refTimer = useRef() /* 用户可以定义： 1.倒计时的时间 2.倒计时结束的动作 3.何时开始倒计时 */ // 1. 初始化倒计时的时间 const [.

原创 hooks如何给函数组件提供状态以及生命周期

1.useState两种格式1.1 直接传入值 ：useState(0) ； useState('abc')

原创 如何在react中使用createContext进行跨组件通信

如何在react中使用createContext进行跨组件通信

原创 Reaact组件通信

React组件通信我们常用的主要有三种通信方式： 父子组件通信 兄弟组件之间 跨组件层级 1.父传子：父组件向子组件进行传值只需要在子组件的标签身上定义自定义属性即可子组件通过this.props来进行接收父组件：传入自定义属性import { Component } from 'react'import ReactDOM from 'react-dom'import Son from './Son'import Son2 from './Son2'exp

原创 react中绑定事件this指向问题

import { Component } from 'react'import ReactDom from 'react-dom'class Com1 extends Component { constructor () { super() this.state = { num: 100 } } hClick () { // alert(1) console.log(this) } render () { return.

原创 react组件知识

1.React组件创建的两种方式 1-1.Js中的函数创建组件import ReactDom from 'react-dom'const Com1 = <div />const app = ( <div> 函数式组件 <Com1 /> </div>)ReactDom.render(app, document.getElementById('root'))1-2.Js中的class创建组件// esli..

原创 老项目中如何使用eslint

1.下载依赖包npm i eslint -D2.按交互提示安装相关插件npx eslint --init具体配置如下图2-1.检查语法，发现问题并执行代码风格2-2 这些都不是2-3 使用那个框架2-4 使用typescript配置前需要先下载typescript2-5 浏览器、node中运行代码2-6 流行代码风格2-8 Standard风格指南2-9 js格式2-10 npm立即运行3...

原创 react中key属性的作用

当你在react中循环某个dom元素时不写key属性就会报上图的错 意思就是你缺少key属性那么key属性会有什么作用呢背景：如果为父节点添加多个相同的节点，不添加key属性，会报错但是也能够渲染dom，但这种报错的原因主要是影响渲染性能，不利于生成dom节点首先我们得知道 key必须写唯一值 其次 key属性有什么作用呢：key属性的主要作用就是提高性能，减少不必要的diff算法比对 key属性的流程图我放下面了...

原创 vue项目实现多语言国际化支持—i18n

一.element实现多语言1.安装语言国际化的包npm i vue-i18n@8.22.22.配置element-ui// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插件包import locale from 'element-ui/lib/locale'import elementEN from 'element-ui/lib/locale/lang/en'

原创 git的常用命令

git init 初始化git目录 git status 查看状态 git add 文件名 将文件添加到暂存区 git commit -m “提交说明" 将所有文件添加到暂存区 git commit-a -m“提交说明" 不经过暂存区直接将修改的文件提交到版本库 git branch 查看所有分支 git checkout 分支名 若本地有对应分支则直接切换，若本地无对应分支但远程有，则 新建本地分支且将...

原创 vue项目中如何使用环境变量

1.认识环境变量环境变量是指在不同的环境中使用不同的环境下使用不同的变量来进行配置2.常见的环境.env.development //开发环境.env.production //生产环境.env.development ：开发环境——webpack未打包上线之前的环境 .env.production : 生产环境——webpack进行打包之后的环 .env.staging : 测试环境 .env ...

原创 You may have an infinite update loop in a component render function

在项目中遇到这样的一个报错这句话的意思是在组件呈现函数中，可能会有一个无限更新循环。这句话的意思是在组件呈现函数中，可能会有一个无限更新循环。其原因是在for循环中 （render - test - render ）间接修改了data响应数据而且没有终止条件。但是记住状态的改变会导致渲染方法的执行，上述两种情况的相同点在于，执行渲染时，又会改变状态，于是又渲染，迟迟不能生成真实节点，就是v-for循环的数据被我间接更改了 导致render执行解决方案将他写为计算属性...

原创 vue项目使用富文本+代码高亮效果

1.下载关联包npm install vue-quill-editor --save -dev // 富文本npm install highlight.js --save -dev // 代码高亮2.引入并注册import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'/* * 注册 - 业务模块 */// 注册富文本impo

原创 css选中为空标签

1.如何选中多个相同标签中内容为空的那个元素语法：标签:emty 选择内容为空的元素权重：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi..

原创 vue项目如何实现自定义校验规则

1.data中定义rules校验规则export defaut { data(){ rules:{ name: [ { required: true, message: '请输入权限名称', trigger: 'blur' } ], code: [ { required: true, message: '请输入权限标识', trigger: 'blur' } ], descript

原创 为什么element-ui中的row-key属性要写唯一值

设置表格的数据项为树形结构必须要给表格指定row-key <el-table border :data="list" row-key="id"> <el-table-column label="名称" prop="name" /> <el-table-column label="标识" prop="code" /> <el-table-column label="描述" prop="desc...

原创 vue项目中实现excel的导入导出功能

1.下载excel依赖包npm install xlsx -S2.封装组件在src/components下面新建UploadExcel/index.vue组件<template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> &l...

原创 vue项目实现图片上传到腾讯云

1.封装UploadImg组件封装一个具有上传功能的组件 我这里结合element-ui中的<el-upload>来进行封装的(官网cv) show-file-list: 是否显示上传的文件列表 action: 用来指定文件要上传的地址 这里我们要自定义上传动作 所以写# :http-request:自定义上传的行为动作 后面跟一个方法 on-success: 上传成功之后的回调 before-upload： 上传之前需要做的事...

原创 开发bug

1.添加之后页码不跳转发送添加请求后先对tota总数进行++在计算总条数/一页显示多少条 this.total++ this.pageParams.page = Math.ceil(this.total / this.pageParams.size)

原创 Vue.use内部那些你不知道的事儿

1.Vue.use的作用Vue.use的作用是注册全局插件 强化Vue的功能 它也可以用来注册全局组件 但是有一个条件 注册的对象中必须提供install方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。什么意思呢？看代码// import Vue from 'vue'import PageTools from '@/components/PageTools'export default { install(p) ...

原创 具名插槽的使用

1.具名插槽的使用场景当一个组件内有2处以上需要外部传入标签的地方 传入指定的插槽需要使用具名插槽2.使用方式使用具名插槽 只需要在插槽后面加上name属性 使用template传入不同的插槽名字即可子组件中的代码如下：<template> <el-card> <div class="page-tools"> <!-- 左侧 --> <div class="left"> ...