react vue背景挂载机器问题
作者：卑微的雨落
这篇文章主要介绍了react vue背景挂载机器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题
项目当中我们有的时候会遇到多个背景图片在一个地方展示的问题
当时项目比较急没有时间做工具函数，被团队优化以后有，时间进行工具函数编写
技术
插槽 ， 和 css 背景 这个还不是最终的状态 背景定位还有两个属性
这个是react 方式实现的 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 规定
/* 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 功能进行数据的绑定舰艇 两个参数 第一个为数据第二个为函数形式的变化只有通过函数进行改动才能更新页面的数据
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总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。