- 博客(29)
- 收藏
- 关注
RSS订阅转载 js阻止a标签默认跳转
js阻止a标签默认跳转函数： // 阻止默认跳转 function stopDefault( e ) { if ( e && e.preventDefault ) e.preventDefault(); else window.event.returnValue = false; return false; } 使用： // 阻止所有a标签的跳转
2021-07-21 19:13:17
603
原创 VUE实现计时器
VUE实现计时器1.定义开始计时，结束计时方法 //开始方法 answer() { this.beginTime = moment().format("X"); //点击开始，获取当前时间(秒) }, hangUp() { this.endTime = moment().format("X");//点击结束，获取当前时间(秒) },2.在computed中添加计时器时时更新时间 watch: { sessionDuration(
2021-07-06 18:31:48
7363
1
原创 Ant design vue 日期选择框日期禁用
Ant design vue 日期选择框日期禁用<a-date-picker :disabledDate="getDisabledDate" v-model="returnForm.beginDate" format="YYYY-MM-DD" />今天之前的年月日不可选，不包括今天methods: { getDisabledDate(current) { return current < moment().subtract(1, "
2021-04-27 16:35:49
1027
1
原创 前端Base64编码
Base64编码什么是Base64编码我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。 图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。如图所示：google搜索框右侧的搜索小图标使用的就是base64编码在css里的写法：#fkbx-spch, #
2021-04-12 10:17:36
2415
1
原创 VUE hookEvent监听组件生命周期
hookEvent监听组件生命周期1.内部监听生命周期函数在Vue组件中，可以用过on,on,on,once去监听所有的生命周期钩子函数，如监听组件的updated钩子函数可以写成 this.$on(‘hook:updated’, () => {})export default { mounted() { this.chart = echarts.init(this.$el) // 请求数据，赋值数据 等等一系列操作... // 监听窗口发生变化，resize组件
2021-02-24 15:37:02
224
1
原创 less使用样式穿透强制修改ant design vue样式
less使用样式穿透强制修改ant design vue样式修改前：修改后： .form2 /deep/.ant-form-item-label{ text-align: left; }在外层样式名称和ant design组件样式名称中间添加 /deep/即可
2020-12-18 14:24:29
2892
4
原创 Vue实现函数防抖和节流
效果：一、在utils文件加下创建globalFunction.js文件export default { //防抖 debounce(func, wait) { let timeout; return function () { const context = this; const args = [...arguments]; if (timeout) clearTimeout(t
2020-11-11 15:24:19
582
1
原创 Menu组件报错：TypeError: Cannot read property ‘isRootMenu‘ of undefined
Menu组件报错：TypeError: Cannot read property ‘isRootMenu’ of undefined父组件： <a-menu :selected-keys="selectedKeys" :opnekeys="openKeys" mode="inline" theme="dark" class="menu" @click="menuClick" > <templat
2020-11-06 09:40:26
2106
原创 vue-router query和params传参(接收参数)$router $route的区别
1.query方式传参和接受参数传参: this.$router.push({ path:'/xxx', query:{ id:id } }) 接收参数:this.$route.query.id注意:传参是this.router,接收参数是this.router,接收参数是this.router,接收参数是this.routethis.router 和this.router和this.route区别：ro
2020-10-02 14:12:52
292
原创 JS中的深拷贝和浅拷贝
JS中的深拷贝和浅拷贝如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝如果B没变，那就是深拷贝。1.浅拷贝：let a=[0,1,2,3,4], b=a;console.log(a===b);a[0]=1;console.log(a,b);此时，修改数组a，数组b也跟着变了。1.1object.assign(target,source)Object.assign 方法只复制源对象中可枚举的属性和对象自身的属
2020-09-23 17:05:48
156
原创 Vue.set的使用
Vue 无法检测到对象属性的添加和删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。object：要更改的数据源(可以是对象或者数组)key：要更改的具体数据value ：重新赋的值<template> <div> <p v-for="item in items" :key="item.id">{{item.name}}<
2020-09-23 16:35:27
230
原创 Node.js学习笔记（四）
1.http搭建简易服务器//导入node的http模块let http = require('http')//通过createServe获取http实例let server = http.createServer();//给服务器绑定接受请求的处理事件，当服务器接收到客户端发送的请求后，会调用后面的处理函数，处理函数接受两个参数server.on('request', (res, req) => { console.log(req.url); res.end('hello
2020-09-18 10:59:57
152
原创 Node.js学习笔记(三)
1.node事件let fs = require('fs')//引入events模块let events = require('events')//创建事件对象，实例化EventEmitter类var eventLog = new events.EventEmitter();//监听事件eventLog.on('byDir', () => { console.log('创建目录事件触发');})fs.mkdir('./img', () => { cons
2020-09-17 17:51:31
165
原创 Node.js学习笔记（操作文件系统）
1.模块的导入与导出CommonJs的规范：模块引用：模块通过require方法来同步加载所依赖的模块模块定义：在node中一个文件就是一个模块，提供export对象导出当前模块的方法或者变量模块标识：模块标识传递给require()方法的参数，可以是按驼峰命名的方式，也可以是文件路径模块的导出：方法一：使用module.exports对象整体导出一个变量对象或者函数方法二：可将需要导出的变量或者函数挂载到exports对象的属性上function fn() { console.
2020-09-17 17:46:19
141
原创 Node.js学习笔记（一）
node.jsNode.js是一个运行在服务端的JavsScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。安装地址：https://nodejs.org/en/download/NPM使用介绍NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几
2020-09-17 17:35:59
135
原创 如何突破CSS内联的最高优先级！important
如何突破CSS内联的最高优先级！important再不改变当前代码的情况下，使这张图片的宽度为300px<img src="1.jpg" style="width:480px !important">CSS方法：<img src="img/1.jpg" style="width: 300px !important;max-width: 200px;"><img src="img/1.jpg" style="width: 300px !important;tran
2020-09-12 11:01:12
605
原创 CSS元素隐藏
CSS元素隐藏display:none1.DOM结构：浏览器不会渲染display：none的元素，不占据空间。2.事件监听：无法进行DOM事件监听。3.性能：动态改变此属性会引起重排，性能较差。4.继承：不会被子元素继承，毕竟子元素也不会被渲染。5.transition:transiton不支持display。visiblity：hidden1.DOM结构：元素被隐藏，但是会渲染不会消失，占据空间。2.事件监听：无法进行DOM事件监听。3.性能：动态改变此属性会引起重绘，性能较高。4
2020-09-12 10:47:04
176
原创 div水平垂直居中方法总汇
div水平垂直居中方法总汇方法一：绝对定位方法：不确定当前div的宽度和高度，采用transform：translate(-50%,-50%)；当前div的父级添加相对定位(position:relative).Children{ background: aqua; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }方法二：绝对定位方法：确定当前div宽度
2020-09-12 10:37:55
193
原创 BFC_IFC_GFC_FFC
BFC_IFC_GFC_FFC1.什么是FCFormatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。2.BFC2.1什么是BFCBFC(Block Formatting contexts)，“块级格式上下文”。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父
2020-09-12 09:52:58
227
原创 todoList应用及交互
todoList应用及交互效果图：(主要以移动端为基础)<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="
2020-09-04 09:31:42
305
原创 rem用法
rem用法1.什么是remrem是CSS3中新增的单位值 r:root em:(font size of element)相对单位，先后对于html的字体大小单位，可以用于任何设定长度的单位。2.rem用法css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。因为100%=16px，1px=6.25%，所以10px=62.5%，这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来。注意，rem是只相对于根元素htm的fo
2020-09-01 23:47:16
502
原创 DMO简介和DOM操作（二）
DMO简介和DOM操作（二）节点的获取、设置和删除1.获取节点元素节点.getAttribute（属性名）2.设置节点元素节点.setAttribute（属性名，新的属性值）3.删除节点元素节点.removeAttribute (属性名)<body> <div id="d1"> helloWorld </div> <script type="text/javascript"> var d1 = document.q
2020-09-01 23:21:12
1079
原创 DOM简介和DOM操作（一）
DOM简介和DOM操作JavaScript的组成ECMAScript：JavaScript的语法标准，包括变量、表达式、运算符、函数、if语句、for语句等等。DOM：文档对象模型(Document object Model)，操作网页上的元素的API，比如让盒子移动、变色、轮播图等。BOM：浏览器对象模型，操作浏览器部分功能的API，比如让浏览器自动滚动。节点节点(Node):构成HTML网页的最基本单元，网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释等都是一
2020-09-01 00:16:08
462
原创 移动端与响应式
移动端与响应式 Viewport1.什么是Viewport？Viewport是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的窗口(Viewport)中，通常这个窗口比屏幕宽，这样就不用把每个网页挤到很小的窗口中,用户可以通过平移或者缩放来看网页的不同部分。2.设置Viewport常用的Viewport meta标签大致如下：(此标签仅适用于移动端,pc端无效)<meta name="viewport" content="width=device-width,initial-scale
2020-08-26 10:23:38
195
原创 flex布局（弹性布局）学习笔记
flex布局（弹性布局）学习笔记弹性容器： 设置了display：flex;这个元素为弹性容器，弹性容器中的子元素会按照弹性布局进行排列。弹性子元素：设置了display:flex;元素的子容器即为弹性子元素，但不包括孙子元素。flex容器属性：1.display属性：display:flex 将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%display:inline-flex 将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度2.flex-direction:指
2020-08-25 22:34:29
388
1
原创 CSS浮动与清除浮动
CSS浮动与清除浮动1.CSS浮动浮动的作用：1.1 浮动可以解决文字包围图片的问题1.2 浮动可以解决div之间的间隔问题1.3 浮动可以向左或者向右进行排版布局img{float：left}添加浮动前，文字行基线和图片对齐。添加浮动后，文字包围图片。添加浮动前，图片之间会有莫名其妙的间隔添加浮动后，图片进行向左浮动浮动可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素边缘或者是设置了浮动的其他元素的边缘2.CSS浮动的高度塌陷问题当父元素高度设置为0时，子元
2020-08-24 23:30:14
218
原创 html实现QQ客服发送消息
html实现QQ客服发送消息 <a target="blank" href="tencent://message/?uin=QQ号&Site=网页地址&Menu=yes"> <img src="../../src/assets/img/nav01.png" alt="点击这里给我发消息"></a>
2020-08-17 16:41:12
675
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人