From 137fb8ea6af2789b3238b22bac31d80bced41dfe Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 28 七月 2021 11:39:39 +0800 Subject: [PATCH] 2021-07-28 --- src/menu/bgcontroller/index.jsx | 50 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/menu/bgcontroller/index.jsx b/src/menu/bgcontroller/index.jsx index 9dbdec5..7018a0c 100644 --- a/src/menu/bgcontroller/index.jsx +++ b/src/menu/bgcontroller/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Form } from 'antd' +import { Form, Select } from 'antd' import zhCN from '@/locales/zh-CN/mob.js' import enUS from '@/locales/en-US/mob.js' @@ -10,6 +10,7 @@ const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) +const { Option } = Select class MobController extends Component { static propTpyes = { @@ -21,6 +22,8 @@ dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, backgroundColor: '', backgroundImage: '', + backgroundSize: '', + backgroundRepeat: '', } UNSAFE_componentWillMount () { @@ -35,7 +38,9 @@ this.setState({ backgroundColor: config.style.backgroundColor, - backgroundImage: bgImg + backgroundImage: bgImg, + backgroundSize: config.style.backgroundSize || '100%', + backgroundRepeat: config.style.backgroundRepeat || 'repeat', }) } @@ -72,8 +77,30 @@ this.props.updateConfig(config) } + backgroundSizeChange = (val) => { + this.setState({ + backgroundSize: val + }) + + let config = fromJS(this.props.config).toJS() + config.style.backgroundSize = val + + this.props.updateConfig(config) + } + + backgroundRepeatChange = (val) => { + this.setState({ + backgroundRepeat: val + }) + + let config = fromJS(this.props.config).toJS() + config.style.backgroundRepeat = val + + this.props.updateConfig(config) + } + render () { - const { backgroundColor, backgroundImage } = this.state + const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -94,6 +121,23 @@ <Form.Item colon={false} label="鍥剧墖"> <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/> </Form.Item> + <Form.Item colon={false} label="姣斾緥"> + <Select defaultValue={backgroundSize} onChange={this.backgroundSizeChange}> + <Option value="100%">100%</Option> + <Option value="100% 100%">100% 100%</Option> + <Option value="auto 100%">auto 100%</Option> + <Option value="contain">contain</Option> + <Option value="cover">cover</Option> + </Select> + </Form.Item> + <Form.Item colon={false} label="閲嶅"> + <Select defaultValue={backgroundRepeat} onChange={this.backgroundRepeatChange}> + <Option value="repeat">repeat</Option> + <Option value="no-repeat">no-repeat</Option> + <Option value="repeat-x">repeat-x</Option> + <Option value="repeat-y">repeat-y</Option> + </Select> + </Form.Item> </Form> </div> ) -- Gitblit v1.8.0