-
React Refs的使用
Ref获取Dom元素的几种方式1234567891011121314151617181920212223import React, { Component, createRef } from 'react'... -
React 组件优化
正常情况下，父组件状态发生变化重新渲染，会导致子组件也重新渲染，即使子组件依赖的属性在父组件中没有发生改变。 一、shouldComponentUpdate(nextProps, nextState)此方法基本不使用。 可以通过子组件的props... -
React 组件逻辑复用
1、HOC 高阶组件1234567891011121314151617181920212223242526272829export const withSize = (Component) => { return class t... -
React 生命周期函数
123456789101112131415161718192021222324252627282930313233343536// unsafe, 组件将要挂载时，render之前 componentWillMount() { c... -
Vue2遗漏知识点
1.不要在选项 property 或回调上使用箭头函数比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod(... -
Vue3查缺补漏
v-showv-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。 当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。 同时使用 v-if 和 v-for 是不推荐... -
Vue易错知识点
一、vue2 部分1. 父子组件的生命周期挂载： 父beforeCreate -> 父created -> 父 beforeMount -> 子beforeCreate -> -> 子 created ... -
Vue原理解析
// 使 v-focus 在所有组件中都可用app.directive('focus'... -
小程序入门概览
一、appID/OpenID/UnionID的区别openID：每个用户针对每个公众号或小程序等应用会产生一个安全的OpenID。 UnionID：同一个用户在不同的应用（小程序、公众号），unionid是相同的。 uni...
$tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 0.1rem
.side-tools-container {
position relative
.tools-item {
width $tools-item-width
height $tools-item-width
margin-bottom 0.2rem
color var(--text-color-3)
font-size $tools-item-font-size
background var(--background-color-1)
border-right none
border-radius $tools-item-border-radius
box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
cursor pointer
i {
color var(--text-color-3)
}
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i {
color var(--background-color-1)
}
}
+keep-tablet() {
width $tools-item-width * 0.9
height $tools-item-width * 0.9
margin-bottom 0.2rem
font-size $tools-item-font-size * 0.9
}
&.rss {
a {
width 100%
height 100%
border-radius $tools-item-border-radius
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
}
}
}
}
.side-tools-list {
transform translateX(100%)
opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
&.show {
transform translateX(0)
opacity 1
}
}
.exposed-tools-list {
if (hexo-config('style.scroll.percent') == true) {
.tool-scroll-to-top {
display none
&.show {
display flex
}
&:hover {
.percent {
display none
}
.arrow-up {
display flex
}
}
.arrow-up {
display none
}
.percent {
display flex
font-size 1rem
}
}
}
}
}