wherewhyi-优快云博客

原创 CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)

CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)1、应用场景在一个多行省略的文本中，要求文本后显示一个小图标，且触发了多行文本省略后，小图标依然显示在省略号后面。如下图：2、实现代码html代码如下：<div class="container"> <div class="content-wrapper"> <div class="content">

2022-04-21 15:30:09 8110 6

原创 css实现文字渐变色(兼容性写法、渐进增强、平稳退化)

css实现文字渐变色(兼容性写法、渐进增强、平稳退化)一、第一种方法通过background-clip实现原理：为文字设置渐变背景颜色，并设置透明颜色字体，使用background-clip:text对背景进行裁剪，留下文本部分的背景，从而实现渐变效果。问题：background-clip: text的兼容性并不好，一旦浏览器不兼容，背景就会直接暴露出来。<span class="linear-gradient-text"></span>.linear-gradient-

2021-09-08 08:57:17 20681

原创 mockjs使用总结(随机数据、对象数组随机、后端逻辑模拟等)

mockjs使用总结（随机数据、对象数组随机、后端逻辑模拟等）1、安装mockjsnpm install mockjs -D//mockjs默认是无法拦截到fetch请求，如果项目使用的是fetch还需要安装mockjs-fetch//注：如果封装了fetch 要保证fetch的调用不受到阻碍npm install mockjs-fetch -D2、mockjs使用，新建一个mock.js文件，在项目入口文件中导入mock.js文件即可/*mock.js*/import Mock fro

2021-08-24 09:44:37 6610

原创 javaScript正则表达式笔记

JavaScript正则表达式RegExp类型构造函数形式创建字面量形式创建RegExp (pattern, flags) //构造函数var reg1 = /\d{4}\w{2}/g //字面量形式var reg2 = new RegExp(/\d{4}\w{2}/g)//等价于var reg2 = new RegExp("\\d{4}\\w{2}", "g")var reg2 = new RegExp(/d{4}\\w{2}/gi, "g") //ES5会报错，ES6中忽略字

2020-10-11 23:42:29 213

原创使用vue-better-scroll中遇到无法滚动的问题

记录一下使用vue-better-scroll中遇到的问题 mounted () { this.scroll = new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true, disableMouse: false, disableTouch: false }) }在使用vue-better-scroll过程中，一开始我在组件内使用

2020-09-17 17:35:25 2134

原创 li下的a标签超出宽度时使用text-overflow无法省略

记录text-overflow的一个坑，下方写法text-overflow无效li{ list-style: none; height: 16px; width:175px; margin-bottom: 6px; text-overflow:ellipsis; white-space: nowrap; overflow: hidden;}a{ color: #666;}原因：text-overflow仅对块级元素才有效，li下的a不是块级元素，所以无效，改成以下写法解决li{

2020-07-19 16:59:39 628

原创 ES6对象代理Proxy学习笔记

概述：Proxy用于修改某些操作的默认行为，可理解为在目标对象上设置一个“拦截”层，外界访问该对象需经过这层拦截，以此提供了一种方式对访问进行过滤和改写。/*基本用法target为拦截目标对象，hander也是一个对象，用于制定拦截行为*/var proxy=new Proxy(target,hander) //拦截访问属性值的操作var _obj={a:1,b:2}var obj=new Proxy(_obj,{ get:function(target,key){ console.l

2020-06-06 22:32:40 120

原创 ES6对象扩展学习

ES6对象扩展学习1、属性简写，在对象中允许只写属性名而不写属性值，属性值等于属性名所代表的变量。var foo="hello"var obj={foo}//相当于obj={foo:"hello"}2、函数简写，ES6对象中方法可以省去function。var obj={ sayHi(){ console.log("hi"); } //原ES5写法 sayHi:function(){ console.log("hi"); }}3、属性名表达式，ES6定义对象属性有两种方

2020-06-04 18:51:17 209

转载 JavaScript对象学习笔记一

对象JavaScript对象含有一系列无序的属性，每个属性含有对应的key和value一、对象的创建方法1.直接用{}将属性括含在内，冒号前为属性的key，冒号后为value，并且一个对象可以包含另外一个对象，如代码段中的obj2；var obj={x:1,y:2,obj2:{z:3}};2.先声明一个对象，再用用new创建一个对象；function obj(){};var obj=n...

2019-03-15 22:34:12 185

原创 JavaScript对象学习笔记二

对象属性读写方式var obj={x:1,y:2};obj['x'] //通过key字符串访问属性值obj.x //通过对象加属性名访问对象的属性检测1.用in检测x in obj //结果为true2.用hasOwnProperty检测obj.hasOwnProperty('x');注意：用in检测会向对象的原型链查找，如...

2019-03-15 22:33:08 135

java_wzh123的博客