qq_40549954的博客

原创 css好看的滚动条

<div class="test test-1"> <div class="scrollbar"></div></div>.test { width : 50px; height : 200px; overflow: auto; float : left; margin : 5px; border : none; } .scrollbar { width : 30px; height: 3

原创 antd响应式布局完美适应

<a-col :xxl="6" :xl="8" :lg="8" :md="12" :sm="24"> </a-col>

转载 使用XLSX.utils.sheet_to_json()解析excel，给空的单元格赋值为空字符串

1

原创 before-upload自定义传参

:before-upload=" (file) => { return handleBefore(file, '你的参数')}" handleBefore(file, params) {}

原创 uni-app的input框只允许输入两位小数的数字

var that = this e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null this.$nextTick(() => { that.rechargeMoney= e.target.value })

原创 在vue页面使用i18n

主要有两种方法，第一种是在template中直接渲染，另一种在data中使用。template中<span>{{$t('success.return')}}</span>// i18n文件success:{ return: '返回列表' },data中<!-- 导航 --><div class="successNav"> <span v-for="(item,index) in navList" :key="inde

原创 js实现鼠标移入移出改变图片路径问题

刚开始一直在用js尝试mouseover和mouseout这俩属性，结果根本不起作用。换成mouseenter和mouseleave，成功。实现效果：移入前移入后代码：<div class="detaiBtns"> <div>没有了</div> <div class="detailReturn" @mouseenter="mouseEnter()" @mouseleave="mouseLeave()"> <img

原创 ElementUI级联禁用demo

在做项目的过程中，后端只需要传父级分类的id。因此我通过设置props.checkStrictly = true取消选中关联。由于只需要父级分类，因此最后一级设置禁用选项。根据官方文档提示，配置props的disable属性即可。最终效果图如下：后端接口数据：代码示例：（！这里写的比较麻烦，大家可以根据自己的代码赋值简化）<el-form-item label="对应的上级分类"> <el-cascader :options="options" :props="pro

原创 多行元素的文本省略号

display: -webkit-box-webkit-box-orient:vertical-webkit-line-clamp:3overflow:hidden

原创 css去掉input边框并设置placeholder样式

input框：input { border: 0; outline: none; background-color: rgba(0, 0, 0, 0); font-size: 18px; color: #999999; font-family: Heiti SC; } input::-webkit-input-placeholder { font-size: 18px; color: #999999; font-family: Heiti SC; }text

原创 echarts图表自适应

<div id="studentbox" style="width: 100%;height: 400px;margin-top: 20px;"></div>注意：div中定义的宽度一定要用百分比，否则无法显示效果。myChart.setOption(option);window.addEventListener("resize",function(){ myChart.resize(); }); ...

原创 关于vue中使用element组件修改默认样式出错的问题

我在做项目的过程中遇到这样的问题，我需要改变element中radio默认的颜色，改成如下样式：但是为了不影响其他的页面的样式，我们一般会在style标签内加scoped，这会产生一个问题，那就是对element的样式无法生效。因此，我对网上的方法做了归纳，有以下几种：在样式前面加/deep/。在你需要修改的组件外面嵌套一层div，给div设置class或者id，在你需要修改的样式前面加你定义的class名。在vue文件里写两个style标签，一个加scoped，内部写该页面的内部样式，另一个s

原创 在HBuilder上运行vue项目报错：（yarn : 无法加载文件 D:\devSoftware\Nodejs\yarn.ps1，因为在此系统上禁止运行脚本。）

通过报错提示，打开网址https://docs.microsoft.com/zh-cn/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.1可以看到在命令行输入Set-ExecutionPolicy -ExecutionPolicy RemoteSigned再重新运行项目即可...

原创 js往数组内插入不重复的数据

handAdd(index, row) { var arr = [] arr.push(row) for (var i = 0; i < arr.length; i++) { if (this.courseArr.indexOf(arr[i]) === -1) { this.courseArr.push(arr[i]) this.$message({ message: '添加成功', type: 'success' });

原创 清空element表格的多选择状态

this.$refs.multipleTable.clearSelection();

原创 vue+element实现表格导出和勾选导出功能

首先我们需要安装两个插件cnpm install --save xlsx file-savercnpm install -D script-loader然后，在src文件夹下面新建一个excel文件夹，文件夹下面放Blob.js和export2Excel.js两个js文件的内容可以在以下代码自取Blob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, h

原创 Echarts柱状图和折线图demo

Echarts柱状图demo第一次简单使用echarts图表，因此在博客记录一下option = { legend: { data:['销量'], right: '10%' }, grid:{}, xAxis: { data: ["1月份","2月份","3月份","4月份","5月份","6月份","7月份","8月份"] }, yAxis: { show: false },

原创 web前端总复习（六）：CSS盒子模型

概述：用来装页面上的元素的矩形区域。分类：W3C盒子模型① 内容区宽高：设置的width、height② 盒子宽高：内容区宽高+padding区宽高+border区宽高③ 所占屏幕的宽高：内容区宽高+padding区宽高+border区宽高+margin区宽高IE盒子模型① 内容区宽高：设置的宽高-padding区宽高-border区宽高② 盒子宽高：设置的width、height③ 所占屏幕的宽高：设置的宽高+margin区的宽高两种盒子模型的转换：① 将..

原创 web前端总复习（五）：HTML5新增的元素

标签语义化① header：定义文档或节的页眉② nav：定义导航链接③ article：定义文档内的文章④ section：定义文档中的节⑤ aside：定义页面内容之外的内容⑥ footer：定义文档或节的页脚表单① datalist：定义输入空间的预定义选项② output：定义计算结果（新增input属性）color、date、email、number、time…多媒体① canvas：使用js的图像绘制② svg：使用svg图像绘制③ audio：定义声..

原创 web前端总复习（四）：Cookie、sessionStorage、localStorage的区别

共同点：都是存在浏览器端，都是同源的。区别cookie：① 数据始终在同源的http请求中携带（即使不需要），在浏览器和服务器之间来回传递。② 在设置的cookie过期时间之前一直有效，即使浏览器或窗口关闭。④ 有路径（path）的概念。可以限制cookie在某个路径下，存储大小只有4k左右。sessionStorage：① 不把数据发给服务器，保存在本地。② 在浏览器关闭之前有效，不能持久保存。localStorage：① 不把数据发给服务器，保存在本地。② 窗口或浏览器

原创 web前端总复习（三）：如何用CSS画一个三角形

三角形原理：边框均分div {width:0px;height:0px;border-top:10px solid red;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;}

原创 web前端总复习（二）：BFC

概念：BFC是块级格式化上下文，用于布局块级盒子的一块渲染区域。BFC触发方式：① 根元素，即HTML标签。② 浮动元素，即float为left、right。③ overflow的值不为visible，为auto、scoll、hidden。④ display的值为inline-block、flex、grid、table等。⑤ 定位元素，即position为absolute、fixed。作用：① 清除浮动。当子元素存在float属性时，父容器没有设置高度，父容器的高度由子元素撑起..

原创 web前端总复习（一）：http和https

http和https的基本概念http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一种用于从服务器传输超文本到本地浏览器的传输协议。它可以使得浏览器更加高效，减少网络传输。https：是http的安全版。是一种以安全为目标的http通道。http和https的区别① http传输信息不加密，https传输信息加密。② 端口不同，http为80端口，https为443端口。③ https协议需要ca证书，费用高。http请求的方式① head：类似get请求，但返回的..

原创 JavaScript中的this指向

this指向一直以来都是大家比较容易混淆的概念，这篇文章给大家介绍几种this指向，希望大家看了之后能够对this指向有个比较清晰的认识。首先来看一段代码// firstfunction foo() { console.log(this.a)}var a = 1foo()// secondconst obj = { a: 2, foo: foo}obj.foo()// thirdconst c = new foo()接下来让我们来分析以上代码块。first.

原创 vue中报错：[vuex] module namespace not found in mapActions(): comment/

控制台报错检查了我的仓库中namespaced，没有写错。最后发现，该模块所在的小仓库没有在大仓库中进行注册，导致出错。在大仓库中注册index.js代码import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'import app from './modules/app'import settings from './modules/settings'import user from '.

原创 vue+vuex+axios+element-ui实现登录页面

这个例子只是简单实现了登录页面的部分功能，包括用户信息（用户名、密码）的验证，登录跳转到主页等功能。1.目录结构2.运行效果3.代码实现由第一点我们可以看到项目的目录结构整体概要，我们编写代码的思想是从aip–>store–>views。由于api中的方法整体封装到utils中，因此，我们先编写utils中的代码。utils中新建两个js文件，分别为config.js和request.js。在config.js中编写用于维护项目的配置文件，或者公共的将来可能发生更改的数据。在req

原创 原生ajax、jquery ajax、axios对比总结

1.介绍原生ajax： ajax全称Asynchronous JavaScript and XML，即为异步的 JavaScript 和 XML。ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。jquery ajax： jquery 提供多个与 ajax有关的方法。通过 jquery ajax方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本

原创 error Missing space before function parentheses space-before-function-paren 报错

原因：严格模式开启，函数名称或function关键字与开始参数之间缺少空格。解决方法：在项目中手动新建一个vue.config文件，在文件内写以下代码：module.exports = { lintOnSave:false,//这里禁止使用eslint-loader //以下是其它相关配置 　　configureWebpack: { externals: { "BMap": "BMap" } }}配置完使用npm r

原创 vue中的路由守卫总结

一、路由守卫分类全局守卫路由独享守卫组件内守卫其中，全局守卫中可分为全局前置守卫和全局后置守卫。二、路由守卫用法首先介绍一下导航钩子三个参数的含义：to：即将要进入的目标路由对象，也就是新路由。from：当前导航即将要离开的路由对象，也就是旧路由。next：调用该方法后，才能进入下一个钩子函数。其中next() 表示直接进to所指路由next(false) 表示中断当前路由next(‘route’) 表示跳转指定路由next(‘error’) 表示跳转错误路由a.

原创 e.target和e.currentTarget的区别

事件冒泡如图所示，有两个div。大div（outer）包裹小div（inner），当使用onclick事件点击inner时，就会产生事件冒泡代码示例<div id="app"> <div class="outer" @click="outer"> outer <div class="inner" @click="inner"> inner </div> </div> &

原创 linux系统解决端口占用问题

今天在使用云服务器启动云服务的jar包时，由于7788端口被占用而报错在网上查找资料之后总结如下：先找到占用7788端口的进程，找到他的进程id，执行以下命令lsof -i :7788拿到进程id之后执行以下命令杀死进程kill -9 进程id...

原创 git常用命令总结归纳

最近在学习使用git来管理我的仓库总结了以下常用命令将远程仓库代码克隆到本地仓库git clone url更新：git pull origin master如果修改了git仓库中的文件，想再次提交，这时候只需 git add *git commit -m ‘注释内容’git push origin master将本地仓库代码上传到远程仓库将当前文件夹初始化git本地仓库： git init将当前文件夹中所有的文件添加到缓存中：git add *将缓存中的所有文件提交到本地仓库中：gi

原创 原生ajax总结（思维导图）

原创 CSS3动画之实现大话西游师徒四人走动

CSS3动画之实现大话西游师徒四人走动该动画实现所需素材如下:背景图师徒四人最终效果这里主要使用的是 动画animation-timing-function: steps(7, end);将图片分成八份逐帧播放完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

原创 CSS实标题现同心圆的缩放

CSS实标题现同心圆的缩放最近学习了css动画效果，记录一下同心圆的缩放问题问题描述我先设置了两个div，外圈是class=“one”，内圈是class=“two”, 代码如下：<body> <div class="one"></div> <div class="two"></div></body>分别设置他们的div，给他们边框，并且设置成圆形.one { width: 500px;