From 59271e4c863abe2fb4562e30549e1c5e3acdde8f Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 21 六月 2023 00:33:36 +0800 Subject: [PATCH] 2023-06-21 --- src/menu/stylecontroller/index.jsx | 101 ++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 77 insertions(+), 24 deletions(-) diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx index 6acd6cc..a781f01 100644 --- a/src/menu/stylecontroller/index.jsx +++ b/src/menu/stylecontroller/index.jsx @@ -1,5 +1,4 @@ import React, {Component} from 'react' -import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button, message } from 'antd' import { @@ -46,11 +45,6 @@ const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) class MobController extends Component { - static propTpyes = { - editElem: PropTypes.any, - updateStyle: PropTypes.func, - } - state = { card: null, fonts: null, @@ -168,7 +162,7 @@ this.callback = null } - updateStyle = (style, prop) => { + updateStyle = (style) => { const { card } = this.state let _style = { @@ -176,8 +170,16 @@ ...style } - if (prop && !_style[prop]) { - delete _style[prop] + Object.keys(style).forEach(key => { + if (!_style[key] && _style[key] !== 0) { + delete _style[key] + } + }) + + if (_style.position === 'relative' || _style.position === 'absolute') { + _style.zIndex = 1 + } else { + delete _style.zIndex } this.setState({ @@ -283,7 +285,7 @@ * @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠� */ changeBackgroundColor = (val) => { - this.updateStyle({backgroundColor: val}, 'backgroundColor') + this.updateStyle({backgroundColor: val}) } changeBackground = (val) => { @@ -443,11 +445,11 @@ } changeWidth = (val) => { - this.updateStyle({width: val === '0px' ? '' : val}, 'width') + this.updateStyle({width: val}) } changeHeight = (val) => { - this.updateStyle({height: val === '0px' ? '' : val}, 'height') + this.updateStyle({height: val}) } changeNormalStyle = (val, type) => { @@ -564,7 +566,7 @@ label={<ColumnWidthOutlined title="瀹藉害"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={this.changeWidth}/> + <StyleInput clear={true} defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={this.changeWidth}/> </Form.Item> </Col> </Panel> : null} @@ -575,7 +577,7 @@ label={<ColumnHeightOutlined title="楂樺害"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/> + <StyleInput clear={true} defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/> </Form.Item> </Col> </Panel> : null} @@ -863,7 +865,7 @@ label={<RadiusSettingOutlined title="鍦嗚"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.borderRadius || '0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> + <StyleInput clear={true} defaultValue={card.borderRadius || ''} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> </Form.Item> </Col> </Panel> : null} @@ -919,7 +921,7 @@ label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> + <StyleInput clear={true} defaultValue={card.marginTop || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> </Form.Item> </Col> <Col span={24}> @@ -928,7 +930,7 @@ label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> + <StyleInput clear={true} defaultValue={card.marginBottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> </Form.Item> </Col> <Col span={24}> @@ -937,7 +939,7 @@ label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> + <StyleInput clear={true} defaultValue={card.marginLeft || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> </Form.Item> </Col> <Col span={24}> @@ -946,7 +948,7 @@ label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> + <StyleInput clear={true} defaultValue={card.marginRight || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> </Form.Item> </Col> </Panel> : null} @@ -957,7 +959,7 @@ label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> + <StyleInput clear={true} defaultValue={card.paddingTop || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> </Form.Item> </Col> <Col span={24}> @@ -966,7 +968,7 @@ label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> + <StyleInput clear={true} defaultValue={card.paddingBottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> </Form.Item> </Col> <Col span={24}> @@ -975,7 +977,7 @@ label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> + <StyleInput clear={true} defaultValue={card.paddingLeft || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> </Form.Item> </Col> <Col span={24}> @@ -984,7 +986,7 @@ label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> + <StyleInput clear={true} defaultValue={card.paddingRight || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> </Form.Item> </Col> </Panel> : null} @@ -1010,7 +1012,7 @@ label={<ColumnHeightOutlined title="鏈�灏忛珮搴�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/> + <StyleInput clear={true} defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/> </Form.Item> </Col> </Panel> : null} @@ -1042,6 +1044,57 @@ </Form.Item> </Col> </Panel> : null} + {options.includes('position') ? <Panel header="瀹氫綅" key="position"> + <Col span={24}> + <Form.Item + colon={false} + label={<SwapOutlined title="瀹氫綅"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.position || 'unset'} onChange={(e) => this.changeNormalStyle(e.target.value, 'position')}> + <Radio value="unset">鏃�</Radio> + <Radio value="relative">鐩稿瀹氫綅</Radio> + <Radio value="absolute">缁濆瀹氫綅</Radio> + </Radio.Group> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<ArrowUpOutlined title="涓�"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput clear={true} defaultValue={card.top || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'top')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<ArrowDownOutlined title="涓�"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput clear={true} defaultValue={card.bottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'bottom')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<ArrowLeftOutlined title="宸�"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput clear={true} defaultValue={card.left || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'left')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<ArrowRightOutlined title="鍙�"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput clear={true} defaultValue={card.right || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'right')}/> + </Form.Item> + </Col> + </Panel> : null} </Collapse> : null} </Form> <div style={{textAlign: 'right', lineHeight: '60px', marginBottom: '30px'}}> -- Gitblit v1.8.0