react vue background mount machine problem

question

Sometimes we encounter the problem of multiple background images being displayed in one place during the project.

At that time, the project was in a hurry and had no time to make tool functions. After being optimized by the team, it was time to write tool functions.

technology

Slots, and css backgrounds This is not the final state. There are two properties for background positioning.

This is implemented in react. vue is OK.

Subcomponents

 
// positioning:{left:{direction:"center"},right:{direction:"cneter"}
const BackgroundMounter = (props)=> {
       const BackgroundMounter = 
       let backGroundPost = ""
       let backGroundMessage = ""
       let backGroundSises = ""
      
       if(BackgroundMounter &&  > 0){
              ((item,index) => {
                 if(index +1 !==   ){
                     backGroundMessage += `url(${})` + "no-repeat "  + ","
                     backGroundSises += item?.style?.width + " " +  + ","
                     backGroundPost +=   + " " +   + ","
                 }else {
                     backGroundMessage += `url(${})` + "no-repeat " 
                     backGroundSises += item?.style?.width + " " +  
                     backGroundPost +=   + " " +   
                 }
              });
       }  
      
       return(<div style={{background:backGroundMessage,backgroundPosition:backGroundPost,backgroundSize:backGroundSises}}>
              {}
            
       </div>)
}
export default BackgroundMounter

Parent component

backGround Note: The width of the block-level element will be defined according to the width of the parent component, so it should be converted to the in-line element to prevent the inheritance of width, but do not convert the in-line element into the block-level element w3c regulations

/* eslint-disable no-unused-expressions */
import React ,{ useEffect} from "react"
import {useState} from "react"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import logincss  from './'
import  Store from "../../Redux/redux";
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from "react-router-dom"
import UseClass from "./className";
import BackgroundMounter from "./BackgroundMounter";
const Log =  () =&gt; {
    const  usenavigate =  useNavigate()
    const backGround = [
      {URL:"/v2-abee0fc1e685e6ecad60cd507a9cf6b5_b.jpg",style:{width:"100px",height:"100px",positioning:{left:{direction:"center"},right:{direction:"center"}}}
      },
      {URL:"/v2-abee0fc1e685e6ecad60cd507a9cf6b5_b.jpg",style:{width:"100px",height:"100px",positioning:{left:{direction:"center"},right:{direction:"bottom"}}}}
 
]
 
     // Userstate function to bind data to ship. Two parameters: the first is data and the second is a change in function form. Only by changing the function can the page data be updated.     let    [[form],setform] =  useState(())   
     const linitform =  {
         password:'123456',
         username:'wangchangzhou'
     }
     const login = () =&gt; {
      ("deng record")
      // eslint-disable-next-line react-hooks/rules-of-hooks
      usenavigate('/home',{state:{login:true}}) 
      ({type:'login',login:true})
     }
     const valueSet = ()=&gt; {
      const time = null
      if(time){
               clearTimeout(()=&gt; {
                
               })
      }
       
       setTimeout(()=&gt; {
         ("KKKKKKK")
       })
     }
     const getValue = ()=&gt; {
          
     }
     useEffect(()=&gt; {
      // (useClass(logincss.login_bout,logincss.login_bout_BACK),"Return value")     },[])
        const fundom = (value)=&gt; {
         if(value ==="Cancel") {
          ()
         }else {
          login()
          //   (());
          //  let value = ()
          //   (linitform === value)
          //   // eslint-disable-next-line no-unused-expressions
          //      if( == ().password &amp;&amp;  == ().password ){
          //       login()
          //      }
            
         }
       }
       return(
       &lt;&gt;   
            {/* Background mounter */}
            &lt;BackgroundMounter backGround={backGround} &gt;
               &lt;div style={{height:"400px",width:"400px"}}&gt;test&lt;/div&gt;
            &lt;/BackgroundMounter&gt;
          
          {/* &lt;button className={UseClass(logincss.login_bution,logincss.login_bution_BACK)} onClick={getValue()}&gt;1&lt;/button&gt;
          &lt;button onClick={getValue()}&gt;2jn   kkkkkkkkk&lt;/button&gt; */}
       &lt;/&gt;)
//        return(
//         &lt;div className={logincss.log_box}&gt;
//                 &lt;Form
//                 form={form}
//                 className={logincss.log_box_from}
//                 name="normal_login"
//                 initialValues={{
               
//       }}
     
//     &gt;
//       &lt;div&gt;
// <span style={{fontSize:'20px',textShadow:'4px 4px 4px'}}>Low code test</span>//       &lt;
//       className={logincss.log_box_item}
//         name="username"
// label = 'name'//         rules={[
//           {
//             required: true,
//             message: 'Please input your Username!',
//           },
//         ]}
//       &gt;
// <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Please enter username" />//       &lt;/&gt;
//       &lt;
//        className={logincss.log_box_item}
//         name="password"
// label = 'password'//         rules={[
//           {
//             required: true,
// message: 'Please enter your password',//           },
//         ]}
//       &gt;
//         &lt;Input
//           prefix={&lt;LockOutlined className="site-form-item-icon" /&gt;}
//           type="password"
// placeholder="Please enter your password"//         /&gt;
//       &lt;/&gt;
//       {/* &lt;  className={logincss.log_box_item}&gt;
//         &lt; name="remember" valuePropName="checked" noStyle&gt;
//           &lt;Checkbox&gt;Remember me&lt;/Checkbox&gt;
//         &lt;/&gt; */}
// {/*
 // <a className="login-form-forgot" href="">
 // Remember the password
 // </a>
 // </ */}
 
//       &lt;  className={logincss.log_box_item}&gt;
// <Button onClick={()=>{ return fund('Login') }} type="primary" htmlType="submit" className="login-form-button">//           Log in//         &lt;/Button&gt;
// <Button onClick={()=>{ return fund('Cancel') }} style={{marginLeft: '20px'}} type="primary" htmlType="submit" className="login-form-button">//           Cancel//         &lt;/Button&gt;
//       &lt;/&gt;
//       &lt;/div&gt;
//     &lt;/Form&gt;
//     &lt;Outlet&gt;&lt;/Outlet&gt;
//         &lt;/div&gt;
//        )
}
export default Log

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.