m0_45272038的博客

原创 解决el-dialog弹出时，页面抖动，右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)

后来我找了一下页面具体样式变化，发现弹框在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；更直接的办法参考 方法2，直接不让遮罩层罩盖滚动条，滚动条正常展示，但是这样的话即使有遮罩层用户也能正常拉动滚动条；在弹出el-dialog时，会发现弹出框弹出时，页面会抖动，滚动条被遮罩层覆盖直接没有滚动条了，导致页面缩小了几个像素点（滚动条的宽度）；体验感不好，会影响到页面的布局，且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点；

原创 导出为PDF加封面且分页处理dom元素分割

【代码】导出为PDF加封面且分页处理dom元素分割。

原创 经营简报echarts图

【代码】经营简报echarts图。

原创 经营简报及考核360表格

懒得封装了，所以整体没有封装。

原创 echarts立体柱状图，正负极不同颜色的设置

【代码】echarts立体柱状图，正负极不同颜色的设置。

原创 带启用/禁用文字的开关

【代码】带启用/禁用文字的开关。

原创 sass中混入的用法

【代码】sass中混入的用法。

原创 input限制只能输入数字

【代码】input限制只能输入数字。

原创 window11 安装node及配置环境变量

一、安装环境本教程演示的环境：系统：win 11 64位node.js下载地址: http://nodejs.cn/node.js版本：长期支持版本（本教程基于16.15.0）点击选中图标下载到电脑本地即可。二、安装步骤1、双击安装包，一直点击下一步。2、点击change按钮，更换到自己的指定安装位置，点击下一步（不修改默认位置也是可以的 ）。3、一直点击下一步，最后安装成功即可。三、验证安装1、在键盘按下【win+R】键，输入cmd，然后回车，打开命令行界面。

原创 vue引入echart的图表

vue引入echarts示例

原创 数组方法splice（）,fill()

文章目录W3C上关于splice的介绍splice方法的参数一些巧用当我只想增加的时候参数应该长这样:只想删除清空数组一些例子W3C上关于splice的介绍这个方法会改变原数组，返回的是删除的元素splice方法的参数第一个：是操作的数组下标index第二个：是删除个数第三个：可选参数是增加内容，第一次看到让人疑惑的是，这并没有说明何时是删除，何时是增加。一些巧用当我只想增加的时候参数应该长这样:array.splice(index,0,增加元素)只想删除array.splice

原创 react——antd日常小用法

文章目录一、将antd的日期选择器DatePicker选中的时间转化为我们想要的2022-02-11这种格式一、将antd的日期选择器DatePicker选中的时间转化为我们想要的2022-02-11这种格式如图，将vauDate打印出来就是在日期选择器上选择的日期，要转化成2022-02-06用到了日期处理类的库monent.js,要先引入moment.js处理日期,format()方法是用来将获取的日期进行格式化的，比如这里将被moment处理过的数据用年月日的形式展示中间用**-**隔开，如果写

原创 Vue-Router原理以及简单实现

文章目录hashhistoryhashhistory

原创 publicPath

原创 qs插件的简单介绍

安装：npm i qs --save应用场景：如果后端需要我们传的参数不是以对象的形式传，如注意：以下代码需引入axios和qs插件才能正常使用create(){ let num=qs.stringify({num:123}) axios.post('/goodsList',{ data:num }).then(res=>{ console.log(res) })}此时后端收到的参数为{data:"num=12"}...

原创 react日常小结

文章目录数据字典概念：用数据字典有什么好处？数据字典概念：数据字典一般是给开发人员用的，直接列出了系统后台数据库的情况。数据库中包含的所有表及其每个字段的类型、对应的中文名称、含义等。一般用于省市县，类型，性别等不容易改变的数据。用数据字典有什么好处？前端人员可以直接通过获取数据字典里面的数据进行页面某些内容的渲染，如果数据库有什么东西改了前端可以不用更改只要数据库改变就行。方便维护。一般对于省，市，县 ，性别，类型等数据，在用下拉菜框时，每用一个下拉框就需要在数据库中建一个表，而使用数据字典，

原创 日常算法例题

1、两数之和给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。//方法1var twoSum = function (nums, target) { if (nums.length < 2) { return -1; } else { for (le

原创 面试题总结

