[development diary from 22 years to April] Vue problems encountered in actual projects and their solutions

Catalog

1.svg How to change the color of a picture

2. Overall modification elementUI Component style

3. Horizontal vertical center flex The way

4. There is no scroll bar on the background adaptive screen of the login page

5. Exit function - Universal

6. Use in templates :class Ternary judgment skills

7. Compatibility -360 Browser justify-content: right; invalid

8.css rgba() Use variables in to control transparency

1.svg How to change the color of a picture

svg give an example ：

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1" width="20" height="20" viewBox="0 0 20 20"><clipPath id="master_svg_0"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath><g clip-path="url(#master_svg_0)"><g><path d="M3.3333331525878904,16.666664123535156L3.3333331525878904,11.666664123535156C3.3333331525878904,7.9847641235351565,6.31810015258789,4.999994123535156,10.00000015258789,4.999994123535156C13.681900152587891,4.999994123535156,16.666700152587893,7.9847641235351565,16.666700152587893,11.666664123535156L16.666700152587893,16.666664123535156L17.50000015258789,16.666664123535156L17.50000015258789,18.333364123535155L2.5000001525878908,18.333364123535155L2.5000001525878908,16.666664123535156L3.3333331525878904,16.666664123535156ZM5.000000152587891,16.666664123535156L15.00000015258789,16.666664123535156L15.00000015258789,11.666664123535156C15.00000015258789,8.905244123535155,12.76140015258789,6.666664123535156,10.00000015258789,6.666664123535156C7.238580152587891,6.666664123535156,5.000000152587891,8.905244123535155,5.000000152587891,11.666664123535156L5.000000152587891,16.666664123535156ZM9.16667015258789,1.6666641235351562L10.833330152587891,1.6666641235351562L10.833330152587891,4.166664123535156L9.16667015258789,4.166664123535156L9.16667015258789,1.6666641235351562ZM16.48170015258789,4.006664123535156L17.66000015258789,5.184994123535157L15.89330015258789,6.952494123535156L14.71420015258789,5.774164123535156L16.48170015258789,4.006664123535156M2.3400001525878906,5.184994123535157L3.5183301525878905,4.006664123535156L5.285830152587891,5.7733341235351565L4.10833015258789,6.953334123535156L2.3400001525878906,5.184994123535157ZM5.833330152587891,11.666664123535156C5.833330152587891,9.365474123535156,7.698810152587891,7.499994123535156,10.00000015258789,7.499994123535156L10.00000015258789,9.166664123535156C8.61929015258789,9.166664123535156,7.500000152587891,10.285954123535156,7.500000152587891,11.666664123535156L5.833330152587891,11.666664123535156Z"  fill-opacity="1"/></g></g></svg>

Delete... On the label fill, Total deletion 2 individual  

Just think of him as an ordinary label

fill="none"   fill="#000000"

2. Overall modification elementUI Component style

For example, I want to reduce the size of all input boxes of the project , You can set the style to make the global effect , But it is easy to cause other components to change . The recommended practice is , Add a separate parent class name where we want to change , So you can't choose anywhere else .

3. Horizontal vertical center flex The way

flex Has been compatible with more browsers , Compared with positioning and other ways , It doesn't matter what element you are , All done .

Use flex:

display:flex;
justify-content: center;// Horizontal center 
align-items: center;// Vertical center 

4. There is no scroll bar on the background adaptive screen of the login page

 min-height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url("[email protected]/assets//common/bjlogo.png"); //  Set the background image 
  background-position: center; // Start rendering from the middle 
  background-size: cover;//  Set the picture position to fill the entire screen 
  background-repeat: no-repeat;// Don't spread 

Several ways ：

1.background-size: 100% 100%; The picture is easy to deform

2.background-size: 100% auto; Better than the first , But as the screen changes, there will be white space

3.background-size: contain; Keep the width height ratio of the picture , It won't deform , But it may lead to blank

4.background-size: cover; A relatively good way , It won't deform , No blank , It may lead to incomplete picture display .

5. Exit function - Universal

be based on elementUI:

 logout () {
      this.$confirm(' Are you sure you want to leave ?', ' Tips ', {
        confirmButtonText: ' determine ',
        cancelButtonText: ' Cancel ',
        type: 'warning',
        customClass: 'confirm-p'// Be careful ： Here is to set your own class name , Then you can modify the style arbitrarily through the class name 
      }).then(async () => {
        //  Clear local information 
        await this.$store.dispatch('user/userLogout')
        //  Go back to the landing page 
        const curPath = encodeURIComponent(this.$route.fullPath)
        this.$router.push('/login?return_url=' + curPath)
      }).catch(() => {
​
      })
    }

6. <template> Use in templates :class Ternary judgment skills

Using ternary to make secondary judgment is easy to lead to code confusion （ Look at the mess ） have access to ：class+：style Use a combination of , This makes the code clearer

7. Compatibility -360 Browser justify-content: right; invalid

Only need to right Change it to flex-end that will do

8.css rgba() Use variables in to control transparency

// Use a ： Set random colors 
:style="{backgroundColor:`rgba(${getRandomColor().ran},${getRandomColor().ran2},${getRandomColor().ran3},1`}"
// usage 2：js Controls the transparency of colors 
template in ：
     <el-button
                type="warning"
                plain
                class="btnHover"
                style="
                  background: #fff;
​
                  font-weight: 600;
                "
                :style="{
                  color: `rgba(243, 95, 40, ${alpha}`,
                  border: `1px solid rgba(243, 95, 40, ${alpha}`,
                }"
                @click="del2"
                > Delete </el-button
              >
                
                    
                    
 data Definition ： alpha:0.5 // The initial value is given to 0.5
 js…… A little