- 博客(50)
- 收藏
- 关注
RSS订阅原创 el-date-picker 有效时间精确到时分秒 且给有效时间添加标记
【代码】el-date-picker picker-options selectableRange 有效时间精确到时分秒 且给有效时间添加标记。
2024-06-14 13:53:37
370
原创 自定义指令实现文本框正则校验--只能输入数字
/ 校验文本框--只能输入数字，且可以规定最小值，最大值/*** @param binding 可选，绑定表达式，允许输入{ min: 1, max: 10 }* @param vnode 虚拟dom*/// 不允许输入E} else {if (!!!// 双向数据绑定，为了避免出现文本框中显示的内容已被修改，但是提交的数据仍旧是旧数据的情况let _this = vnode.context // vnode.context上下文就是当前组件的 vue 实例。})
2024-03-06 10:06:22
491
原创 解决子元素的click事件会触发父元素的dbclick事件
通过taget来确定，只有target点击到父元素的时候，采取执行父元素的dbclick方法，下面的例子中，因为子元素覆盖到了父元素上，所以采用$event.target.parentElement来确定父元素。正确思路：要用子元素的dbclick事件的冒泡去阻止父元素的dbclick，子元素的dbclick方法为空。错误思路：通过阻止子元素click事件的冒泡，阻止父元素的dbclick。
2024-01-18 10:25:06
782
1
原创 audio报错DOMException: play() failed because the user didn‘t interact with the document first
封装一个包含自动播放，循环播放、暂停功能的Aduio组件
2023-04-03 09:55:59
2519
原创 Echarts双Y轴一侧轴不显示刻度
Echarts双Y轴一侧轴不显示刻度原因：两侧轴都未指定min和max的值，而且两侧轴数据相差过大解决：yAxis:[ { type: 'value', name: '甲烷浓度', min: 0, // 指定最小值 max: 10000, // 指定最大值 axisLabel: { formatter: '{value}ppm.m', margin: 10, colo
2021-12-05 10:32:05
4976
1
原创 2021-09-06
自记回流和重绘的区别是什么从输入url到页面展示，这一过程发生了什么promise是什么回流和重绘的区别是什么回流：当render tree的一部分或全部，因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这一过程称为回流。每个页面至少需要一次回流，就是在页面加载的时候。重绘：当render tree中的元素需要更新属性，而这些属性不会影响大小，布局，只会影响元素的外观，比如background-color，这一过程称为重绘。区别：回流必当引起重绘，而重绘不一定会引起回流。从输入url到页面
2021-09-06 15:49:12
101
原创 2021-08-13
函数执行上下文// 1、创建ao对象 AO{}// 2、找形参和变量声明 将变量和形参名 当做 ao对象的属性名 值为undefined// 3、实参形参相统一// 4、在函数体里面找函数声明 值赋予函数体function fn(a, c) { console.log(a); // function a() { } var a = 123 console.log(a); // 123 console.log(c); // function c() {} f
2021-08-13 14:15:06
99
原创 copy-webpack-plugin与webpack版本对应问题
copy-webpack-plugin注意点：– copy-webpack-plugin与webpack的版本有很大关系，copy-webpack-plugin@5.00要使用webpack@4.0– 具体的对应关系登录copy-webpack-plugin的git的Tags的package.json查看，并且不同的版本写法也不一样，去README.md中查看写法，一定要看仔细！！！！...
2021-04-01 14:56:15
3809
原创 vue3.0 学习笔记
vue3学习笔记vue3.0六大亮点vue3.0 如何变快的？vue3.0六大亮点performance：性能比vue2.0快1.2-2倍tree shaking support：按需编译，体积比2.0更小composition API：组合API（类似React Hokks）better typescript support：更好的ts支持custom renderer API：暴露了自定义渲染APIfragment，teleport（protal）suspense：更先进的组建vue
2021-02-27 16:25:13
368
1
原创 js vue 下载excel(.xls)文件
@[TOC](js vue 下载excel(.xls)文件)1、首先，后端给到的是一个文件在服务器中的存储地址 D:\MaxSecFile\Export\Alarm_20201023111205.xls2、本下载针对chrome浏览器，使用a标签进行下载import request from '@/util/request'// 下载downloadExcel() { // 筛选数据的条件 let params = {} download(params).then(res => {
2020-10-23 13:18:14
894
原创 js/-函数
js–函数/* * 作用域 * - 在js中一共有两种作用域 * 1、全局作用域 * -- 直接编写在script标签中的JS代码，都在全局作用域 * -- 全局作用域在页面打开时创建，在页面关闭时销毁 * -- 在全局作用域中有一个全局对象window * 它代表的是一个浏览器窗口，它由浏览器创建我们可以直 * 接使用 * -- 在全局作用域中： * 创建的变量都会作为window对象的属性保存 * 创建的函数都会作为win
2020-10-20 22:42:13
303
原创 js-object学习笔记
js--object学习笔记1、js数据类型基本数据类型：number、string、boolean、null、undefined引用数据类型：object
2020-10-18 20:44:23
172
原创 vue drag实现v-for循环出来的dom元素拖拽改变位置、排序
vue实现v-for循环出来的dom元素拖拽改变位置、排序初始效果实现添加路线效果，点击√，完成添加路线5已经添加成功实现拖拽效果，更改路线3和5的位置代码如下：<template> <div class="right-wrap"> <!-- 路线展示区 --> <div class="all-item-wrap"> <div class="item-wrap" v-
2020-09-25 17:55:00
2144
原创 基于vue+ts的平行四边形进度条
基于vue+ts的平行四边形进度条// 子组件部分<template> <div style="position: relative"> <!-- 带正负 --> <div v-if="data.isCenter" style="position: relative"> // 绑定id 做唯一标识 <div class="progress-bar-wrap" :id=
2020-09-24 11:29:15
517
原创 function func() { for(var i=0； i＜3； i++) { setTimeout(()=＞{ consol
面试题之异步、闭包、作用域<script> function func() { for(var i=0; i<3; i++) { setTimeout(()=>{ console.log(i) }, 1000) } } var result = func()</script>// 执行结果是 打印三次 3原因：1、setTimeout是异步
2020-09-21 22:07:12
1386
原创 Vue transition 实现图片轮播效果
<template> <div class="carousel-wrap" @mouseenter="enter()" @mouseleave="leave()"> <transition-group name="list" tag="ul" @after-leave="autoPlay" class="ac_scroll-ul" >
2020-09-01 16:44:38
1092
原创 Vue+Typescript+iview实现用户权限登录
当我们点击登录按钮时，发生了什么1、login.vue 页面<template> <div class="login-wrap" :style="{backgroundImage: 'url('+ bg +')', backgroundSize: 'cover' }"> <div class="login-form-wrap"> <div class="title">登录</div>
2020-07-22 16:03:49
1413
原创 前端面试基础题
基础题1、常用的js定义类的方法，继承的方法有哪些？2、this在不同的情况下会指向不同的内容，请举例。3、Apple call bind的用途与区别4、definePropety、proxy都是做什么用的。5、什么是闭包，举个例子；6、举例 字符串 和 数组 常用哪些方法；7、可用于js的设计模式，如工厂模式、代理模式、装饰模式、观察者模式。8、reactJS的生命周期函数有哪些。9、使用webpack搭建项目。10、异步回掉 可以用什么方法写成同步代码？11、Html5有哪些新特性
2020-07-11 14:39:40
231
原创 使用canvas实现一个二叉树（vue+ts）
使用canvas实现一个说明树（vue+ts）// 子组件 tree.vue<template> <div class="binary-tree-wrap"> <canvas :id="id"></canvas> </div></template><script lang="ts"> import { Component, Vue,
2020-06-28 15:27:11
1315
原创 iview Table 实现单选
data() { return { arr: [] }}{ title: '选择', align: 'center', width: '80', render: (h, params) => { this.arr.push(params.row) return h('div', [ // iview 的 Checkbox组件 h('Checkbox', {
2020-05-15 16:30:33
1907
原创 TSLint Reassigning parameter 'd' is forbidden 警告
Reassigning parameter 'd' is forbidden将tslint.json的 ‘no-parameter-reassignment’，改成false"no-parameter-reassignment": falseTSLint校验规则：https://palantir.github.io/tslint/rules/
2020-05-14 10:46:55
644
原创 forEach循环 当满足条件时跳出当前循环
forEach循环 当满足条件时跳出该循环使用try catchtry { this.menuData.forEach((item: any) => { if ((toPath as string).indexOf(item.url) === 0) { this.currentUrl = item.url throw new Error ('EndIterative')...
2020-04-30 13:18:11
4368
原创 Vue+ts 自定义select组件，返回选中的元素
Vue+ts 自定义select组件，返回选中的元素自定义子组件selecTemp父组件使用select自定义子组件selecTemp// SelectTemp.Data 参数类型export interface SelectData { selectOption: any[], // 下拉框选项 type: string, // select类型，主要用来区分不同样式 ...
2020-04-17 13:30:04
1775
原创 高德地图的infowindow使用click方法
使用vue.extend()createInfoWindow() { var _this = this var MyComponent = Vue.extend({ template: '<div style="width: 500px">' + '<div class="title">温室</div&g...
2020-04-15 14:39:40
2012
原创 iview的Table中引用自定义组件
// 引入组件import { Component, Vue } from 'vue-property-decorator'import ProgressByColor from '@/components/cm/progress.vue'@Component({ components: { ProgressByColor }})export default class Ab...
2020-04-15 14:26:28
609
原创 滚动条样式
效果图<div class="info-wrap"></div>/** style css */.info-wrap { height: 100px; overflow-y: auto;}.info-wrap::-webkit-scrollbar{ width: 4px; height: 4px; overflow-x: hidd...
2020-04-15 14:15:38
124
原创 给li动态添加border，兄弟元素会抖动的解决方案
li { border: 2px solid transparent; // 先写上border进行占位，这样就可以防抖动。transparent为透明色}// 动态添加border.active-li { border-top: 2px solid; border-right: 2px solid #067fe2; border-bottom: 2px solid; ...
2019-12-04 10:11:52
1003
原创 杂食向--看看看看看着你
看看看看看着你技术类配色及摄影类学习类网站技术类1、vue_cli3+vue+typescript–主要学习构建思路，包括node脚本初级写法https://www.jianshu.com/p/44500385abdd配色及摄影类1、摩洛哥：旅行、摄影、城市配色https://www.zcool.com.cn/work/ZNDAzNDg1MTI=.html2、纽约：曼哈顿，HUAWE...
2019-11-07 17:20:40
121
原创 [warning] non-arrow functions are forbidden
[warning] non-arrow functions are forbidden// 警告non-arrow functions are forbidden// 警告代码片段getTunnelInfo: function () { ...}// 修改getTunnelInfo () { ....} // 编译通过...
2019-10-17 17:31:10
2533
原创 object access via string literals is disallowed
object access via string literals is disallowed // 错误提示object access via string literals is disallowed// 问题代码config.headers.common['Authorization'] = localStorage.getItem('TOKEN_KEY')// 问题代码修改le...
2019-10-17 17:24:52
792
原创 vue+vue_cli3 + typeScript + echarts热力图
vue+vue_cli3+typeScript+echarts热力图准备工作准备工作1、申请百度地图秘钥http://lbsyun.baidu.com/apiconsole/key/create注：如果是运行在浏览器端，Referer白名单只写 * 即可，入下图所示：2、开始2.1、index.html在public/index.html中，在header中引入所需js文件2.2...
2019-09-26 15:45:39
860
10
原创 使用VUE_CLI3生成vue+typescript的项目
1、基于vue-cli3创建项目npm create project-first默认安装babel，eslint，我们选择手动安装生成后如图所示1、public目录下的index.html为项目html主入口2、src目录下的main.ts是整个工程入口文件ts3、browserslistrc：配置浏览器的要求，css针对不同浏览器会有兼容性问题。配合postcss的autop...
2019-08-21 14:41:39
717
原创 头像闪烁效果
<div class="head-portrait blingbling"></div><style>.head-portrait{ height: 20px; width: 20px; border-radius: 20px; border: 1px solid brown;}/*头像闪烁部分*/@keyframes scaleout{ ...
2019-08-02 15:49:55
832
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人