文章目录js中什么是基本数据类型，什么是引用数据类型，他们是怎么储存的？基本数据类型引用数据类型 统称为object，细分的话有以下面试题js中什么是基本数据类型，什么是引用数据类型，他们是怎么储存的？基本数据类型NumberBooleanStringNullUndefinedSymbel(ES6新增的)bigInt引用数据类型 统称为object，细分的话有以下ObjectArrayDataFuntionRegExp基本数据类型的数据直接存储在栈中；引用型数据类型的

原创 vue项目创建后没有webpack.config.js文件

文章目录关于webpack.config.js文件没有的原因手动创建一个 vue.config.js没有配置vue.config.js之前，打包后的文件如下配置后关于webpack.config.js文件没有的原因Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.co

原创 vue监听路由实现页面刷新

文章目录一、监听路有变化二、vue实现页面刷新三、示例一、监听路有变化监听路有变化二、vue实现页面刷新vue实现页面刷新三、示例监听页面刷新 watch:{ $route:{ handler(val,oldval){ // console.log(val);//新路由信息 // console.log(oldval);//老路由信息 this.id = this.$route.query.id this.$

原创 路由传参踩过的坑

文章目录一、 问题1、设置浏览器不保存当前路由历史记录1、声明式路由2、编程式3、原生js实现2、有没有一直页面之间的传值方式是可以不记录在路由上的1、使用query传值--地址栏可见2、使用params传值--地址栏不可见一、 问题我先形容一下，从这个页面（图1）点击去，直接激活相应的vant-tab（如图2），因为我是用的路由传参，实现了这个功能，但是有个问题就是我在这个页面点击多次其他的vant-tab,浏览器会有history，所以我点返回只会改变这里的路由变成前几次点击的vant-tab，但是

原创 vue中引用插件qrcode生成二维码

官网地址效果图(只生成了二维码，没有加样式效果)：1、下载npm install vue-qr --save2、使用<template> <div> <vue-qr :logoSrc="src2" :text="text" :size="200" :callback="test"></vue-qr> <vue-qr text="Hello world!" qid="testid"></vue-qr>

原创 Vue 移动端微信内H5调起支付

文章目录一、业务流程一、业务流程官方文档可进入查看 // 提交订单 submit () { const _this = this // eslint-disable-next-line eqeqeq const data = { type: JSON.parse(sessionStorage.getItem("type")), keys: JSON.parse(sessionStorage.get

转载 正则匹配大全

在做项目的过程中，使用正则表达式来匹配一段文本中的特定种类字符，是比较常用的一种方式，下面是对常用的正则匹配做了一个归纳整理。1、匹配中文:[\u4e00-\u9fa5]2、英文字母:[a-zA-Z]3、数字:[0-9]4、匹配中文，英文字母和数字及下划线：^[\u4e00-\u9fa5_a-zA-Z0-9]+$同时判断输入长度：[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}5、(?!_)　　不能以_开头(?!.*?_$)　　不能以_结尾[a-zA-Z0-9

原创 vue（element-UI）项目——登录与退出

文章目录1、难点：记录http状态解决方法：2、token作用：用于服务器验证原理：![在这里插入图片描述](https://img-blog.csdnimg.cn/a7df62f601554a19b0c24dac4db3584b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjcyMDM4,size_16,color_FFFFFF,

原创 路由导航守卫

这里我放的是整个router.js的代码import Vue from 'vue'import VueRouter from 'vue-router'import Login from '../components/Login.vue'import index from '../views/index.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/login' }, { path:

原创 全局通用样式

/* 全局样式 */@charset "utf-8";html,body { margin: 0; padding: 0; }h1,h2,h3,h4,h5,h6 { padding: 0; margin: 0; font-weight: normal;}ol,ul,dl,dt,dd,li { padding: 0; margin: 0; list-style: none;}p { pad

原创 vue项目报错

Syntax Error: TypeError: Cannot read property ‘parseComponent’ of undefined原因：是vue-template-compiler 升级版本后 parseComponent函数已被删除，导致 component-compiler-utils报错。解决办法：删除旧版本:npm uninstall @vue/component-compiler-utils更新最新版本：npm install --dev @vue/compone

原创 vue脚手架中关闭eslint

创建一个脚手架项目后eslint一直报错解决方法：新建一个vue.config.jsmodule.exports = { lintOnSave: false}这种方法会直接关闭eslint的所有提示。

原创 webpack（二）——处理.css文件

文章目录1、先创建文件夹写一个样式文件2、安装style-loader和css-loader3、 配置webpack.config.js4、运行`npx webpack`1、先创建文件夹写一个样式文件在index.js文件中引用上面的样式文件import '../src/style/index.css'给dom添加class方法一：1dom.className='box';方法二： dom.classList.add('box');如图所示2、安装style-loader和css-load

原创 webpack（一）——快速入门

文章目录第一步：创建项目结构第二步:安装loadash依赖编写js文件第三步：引用文件第一步：创建项目结构创建一个空文件夹初始化 npm init -y本地安装webpack npm i -D webpack 如果安装的是4.0+的版本，还需要进行第四步安装（此工具用于在命令行中运行webpack）npm i -D webpack3、4 两步何以合并为一步npm install webpack webpack-cli --save-dev创建如下所示项目目录此时webpack文件目录如

原创 html中table标签及属性

table表格HTML表格由table标签以及多个tr、th和td标签组成table表示表格，整个表格要包含在<table></table>标签中tr表示表格中的行，是单元格的容器，一行可以包括多个单元格th表示表格中的单元格，我理解为列,th放在tr内表示这一行为标题行，其中的字体会默认粗体居中显示td表示表格中的单元格，我理解为列，td也要放在tr内，可以理解为内容行tfoot表示表格最后一行<table>是<tr的上层标签<tr>

原创 vue没有总结的的乱七八糟知识点

文章目录1、[详解vue 路由跳转四种方式 (带参数)](https://www.jb51.net/article/160401.htm)2、[Vue点击切换Class变化,实现Active当前样式操作](https://www.jb51.net/article/191007.htm)1、详解vue 路由跳转四种方式 (带参数)2、Vue点击切换Class变化,实现Active当前样式操作...

原创 验证码的随机生成与校验

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机生成验证码</title> <style type="text/css"> #code { width: 100px; height: 100px; background-color: #ddd;

原创 电脑关机倒计时（与前端无关的电脑使用技巧）

首先我们用输入win+R会打开如下页面输入shutdown -s -t 1800回车即可这里设置的是半小时后关机

原创 git基础用法及命令

目录1. 名词解释2. 本地提交3. 提交到远程库4. 下载远程项目到本地（抓取，合并，拉取）5. 分支部分6. 版本回退7. git 忽略列表1. 名词解释工作区：就是你平时存放项目代码的地方暂存区：暂存区，用于临时存放你的改动，事实上它只是一个文件，保存即将提交到文件列表信息本地仓库：仓库区（或版本库），就是安全存放数据的位置，这里面有你提交到所有版本的数据。其中HEAD指向最新放入仓库的版本远程仓库：托管代码的服务器，常用 Gitee、GitHubreadme 文件：可为 txt 文档

原创 uni-app（4）——子组件、父组件之间的传值

文章目录父传子：用属性传值，然后在子组件用props接收子传父：父传子：用属性传值，然后在子组件用props接收子传父：在子组件定义一个点击事件，this.$emit(“myChild”，参数)，注意：这里的参数是子组件要传给父组件的参数在父组件引用子组件的地方用自定义事件 @myChild="事件名"进行接收具体代码如下：父组件：<template> <view class="content"> <view class="text-area">

原创 nui-app(3)——上传图片以及图片上传成功后预览图片

<template> <view class="content"> <view class="text-area"> <text class="title">{{title}}</text> <button type="default" @click="chooseImg">上传图片</button> </view> <!-- 上传的图片渲染到页面 --> <ima

原创 ES6 ...扩展运算符

文章目录数组合并对象合并数组合并//es5let b1 = ['平凡的世界第一部', '平凡的世界第二部', '平凡的世界第三部']let b2 = ['人生']let b3 = b1.concat(b2);//console.log(b3) // (4) ["平凡的世界第一部", "平凡的世界第二部", "平凡的世界第三部", "人生"]//es6let b4 = [...b1, ...b2];b4[3] = '月夜静悄悄'console.log(b4) //(4) ["平凡的世界第

原创 uni-app(1)——全局配置

文章目录全局配置全局配置