react vue背景掛載機器問題
更新時間：2024年03月12日 14:17:30 作者：卑微的雨落
這篇文章主要介紹了react vue背景掛載機器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題
項目當中我們有的時候會遇到多個背景圖片在一個地方展示的問題
當時項目比較急沒有時間做工具函數(shù)，被團隊優(yōu)化以后有，時間進行工具函數(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 注意點 塊級元素寬度寬度會隨著父組件的寬度進行定義，所以要轉為 行內元素阻止寬度繼承，但是一定不要把行內元素轉化為塊級元素 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ù)據的綁定艦艇 兩個參數(shù) 第一個為數(shù)據第二個為函數(shù)形式的變化只有通過函數(shù)進行改動才能更新頁面的數(shù)據
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總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了React優(yōu)雅的捕獲并處理渲染異常方式,文章通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-11-11
React?UI組件庫之快速實現(xiàn)antd的按需引入和自定義主題
react入門學習告一段路,下面這篇文章主要給大家介紹了關于React?UI組件庫之快速實現(xiàn)antd的按需引入和自定義主題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了React?less?實現(xiàn)縱橫柱狀圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了如何使用React Hooks請求數(shù)據并渲染，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了React從Class方式轉Hooks詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-09-09
React如何使用sortablejs實現(xiàn)拖拽排序
這篇文章主要介紹了React如何使用sortablejs實現(xiàn)拖拽排序問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
React是現(xiàn)在前端使用頻率最高的三大框架之一，React率先提出虛擬DOM的思想和實現(xiàn)，使其保持有良好的性能。本篇文章將對React組件化的入門學習進行講解，同時針對模塊化的思想進行概述，為接下來組件化開發(fā)的文章進行知識儲備2022-09-09
本文主要介紹了React使用有限狀態(tài)機的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
react antd checkbox實現(xiàn)全選、多選功能
目前好像只有table組件有實現(xiàn)表格數(shù)據的全選功能,如果說對于list,card,collapse等其他組件來說,需要自己結合checkbox來手動實現(xiàn)全選功能,這篇文章主要介紹了react antd checkbox實現(xiàn)全選、多選功能,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了詳解React之key的使用和實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09