6块腹肌的博客

原创 settings.json配置

settings.json配置。

原创 解决npm安装时的冲突

解决npm安装时的冲突，在命令后面加：-legacy-peer-deps。v7以上版本会有这种问题。

原创 js获取年月日 时分秒的日期格式

const date = new Date()const year = date.getFullYear()const month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`const day = date.getDate() >= 10 ? date.getDate() : `0${date.getDate()}`const hours = date.getHours() .

原创 什么是变量提升

变量提升这个问题，通常发生在var声明的变量里，就是说当使用var声明一个变量的时候，该变量会被提升到作用域的顶端，但是赋值的部分并不会被提升。如： console.log(a) var a = 'bar' 在声明a的语句之前，就可以输出a，值为undefined；这就是变量提升。实际开发中，使用let和const会更好些。...

原创 获取当月（月份）天数

const year = 2021;const month = 8;new Date(year, month, 0).getDate();传入年份和月份即可，第三个参数固定写0；即可。

原创 axios的post请求设置form-data请求格式

headers:{ 'Content-Type': 'application/x-www-form-urlencoded'},

转载 安装npm及cnpm(Windows)

【安装步骤】一、安装node.js1.前往node.js官网下载并安装工具，这里安装路径选到D盘，D:\Program Files\nodejs安装完毕后在命令行输入以下命令测试是否安装成功，正确会出现版本号npm -v2.改变原有的环境变量， (1)配置npm的全局模块的存放路径以及cache的路径，例如两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹，输入以下命令改变npm配置npm con..

原创 echarts散点图x轴和y轴在中间位置

设置居中之后的效果x轴和y轴设置方法：min: (value) => (-value.max),max: (value) => (value.max),

原创 echart鼠标移入图表，不显示对应的x轴线和y轴线

原创 echart线图圆点（标记）样式

默认：空心改为实心：其它参数：'circle','rect','roundRect','triangle','diamond','pin','arrow','none'可以通过'image://url'设置为图片，其中 URL 为图片的链接，或者dataURI。URL 为图片链接例如：'image://http://xxx.xxx.xxx/a/b.png'...

原创 echart线图和柱形图不重叠的方法

定义两个yAxis（数组），一个给柱形图，一个给线图。柱形图给一个max：柱形图最大值*2线图给一个min：线图最大值 - （（线图最大值 - 线图最小值）* 2）具体代码如下：option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: [ { t.

原创 前端H5页面在真机调试查看请求接口的插件

安装：npm i vconsolenpm i vconsole然后在main.js文件添加代码：import Vconsole from 'vconsole';const VConsole = new Vconsole();// console.log(VConsole);然后运行页面就可以看到调试的小窗口了打开之后是这样的成功！...

原创 Module build failed: Error: ENOENT: no such file or directory, scandir ‘C:\Users\admin\Desktop\GB\ne

Module build failed: Error: ENOENT: no such file or directory, scandir 'C:\Users\admin\Desktop\GB\news\trunk\front\news\node_modules\node-sass\vendor'执行：node rebuild node-sass

原创 笔记--获取数组倒数第6个(指定)元素的下标值

const arr = [1, 2, 3, 1, 12, 332, 445, 666, 565, 656, 777, 888, 999];// 获取到倒数第6个元素const sixEl = arr.slice(-6).shift();console.log(sixEl); // 666// 通过indexOf获取到下标值const index = arr.indexOf(sixEl);console.log(index); // 7注释：slice(-6)，获取到arr数组的后6个元.

原创 css美化浏览器默认滚动条样式

废话不多说，直接上代码吧//滚动条的宽度::-webkit-scrollbar { width:5px; height:5px;}//滚动条凹槽的颜色，还可以设置边框属性::-webkit-scrollbar-track-piece { // background-color:#f8f8f8; // 这个不要更加好看，如果要了这个样式，没有产生滚动条的时候都会有一个框在右侧 border-radius: 2px;}//滚动条的设置::-webkit-scrollb

原创 vue打包生成zip压缩包

安装插件：cnpm install filemanager-webpack-plugin --save-devcnpm install filemanager-webpack-plugin --save-dev在build/webpack.base.conf.js在module.exports加入plugins: [ new FileManagerPlugin({ onEnd: { delete: [ './dist/mydem

原创 vue中css背景图打包后不显示

修改 build/utils.js 中的 generateLoaders 方法，如下代码，增加 publicPath: '…/…/'if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else { re

转载 webpack实现开发、测试、生产等环境的打包切换

使用webpack构建的工程，在开发过程中不同环境的配置不同，在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。但是每次都手动修改会比较麻烦，本文简单介绍如何通过对webpack进行配置，实现不同环境打包分类配置； 1.修改build文件夹下build.js文件 添加声明变量修改前修改后2.修改config文件夹下prod.env.js文件添加不同环境的名称修改前修改...

原创 react父子组件之间传值

父组件：import React, { Component } from 'react';import Child from './child2'class Parents extends Component { constructor(props) { super(props); this.state = { parentValue: '这是父组件传给子组件的值' } } getValue(val) { console.log(val

原创 react父组件和子组件之间相互调用方法

父组件：import React, { Component } from 'react';import Child from './child2'class Parents extends Component { constructor(props) { super(props); } handleCancel = () => { console.log('父组件的方法被子组件调用了'); } childClick = () => {

原创 react报错：Cannot read property ‘setState‘ of undefined

错误如下：代码如下：原因是this已经不是当前组件的this了，可以在方法里加一个bind改变this的指向

原创 vue父组件向子组件传递函数方法

父组件<template> <div> parent <child :parentHandler="parentHandler" /> </div></template><script>import child from "@/components/child";export default { components: { child }, data() { return {};

原创 前端上传图片之前先进行图片压缩

直接上代码export function zipImg(file) { return new Promise((resolve) => { if (file && (file.size / 1024 > 500 || file.type !== 'image/gif')) { let img = new Image() img.src = URL.createObjectURL(file)

原创 输入框只能输入正整数

<el-input v-model="awardsNum" oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^0-9]/g,'')};" />

原创 css让字体平均铺满容器

<div class="label">账号</div>.label { width: 60px; height: 31px; line-height: 31px; padding-right: 10px; text-align: justify;}.label::after { display: inline-block; width: 100%; content: "";}效果

原创 修改input的placeholder的字体颜色

input::-webkit-input-placeholder { color: #cccccc;}

原创 公众号H5页面接入微信支付

官方示例：function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":"wx2421b1c4370ec43b", //公众号名称，由商户传入 "timeStamp":"1395712654", //时间戳，自1970年以来的秒数 "nonceStr":"e61463f8efa9409

原创 axios通过get方式下载Excel

vue+element环境下的写法，其它框架也基本一样主要是将后台返回的数据处理之后下载为.xlsx的文件，再模拟点击下载 axios({ method: "get", url: "url****", responseType: "blob", // 重点 headers: {***}, params: params, }) .then((res) => { .

原创 input防止输入负数

使用replace处理一下就可以了<input type="number" oninput="value=value.replace('-', '')" />

原创 公众号接入通联支付大致流程

一：获取codeappid自己在微信公众号后台可以看到的二：根据code获取openId三：执行支付，会获取到一个通联返回的正式支付地址，然后打卡这个地址就可以支付了。进入通联支付返回的地址之后，里面的内容不受我们控制，一般是确认金额页面和支付方式的内容。...

原创 vue调试工具不展示出来

有可能是项目使用了script的方式引入了vue.min.js的原因导致的，开发环境可以临时使用cdn地址就没问题了。<script src="http://cdn.bootcss.com/vue/2.6.10/vue.js" charset="utf-8"></script>

原创 js限制输入框只能输入数字，且只能输入11位数

oninput事件加判断<input type="number" oninput="if(value.length>11)value=value.slice(0,11)">

原创 js限制输入框只能输入两位小数点

通过onimput事件和正则实现<input type="number" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)">

原创 Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

这个是因为node-sass没安装好，所以要重新安装运行命令：npm install node-sass --registry=https://registry.npm.taobao.org

原创 前端实现打印页面的指定内容 + 快递面单的模板

原理是利用iframe，原生js写法完整demo。如果需要打印的内容比较多，建议做一个模板。本人在项目中是用vue做的，需要打印的部分在另外一个页面，这样看起来会没有那么乱。记得将打印部分隐藏起来，另外分享一个快递面单的模板。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-.

原创 input的type为number时，maxlength失效的解决办法

<input type="number" oninput="if(value.length>30)value=value.slice(0,30)" placeholder="请输入设备编号" />利用oninput事件，这样可以限制长度

原创 正则表达式限制input输入框只能输入两个小数

<input type="number" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)"/>这样就只能输入数字，并且小数点只能输入2位

原创 80行原生js代码实现省市区选择

html<!-- * @Descripttion: Descripttion * @version: version * @Author: LGQ * @Date: 2020-05-28 09:55:34 * @LastEditors: LGQ * @LastEditTime: 2020-05-28 11:35:30--><!DOCTYPE html><html><head> <meta charset="UTF-8"&g

原创 HTML实现横向滚动

父容器必须要设置允许横向滚动，以及不换行。就是这么简单..white-space: nowrap;overflow-x: scroll;

原创 vue动态设置元素的高度

data: { rightScrollHeight: 0,}this.$nextTick(() => { this.initDOM()})methods: { initDOM() { this.rightScrollHeight = this.$refs.rightScroll.clientHeight + 'px' },}...