- 博客(33)
- 收藏
- 关注
RSS订阅原创 element 中添加一个属性就可解决 el-select 和 el-cascader 下拉项 不随页面滚动问题
经常会遇到滚动页面时，下拉框总是会随着页面滚动条变化而发生改变，或者滚动页面时下拉框就会覆盖在上面层级较高，这样用户体验就非常不好，所以就需要固定
2022-06-15 20:16:20
1565
1
原创 css文本超出隐藏显示省略号（纯中英文、数字都适用）
超出隐藏显示省略号text-overflow: ellipsis; 显示那三个点word-break: break-all; 如果不确定会有纯数字或者中文那一定要加上这句，不然到时候就会出现数字有作用而中文却没有作用，或者中文有作用而数字没有用 display: -webkit-box; //使用了flex，需要加 overflow: hidden; //超出隐藏 word-break: break-all; //纯英文、数字、中文 text-overflow: e
2022-03-25 16:30:33
3005
3
原创 自定义全局和element表格滚动条样式
全局滚动条样式.div { height: 450px; overflow: auto; //必写 &::-webkit-scrollbar { width: 3px; // 横向滚动条 } // 滚动条的滑块 &::-webkit-scrollbar-thumb { border-radius: 3px; background: #eee; }}elementUI el-table 滚动条样式.table { ::v-de
2022-03-25 14:44:50
460
原创 css样式穿透(深度选择器)
大家是不是遇到了这种情况 —> 当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想组件之间的样式覆盖，这时候需要调整它的样式，于是在网页中找到需要改变的样式的类，在浏览器中测试效果很ok，可是当在代码中写，不管怎么都不能改变它的样式。这时就有了 样式穿透1、stylus的样式穿透 使用 >>>语法:外层容器 >>> 组件 { }备注: 不太推荐使用这种方式,据说有点问题！& >&g
2021-12-10 17:39:33
1406
原创 npm install 下载失败报错为：‘proxy‘ config is set properly. See: ‘npm help config‘ （npm i 系列报错二）
这次npm install 又出现了其他错误使用npm install初始化项目依赖失败了，错误提示：‘proxy’ config is set properly…，具体的错误提示如下图所示：解决方案经过报错信息查询解决办法，最终找到了两个比较好的方案，在此总结一下，以便下次再遇到此类问题。方案一：在npm中配置你正在使用的代理。 npm config set proxy http://<proxy-url>:<port> npm config set https-pr
2021-11-24 14:10:14
5363
原创 Open browser failed Please check if you have installed the browser correctly
报错的意思是：打开浏览器失败！！ 请检查您是否正确安装了浏览器！Open browser failed!! Please check if you have installed the browser correctly!解决此类问题有三种方法第一种：搜索 open in browser 扩展工具 --> 设置 --> 安装另一个版本 --> 选择 其他版本安装 即可，就可以运行了第二种：这种情况说明，浏览器需要更新了，没有更新到新版也会出现这种问题，所以 只需.
2021-11-10 20:27:16
10570
原创 微信小程序的模板语法
模板语法数据绑定<!-- 1. 字符串 --><view>{{ msg }}</view> <!-- 2. 数字 --><view>{{ num }}</view><!-- 3. boolear --><view>目标实现了吗？{{flag}}</view><!-- 4. Object --><view>{{per.name}}</view&g
2021-11-07 17:34:31
241
原创 同一个Swiper轮播图多个按钮实现切换效果
一般的轮播图点击切换轮播图都是通过左右箭头或者分页器来进行更改，但是需要的页面往往不可能按照一个样子去排版，那我们该如何去实现点击切换到想要的轮播图呢？下面的图片就列举了三种我们常见需要解决的情况，有八张需要轮播的图片在看下面的之前，可以先想想看，这三个该如何使用swiper里面的按钮去实现功能呢？我们先从最简单的开始第二个，可以明显看出第二个它就是上一张和下一张的按钮，所以我们只需要把按钮放在那个位置就可以实现了。所以这里用的是前进后退切换按钮按钮在什么位置都可以，只要你可以定位到它就可以了
2021-10-31 21:49:20
2515
原创 es6 中 对象和数组常用的方法和属性
对象的方法和属性for…in以任意顺序遍历一个对象的除Symbol以外的可枚举属性for (variable in object) statementvariable在每次迭代时，variable会被赋值为不同的属性名。object非Symbol类型的可枚举属性被迭代的对象。let obj ={ a:1, b:2, c:3 }//遍历出对象属性// 1、for(let prop in obj){ console.log("obj."+prop
2021-10-23 21:00:45
836
原创 found 1 high severity run `npm audit fix` to 问题 和 ERR No package.json found…报错（npm i 系列报错一）
原本打算 npm i 下载模板，结果，都下不了，而且刚开始还一直纠结第一张图片的报错，而没太注意第二个报错，导致全网找了好久，才解决了问题。如果你也是同样的问题可以按照一下步骤来解决。在 npm i XXX 时报错：所以按照提示去run npm audit fix 或者 npm audit 报错：但是结果还是报错，两个报错的原因都是没有可以编辑的 package.json 配置文件,所以我们需要手动生成一个 package.jsonnpm i --yes这样问题就解决了 ^ _ ^
2021-10-22 23:03:44
2074
1
原创 ES6 中 Map 和 Set 数据结构
Map为什么要引入Map?传统的对象的键只能用字符串，局限性比较大，所以引入了MapMap介绍Map类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型(包括对象)的值都可以作为键，Object 结构提供了 “字符串——值”Map 结构提供了"值——值"创建一个Map对象 const m = new Map();新建Map实例时，就可以指定键值案例：Map构造函数接受数组作为参数const m1 = new Map([ ["name",'张三'],
2021-10-15 16:59:08
130
原创 javaScript中call()、bind()和apply()都是改变this的指向，那么它们的区别和用法是如何的呢？
了解call()、bind()、apply()之前我们需要先了解一下this的指向案例1：var name = "王五",age =20; var Person ={ name:"张三", age:18, message:function(){ console.log("姓名："+name+" 年龄："+age) } }Person.message(); //姓名：王五 年龄：20案例1 的结果似乎和所想的结
2021-10-10 20:39:53
88
原创 什么是函数的防抖和节流？如何实现防抖和节流呢？
防抖：连续不断触发，只执行一次。例如：进电梯，不断有人进入，电梯门就不会关，一旦没有人进入，电梯就会关门防抖执行情况分两种：第一种：最开始一次执行案例：var box = document.querySelector(".box");var num = parseInt(box.innerHTML);var timer = null;var flag = true;box.onclick = function(){ console.log("被点击") clearTimeo
2021-10-08 10:48:42
150
原创 详解 CSS 外边距重叠(外边距塌陷)问题及解决办法
边距重叠这个问题之前遇到过，但是并没有太在意，最近多次遇到，就去查了一下。边距重叠就像字面意思一样，两边距重叠到一起了。官方一点解释就是：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。而造成外边距重叠有 三种情况：第一种情况：发生在同一层相邻元素之间...
2021-09-30 20:00:00
6858
4
原创 使用js实现 表的 “增删改查上下移动” 功能
要实现图片中的的效果，废话不多说直接上代码html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&.
2021-09-25 22:23:55
1037
1
原创 js多种数组去重和数组中对象去重方法
一、数组去重方法前面一个和后面一个进行比较for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[j] == arr[i]){ arr.splice(j,1); j--; } } } console.log(arr);使用indexOf()方法var arr1 = [5,4,10,1
2021-09-18 13:41:13
214
1
原创 JS 一维数组几种简单好用的排序方法
1、sort()方法排序var arr = [10, 57, 88, 60, 20, 30, 24, 50, 80, 29];arr.sort(function(a,b){ //return a-b;//升序 return b-a;//降序 })console.log(arr);2、选择排序var arr = [10, 57, 88, 60, 20, 30, 24, 50, 80, 29];for(var i = 0; i < arr.length; i++) { for(va
2021-09-08 22:03:24
818
原创 使用js实现动态时间
<body onload="actTime()"> <div id="time"></div> <script> function actTime(){ var time ,year,month,day,hour,minutes,seconds,da,weeks,week; setInterval(function(){ time = new Date(); year = time.getFullYear(..
2021-09-08 19:13:11
901
原创 使用js实现从某个点开始倒计时
<body onload="startTime()"> <script> function startTime(){ //1、定义将来时间，这里以2021/10/01为目标时间 var preDate = new Date('2021/10/01 00:00:00'); var preTimes = preDate.getTime();//获取目标日期距离1970年1月1日毫秒数 //2、开启定时器 setInterval(fun
2021-09-08 19:09:04
348
原创 Vue基础——组件所需了解的基础知识
组件：把页面中多个重复的标签结构（html/css/js）封装起来组件特点：组件体现封装思想（html/css/js）组件是特殊的Vue实例（data,methods等选项）2.1.组件可以使用Vue选项（没有el）2.2.有自己的选项 如template（要求有一个根元素）data(){return {数据a:值}}尽可能使用第三方组件 element-ui / mint-ui / iview等一、全局组件三步骤定义组件Vue.component(组件名,{选项})组件名建议
2021-07-30 18:47:06
113
原创 Vue基础——过滤器（全局过滤器和局部过滤器）
过滤器有两类： 全局过滤器 和 局部过滤器Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示( | )：过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数一、全局过滤器创建过滤器 ：在newVue之前步骤1、在newVue之前 Vue.filter(‘过滤器名字’,function( )
2021-07-29 19:13:37
700
原创 Vue常用的12个系统指令以及自定义指令
用指令前必先了解指令的作用，用在什么地方指令：作用：增强HTML标签功能a.所有指令都是v-开头b.所有指令代码位置：标签的开头标签位置c.所有指令都是取代之前的DOM操作这里介绍12个常用的系统指令v-text （类似于js中innerText）a.替换标签全部内容b.不可以识别字符串中标签v-html （类似于js中innerHTML）a.替换标签全部内容b.可以识别字符串中标签 <div id="app"> <!-
2021-07-29 14:58:47
554
原创 了解什么是预解析
预解析：提前解析代码之前预解析做什么事？把变量的声明提前了 ---- 提前到当前所在的作用域的最上面函数的声明也会被提前 — 提前到当前所在域的最上面小小的脑袋，大大的疑惑说啥呢？？？先举个例子：console.log(num);//结果为：undefinedvar num=10;如果是从未了解过预解析的，肯定很困惑，为什么是undefined，之前猜想结果可能报错，或者是10。其实它代码运行过程是这样的：var num;console.log(num);num = 10;所
2021-06-20 19:21:57
906
原创 js中全局变量、局部变量和隐式全局变量的区别
一、全局变量：声明的变量是使用 var 声明的，那么这个变量就是全局变量，全局变量可以在页面的任何位置使用。var num1 = 20;//全局变量 for(var i =0;i<10;i++){ var num =10;//全局变量 }; console.log(num);//10 console.log(num1);//20除了函数以外 ，其他的任何位置定义的变量都是全局变量。var num1= 20;//全局变量function f(){ var num3 =3
2021-06-20 17:44:21
744
原创 js基本的分支语句和循环语句，学会写九九乘法表和斐波拉契数列等常用案例
流程控制有三种方式：1、顺序结构：从上到下，从左到右执行的顺序2、分支结构：顾名思义就是多个分支，但只走一个分支3、循环结构：循环做相同的事情一、分支语句:if语句主要判断语法：if(表达式){代码块}执行过程：先判断表达式的结果是true，还是false，如果是true则执行代码块，如果为false，则不执行代码块var age=23;if(age>18){ alert("可以看电影了"); };if-else语句两个分支，只能执行一个分支i
2021-06-17 23:29:33
150
原创 常用的DOM事件(鼠标事件)
鼠标事件onclick事件定义：元素被点击时触发语法：HTML中：< element οnclick=“SomeJavaScriptCode”>JavaScript中：object.onclick = function(){SomeJavaScriptCode}<button οnclick="fun1()">点我</button>function fun1(){ alert("触发点击事件");};ondblclick事件定义：双击时触发语
2021-06-03 21:07:18
538
1
原创 js中用于提取、替换、删除字符串的常用方法
replace()方法定义：用一些字符 替换 另一些字符，或替换一个与正则表达式匹配的字符串语法：string.replace(searchvalue,newvalue);注意：该方法 不会改变原有的字符串var str1 = "Hello World Hello hello"; console.log(str1.replace("Hello","Red"));//Red World Hello hello console.log(str1.replace(/Hello/g,.
2021-05-30 19:55:46
1355
原创 js中使用字符串方法判断在字符串中是否出现过某个字符串的几种方法
indexOf()方法定义：本方法返回某个指定的字符串值在字符串中首次出现的位置，如果 没有找到 匹配的字符串则 返回-1注意： 区分大小写语法：string.indexOf(searchvalue,start);searchvalue:必须，需要检索的字符串值start:可选参数，规定在字符串中开始检索的位置var str1 = "acbCcdcecfghijklmndopq"; console.log(str1.indexOf("c",3));//4，第一次出现的位置 .
2021-05-30 19:21:30
1205
原创 JavaScript中获取页面元素的六种方式
根据i指定的id名选中页面元素document.getElementById("id名");根据指定的标签名选中页面中所有满足条件的元素document.getElementsByTagName("标签名");根据指定的name属性名选中页面中所有满足条件的元素document.getElementsByName("name属性");根据指定的类名选中页面中所有满足条件的元素根据document.getElementsByClassName("类名")用来选中页面元素，根据给定的选择
2021-05-28 11:37:17
4668
1
原创 使用css让元素垂直水平居中的几种超好用的方法
第一种width:300px;height:300px;position:absolute;left:50%;right:50%;margin:-150px 0 0 -150px;(往上移宽的一半，往左移长的一半)第二种（原理和第一种一样）width:300px;height:300px;position:absolute;left:50%;right:50%;transform：translate(50%,50%);第三种：固定定位position:fixed
2021-05-21 20:03:41
99
原创 详解js中EventListener监听器（事件委托/事件代理）
监听器：语法：**addEventListener(event,function,userCapture)**方法第一个参数写事件句柄，不需要加"on",直接写时间名就可以（如：click）第二个参数是事件触发后调用的函数第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数是可选值，默认值为false，即冒泡传递，当值为true时，为捕获传递触发监听器事件://第二个参数写匿名函数<button id="btn"></button><script>do
2021-05-11 16:49:51
4346
原创 使用css3绘制太极
<div class="circle"> <div class="maxcircle"> <div class="mblack"> <div class="minwhite"></div> </div> <div class="mwhite"> <div class="minblack"></div> </div> </div></di
2021-05-07 13:55:07
272
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人