react vue背景掛載機器問題

更新時間：2024年03月12日 14:17:30 作者：卑微的雨落

這篇文章主要介紹了react vue背景掛載機器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題

項目當中我們有的時候會遇到多個背景圖片在一個地方展示的問題

當時項目比較急沒有時間做工具函數(shù)，被團隊優(yōu)化以后有，時間進行工具函數(shù)編寫

技術(shù)

插槽，和 css 背景這個還不是最終的狀態(tài) 背景定位還有兩個屬性

這個是react 方式實現(xiàn)的 vue 也可以的

子組件

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

父組件

backGround 注意點塊級元素寬度寬度會隨著父組件的寬度進行定義，所以要轉(zhuǎn)為行內(nèi)元素阻止寬度繼承，但是一定不要把行內(nèi)元素轉(zhuǎn)化為塊級元素 w3c 規(guī)定

/* 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 './index.module.css'
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 =  () => {
    const  usenavigate =  useNavigate()
    const backGround = [
      {URL:"https://pic2.zhimg.com/v2-abee0fc1e685e6ecad60cd507a9cf6b5_b.jpg",style:{width:"100px",height:"100px",positioning:{left:{direction:"center"},right:{direction:"center"}}}
      },
      {URL:"https://pic2.zhimg.com/v2-abee0fc1e685e6ecad60cd507a9cf6b5_b.jpg",style:{width:"100px",height:"100px",positioning:{left:{direction:"center"},right:{direction:"bottom"}}}}
 
]
 
     //  userstate 功能進行數(shù)據(jù)的綁定艦艇 兩個參數(shù) 第一個為數(shù)據(jù)第二個為函數(shù)形式的變化只有通過函數(shù)進行改動才能更新頁面的數(shù)據(jù)
     let    [[form],setform] =  useState(Form.useForm())   
     const linitform =  {
         password:'123456',
         username:'wangchangzhou'
     }
     const login = () => {
      console.log("deng錄")
      // eslint-disable-next-line react-hooks/rules-of-hooks
      usenavigate('/home',{state:{login:true}}) 
      Store.dispatch({type:'login',login:true})
     }
     const valueSet = ()=> {
      const time = null
      if(time){
               clearTimeout(()=> {
                
               })
      }
       
       setTimeout(()=> {
         console.log("KKKKKKK")
       })
     }
     const getValue = ()=> {
          
     }
     useEffect(()=> {
      //  console.log(useClass(logincss.login_bution,logincss.login_bution_BACK),"返回值")
     },[])
        const fundom = (value)=> {
         if(value ==="取消") {
          form.resetFields()
         }else {
          login()
          //   console.log(form.getFieldsValue());
          //  let value = form.getFieldsValue()
          //   console.log(linitform === value)
          //   // eslint-disable-next-line no-unused-expressions
          //      if(linitform.password == form.getFieldsValue().password && linitform.password == form.getFieldsValue().password ){
          //       login()
          //      }
            
         }
       }
       return(
       <>   
            {/* 背景掛載機 */}
            <BackgroundMounter backGround={backGround} >
               <div style={{height:"400px",width:"400px"}}>測試</div>
            </BackgroundMounter>
          
          {/* <button className={UseClass(logincss.login_bution,logincss.login_bution_BACK)} onClick={getValue()}>1</button>
          <button onClick={getValue()}>2jn   kkkkkkkkk</button> */}
       </>)
//        return(
//         <div className={logincss.log_box}>
//                 <Form
//                 form={form}
//                 className={logincss.log_box_from}
//                 name="normal_login"
//                 initialValues={{
               
//       }}
     
//     >
//       <div>
//           <span style={{fontSize:'20px',textShadow:'4px 4px 4px'}}>低代碼測試</span>
//       <Form.Item
//       className={logincss.log_box_item}
//         name="username"
//         label ='名稱'
//         rules={[
//           {
//             required: true,
//             message: 'Please input your Username!',
//           },
//         ]}
//       >
//         <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="請輸入用戶名" />
//       </Form.Item>
//       <Form.Item
//        className={logincss.log_box_item}
//         name="password"
//         label ='密碼'
//         rules={[
//           {
//             required: true,
//             message: '請輸入密碼',
//           },
//         ]}
//       >
//         <Input
//           prefix={<LockOutlined className="site-form-item-icon" />}
//           type="password"
//           placeholder="請輸入密碼"
//         />
//       </Form.Item>
//       {/* <Form.Item  className={logincss.log_box_item}>
//         <Form.Item name="remember" valuePropName="checked" noStyle>
//           <Checkbox>Remember me</Checkbox>
//         </Form.Item> */}
// {/* 
//         <a className="login-form-forgot" href="">
//            記住密碼
//         </a>
//       </Form.Item> */}
 
//       <Form.Item  className={logincss.log_box_item}>
//         <Button onClick={()=>{ return fundom('登陸') }} type="primary" htmlType="submit" className="login-form-button">
//           登錄
//         </Button>
//         <Button onClick={()=>{ return fundom('取消') }} style={{marginLeft: '20px'}} type="primary" htmlType="submit" className="login-form-button">
//           取消
//         </Button>
//       </Form.Item>
//       </div>
//     </Form>
//     <Outlet></Outlet>
//         </div>
//        )
}
export default Log