Tag Archives: css

How to Solve Vue3 using deep syntax Error

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']
      }
    ],
    ...
  }
};

[Solved] Vue binding dynamic inline style Error: transform:rotate()

reason:

V-bind or ‘:’ is followed by the written JS code, which is written in the form of key value pairs. The key is the CSS style attribute name of the tag, and the key is the attribute value. The key value must be a string or a variable (provided that the variable must be declared in the data first): style = “{transform: rotate()}” this writing browser calls rotate as a function rotate(), so an error will be reported

Solution:

//String mode
:style="{transform: 'rotate(60deg)'} 
//Variable form
:style="{transform: `rotate(${Variable}deg)`}

Module not found: Error: Can‘t resolve ‘sass-loader‘ in…

sass-loader！

Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'sass-loader' in 'E:\study_software\JetBrains\WebStorm2021\WebstormProjects\vue-element-admin-master'


npm install sass-loader sass webpack --save-dev
npm install --save-dev node-sass
or
cnpm install node-sass --save

sass-loader: https://www.npmjs.com/package/sass-loader

[Solved] Vue package error: Syntax Error: Error: Cannot find module ‘mozjpeg’ 

Syntax Error: Error: Cannot find module 'mozjpeg'

The main reason is that some dependencies of image webpack loader are not installed successfully, which makes the processing of pictures report errors

Attempting to install dependencies:

npm install mozjpeg

report errors:

connect ECONNREFUSED 0.0.0.0:443
mozjpeg pre-build test failed

You can solve this problem by modifying hosts.

Modify hosts for MAC system

https://github.com/googlehosts/hosts
Go to this website to download files
open the terminal, enter open/etc
and paste the hosts into the etc folder to replace the original hosts file.

The reinstallation was successful and the packaging was successful.

[Solved] Vue Project Error: Syntax Error: TypeError: this.getOptions is not a function

Question:

Vue project, NPM run dev, the following error:

Or

reason:

The installed sass loader version is too high. Reinstall the lower version sass-loader.

Solution:

// Uninstall the current version
npm uninstall sass-loader

// Install the specified version
npm install --save-dev [email protected]

[Solved] Binding onclick event in JS: for loop: error uncaught typeerror: cannot set properties of undefined (setting ‘classname’)

I want to achieve the following effects: click the column above to switch the content of the column below

Write the code as follows (mainly see the JS part)

<!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">
    <title>Document</title>
    <style>
        .tab{
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: #aaa;
        }
        .current{
            background-color: yellow;
        }
        .content{
            display: none;
        }
    </style>
</head>
<body>
    <div class = "tab">
        <div class = "tab_list">
            <li>栏目1</li>
            <li>栏目2</li>
            <li>栏目3</li>
        </div>
        <div class = "tab_con" style="display: block;">栏目1的内容</div>
        <div class = "tab_con">栏目2的内容</div>
        <div class = "tab_con">栏目3的内容</div>
    </div>

    <script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].onclick = function(){
                for(var j = 0;j<tab_list.length;j++){
                    tab_list[j].className = "tab";
                }
                tab_list[i].className = "tab red";

                for(var j = 0;j<tab_con.length;j++){
                    tab_con[j].style.display = "none";
                }
                tab_con[i].style.display = "block";

            }
        }



    </script>
</body>
</html>

The result shows an error: uncaught typeerror: cannot set properties of undefined (setting 'classname') at htmldivelement.Tab.<computed>.onclick

Baidu tested it and found the following code:

<script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].onclick = function(){
                console.log("栏目" + i + "被点击了");
            }
        }



    </script>

In printing, I is 3 instead of 0, 1 and 2.

After consulting the data, we know that:

In the for loop, for each tab_List is bound to the onclick event to listen, but when the function is executed, I has ended the loop, so the printout is 3.

That is, the event listening function in the for loop needs to avoid using the loop variable I

So, if tab is involved_List [i], we can use this; If tab is involved_Con [i], that is, use I to get other elements, so we can give tab_List adds an attribute index, and then in the onclick function, we get this attribute, that is, we get the I we want

The code is as follows:

<!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">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            width: 400px;
            margin: 100px auto;
        }
        .tab .tab_list li{
            display: inline-block;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #aaa;
        }
        .tab .tab_list .current{
            background-color: yellow;
        }
        .content{
            display: none;
        }
    </style>
</head>
<body>
    <div class = "tab">
        <div class = "tab_list">
            <li>栏目1</li>
            <li>栏目2</li>
            <li>栏目3</li>
        </div>
        <div class = "tab_con" style="display: block;">栏目1的内容</div>
        <div class = "tab_con">栏目2的内容</div>
        <div class = "tab_con">栏目3的内容</div>
    </div>

    <script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].setAttribute("index",i);
            tab_list[i].onclick = function(){
                var index = this.getAttribute("index");
                console.log("栏目" + index + "被点击了");
                for(var j = 0;j<tab_list.length;j++){
                    tab_list[j].className = "";
                }
                tab_list[index].className = "current";
                console.log(this.className);
                for(var j = 0;j<tab_con.length;j++){
                    tab_con[j].style.display = "none";
                }
                tab_con[index].style.display = "block";

            }
        }
    </script>
</body>
</html>

IMG tag onerror event resolves infinite loop error reporting

Problem Description:

problem: the SRC picture in img tag failed to load, and a fragment icon will appear in the original picture position, which is very unpleasant. How to be more beautiful

Cause analysis:

because the reverse display resource cannot be found or the path does not exist, it will be processed according to the IMG default processing method

Solution:

1. Find a default picture to replace

2. Trigger with onerror event

3. The oneror event is triggered repeatedly

<img src="url" onerror= "this.οnerrοr='';this.src='static/images/nop.svg'">

Can be solved

The index.nvue page of uniapp reports an error about CSS

The console of uniapp reports an error:
reportJSException >>>> exception function:createInstanceContext,
exception:white screen cause create instanceContext failed,
check js stack ->Uncaught Error: Cannot find
module ‘…/…/…/…/…/…/…/common/zcm-main-nvue.css?vue&type=style&index=0&lang=css&mpType=page’
The console reports an error because the index.nvue page does not add @, to add @ to not report an error
Note: @ stands for the outermost a folder

esp32:A fatal error occurred: Timed out waiting for packet header

Question

When I download the program to esp32 with Arduino IDE, the following error message appears:

My board is the following Board:

 

Causes and Solutions

The reason is that there is an error in the baud rate selection. The baud rate I selected is 921600 by default. In fact, 115200 should be selected. In this way, you can download normally after downloading again.

As shown in the figure below, it is successful.

 

 

An error happened during template parsing (template: “class path resource

1. Error explanation: an error occurred during template parsing (template: “classpath resource”

As the name suggests, the reason for the error is that this indicates the resource

2. Solution: I don’t know what your mistake is, just tell you the reason for the mistake.

Open run first,

        

  Right click to clear this page,

         

  Refresh the error page, and the error message will be displayed in run, as shown in the following figure:

        

  According to the error information, find the error code, find the corresponding problem and modify it.