weixin_50636581的博客

转载 vite学习笔记

vite相关学习

转载 子类型、逆变、协变 Typescript

前言TypeScript 中有很多地方涉及到子类型 subtype、父类型 supertype、逆变和协变covariance and contravariance的概念，如果搞不清这些概念，那么很可能被报错搞的无从下手，或者在写一些复杂类型的时候看到别人可以这么写，但是不知道为什么他可以生效。（就是我自己没错了）子类型interface Animal { age: number}interface Dog extends Animal { bark(): void}在这个例子中，

转载 TypeScript高级用法: 类型编程

什么是类型编程从一个简简单单的interface，到看起来挺高级的T extends SomeType ，再到各种不明觉厉的工具类型Partial、Required等，这些都属于类型编程的范畴。正文1.类型编程的基础：泛型之所以上来就放泛型，是因为在 TypeScript 的整个类型编程体系中，它是最基础的那部分，所有的进阶类型都基于它书写。就像编程时我们不能没有变量，类型编程中的变量就是泛型1.1基本写法1.1.1Function中的写法参数和返回值相同例子function foo

原创 typescript vue component typescript4.3 新语法 get set 计算属性

Typescript 4.3 新语法 get set1.实现 /** get set ts4.3版本新提供的监听语法糖 */class Thing { #size = 0; get size() { return this.#size; } set size(value) { let num = Number(value); // Don't allow NaN and stuff. if (!Number.isFinite(num)) {

原创 为什么标签内容是懒渲染的？

因为这是 Tab 标签页组件本身支持的默认功能，如果不需要可以通过配置 :lazy-render=“false” 来关闭这个效果。

原创 同源和跨域 解决跨域

同源此略Same origin policy防抖的思想只执行最后一次请求利用定时器 在触发请求的时候 清除定时器 然后在开启定时器 相当与重置 最后在一定时间结束在发送请求 执行定时器里面的方法节流的思想利用定时器 在定时器中 设置个falg 为false 在定时器外面 falg为true 然后 if（flag）return...

原创 steps 动画 理解

steps动画的 帧和步数的理解设定动画 steps() 里面的参数 代表@keyframes animate_show{0%{opacity: 1;}25%{opacity: 0;}50%{opacity: 0;}75%{opacity: 0;}100%{opacity: 0;}}

原创 vue 插值表达式 动态选择 类名

<span :class=“{active:index === active}”></span>v-bind:class 语法一个对象，对象中的key表示要作用的css类名对象中的value要计算出布尔值true,则作用该类名false,不作用类名

原创 当前元素不进行 flex分配

flex: unset;

原创 css not选择器

原创 如何产生自己的滚动容器 移动端

原创 视口单位

原创 deep css组件 不生效样式

deep的原理就是去掉scoped在元素上加的标识deep写法两种方式v-deep/deep/例子.home-container { /deep/ .el-input { color: red; }}不生效原因可能选择范围不对例子 给组件中的弹窗加deep样式不生效是因为弹窗有可能是全局生成的在你选择的范围之外 解决办法<style lang="less" scoped>.home-container { ...}</style&

原创 ElementUI dialog配合from ref无法获取表单

原因是标签还没有渲染到页面上 利用 from.nextTick()方法可以解决这个问题

原创 js记录每一个元素出现的次数

js记录每一个元素出现的次数1.创建一个空对象利用对象的特性进行计数2.第一次循环某个属性 其并没有所以是undefined3.我们为其添加属性并且初始化为一4.如果不是的话 说明不是第一次我们每次加一就可 var arr=['s','q','b','u','s','q','b','u','s','q','b','u','q','b','u','q','b','u','la','u','la','u','la'] var obj={} //创建一个空对象利用对象的特性进

原创 解决外边距塌陷的原理

我们都知道解决 外边距塌陷 是给父盒子加个overflow:hiden;例如<style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } .a { /* overflow: hidden; */

原创 伪类选择器和placeholder

伪类选择器用于给标签添加某个状态的样式语法 伪类选择器最大的特点是用:隔开比如选择a的状态a:link 没有点击过的(访问过的)链接a:visited 点击过的(访问过的)链接a:hover 鼠标经过的那个链接a:active 鼠标正在按下还没有弹起鼠标的--------------------------------------------------------------------------------------下面是伪元素-------------------------

原创 vscode快捷用法

emmet语法教程vscode快捷编写代码快速生成css样式语法CSS 基本采取简写形式比如 w200 按tab 可以 生成 width: 200px; 比如 lh26px 按tab 可以生成 > line-height: 26px;快速生成HTML结构语法1.生成标签 直接输入标签名 比如 div 然后enter 键， 就可以生成<div></div>2.想要生成多个相同标签 加上 * 就可以了 比如 div*3