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/pc/bgcontroller/index.jsx | 71 ++++++++++++++++++++++++++++++++++-
1 files changed, 68 insertions(+), 3 deletions(-)
diff --git a/src/pc/bgcontroller/index.jsx b/src/pc/bgcontroller/index.jsx
index 67d98f5..b77b775 100644
--- a/src/pc/bgcontroller/index.jsx
+++ b/src/pc/bgcontroller/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Form, Icon } from 'antd'
+import { Form, Icon, Select } from 'antd'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
@@ -11,6 +11,7 @@
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const StyleInput = asyncComponent(() => import('@/menu/stylecontroller/styleInput'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
+const { Option } = Select
class MobController extends Component {
static propTpyes = {
@@ -22,6 +23,10 @@
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
backgroundColor: '',
backgroundImage: '',
+ backgroundSize: '',
+ backgroundRepeat: '',
+ backgroundPositon: '',
+ opacity: '',
}
UNSAFE_componentWillMount () {
@@ -36,7 +41,10 @@
this.setState({
backgroundColor: config.style.backgroundColor,
- backgroundImage: bgImg
+ backgroundImage: bgImg,
+ backgroundSize: config.style.backgroundSize || '100%',
+ backgroundRepeat: config.style.backgroundRepeat || 'repeat',
+ backgroundPositon: config.style.backgroundPositon || 'center'
})
}
@@ -84,9 +92,42 @@
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)
+ }
+
+ backgroundPositonChange = (val) => {
+ this.setState({
+ backgroundPositon: val
+ })
+
+ let config = fromJS(this.props.config).toJS()
+ config.style.backgroundPositon = val
+
+ this.props.updateConfig(config)
+ }
+
render () {
const { config } = this.props
- const { backgroundColor, backgroundImage } = this.state
+ const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPositon } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -113,6 +154,30 @@
<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.Item colon={false} label="浣嶇疆">
+ <Select defaultValue={backgroundPositon} onChange={this.backgroundPositonChange}>
+ <Option value="center">center</Option>
+ <Option value="top">top</Option>
+ <Option value="bottom">bottom</Option>
+ </Select>
+ </Form.Item>
<p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>鍐呰竟璺�</p>
<Form.Item
colon={false}
--
Gitblit v1.8.0