I accidentally found that chrome can’t add cookies by itself. After adding cookies, it won’t be refreshed.
reason
The latest Chrome browser version has been automatically blocking this function. 
Solution:
Open chrome://flags/ , search cookies , find partitioned cookies , select enabled
and then click relaunch in the lower right corner. The browser will restart automatically and take effect!
For more information, please refer to my blog
Error reporting performance
Solution:
Adds the following configuration in .stylelintrc.js:
/**
* @module .stylelintrc
* @author: huoyou
* @description: css
*/
module.exports = {
rules: {
...
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['deep']
}
],
...
}
};
When I installed the fastsclick package into the vue-cli dependency today, it reported an error saying
$ npm install fastclick –save
npm ERR! code ENOTFOUND
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npm.taobao.org/fastclick failed, reason: getaddrinfo ENOTFOUND registry.npm.taobao.org
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network ‘proxy’ config is set properly. See: ‘npm help config’
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2021-04-15T12_07_17_780Z-debug.log
Eventually switched to a different installation, typing in the command line.
cnpm install fastclick –save
Success
Error ‘res’ is assigned a value but never used no-unused-vars
Error reason: eslint validation syntax error
the solution: error the bank notes /
// eslint-disable-line no-unused-vars
Vue + Element, SCSS plus /deep/ style does not work
For example: To adjust the style of. El-collapse-item__header
/deep/.el-collapse-item__header{
background-color: red;
}
Don’t take effect.
Replace /deep/ with ::v-deep
::v-deep .el-collapse-item__header{
background-color: red;
}
Feel free to set the style you want ^ _^
Practice ING – Frame animation to achieve special effects
Recently, I wrote another requirement, which used a lot of CSS3 animation, but it is still very deep to go into each attribute of CSS3 animation carefully. Here, I will write down the understanding of the steps attribute of frame animation
We know that CSS3 Animation has eight attributes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
animation-timing-function
Most 1-7 are introduced, but the animation-timing function is an attribute that controls the time
In addition to the three Bessel curves commonly used, there is the confusing steps() function
By default, the animation ease the transition. It inserts a tween between each key frame, so the animation is coherent
In addition to ease, transition functions such as Linear, Cubic – Bezier will insert the tween for it. However, some effects do not require tween, but only a jump between key frames, where steps should be used
Understand the steps
The Steps function specifies a step function
The first parameter specifies the number of intervals in the time function (must be positive integers)
The second parameter, which is optional, accepts both start and end values, specifying a step change at the start or end point of each interval, which defaults to end.
Step -start is equal to steps(1,start). The animation is divided into 1 step. The part that starts the left endpoint when the animation is executed is the beginning.
Step-end is the same as steps(1,end) : the animation is divided into steps, and the animation is executed starting with the end endpoint, with the default value of end.
Look at the W3C specification
The wrong understanding of the first parameter of steps:
Steps (5, start)
The first parameter “number” of steps() is the specified number of intervals, that is, the animation is divided into N-step phased display, which is estimated to be the number of changes written for keyframes by most people
A look at the cSS2 frame animation I wrote also gave me a good understanding of cSS3 animation
@-webkit-keyframes circle {
0% {}
25%{}
50%{}
75%{}
100%{}
}
I also wrote a js, please refer to
setInterval()
When a function
is called for a specified period of time:
setInterval(function,time,lang)
function: function to be called or code string to be executed
time: required parameters, every how long to call the function, in milliseconds
lang: optional parameters, running JScript | VBScript | JavaScript
clearInterval()
Means to stop the setInterval timer call function
function getTime() {
console.log(123);
if (true) {
clearInterval(db)
}
}
let db = setInterval(getTime, 1000)
setTimeout()
Call a function after a certain time
syntax:
setTimeout(function,time,lang)
Function:
function: required, to be called
time: required, number of milliseconds to wait before executing code
lang: optional, script language: JScript | VBScript | JavaScript