From e9c48bd7356462ba9257540b130a47a65ad1861d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 26 八月 2021 17:17:11 +0800 Subject: [PATCH] 2021-08-26 --- src/menu/stylecontroller/index.jsx | 78 ++++++++++++++++++++++++++++++++++++--- 1 files changed, 72 insertions(+), 6 deletions(-) diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx index 69d11e7..d1c5585 100644 --- a/src/menu/stylecontroller/index.jsx +++ b/src/menu/stylecontroller/index.jsx @@ -65,7 +65,7 @@ } onCloseDrawer = () => { - let { card } = this.state + let card = fromJS(this.state.card).toJS() let check = false if (card.borderWidth === '0px') { @@ -78,15 +78,15 @@ check = true } else if (card.borderRightWidth === '0px') { delete card.borderRightWidth - delete card.borderRightWidth + delete card.borderRightColor check = true } else if (card.borderTopWidth === '0px') { delete card.borderTopWidth - delete card.borderTopWidth + delete card.borderTopColor check = true } else if (card.borderBottomWidth === '0px') { delete card.borderBottomWidth - delete card.borderBottomWidth + delete card.borderBottomColor check = true } @@ -218,7 +218,44 @@ * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠� */ changeShadowColor = (val) => { - this.updateStyle({shadow: val}) + const { card } = this.state + + let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${val}` + + this.updateStyle({shadowColor: val, boxShadow}) + } + + /** + * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠� + */ + changeShadowBlur = (val) => { + const { card } = this.state + + let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${val || '0px'} ${card.shadowColor || 'transparent'}` + + this.updateStyle({shadowBlur: val, boxShadow}) + } + + /** + * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠� + */ + changeHShadow = (val) => { + const { card } = this.state + + let boxShadow = `${val || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${card.shadowColor || 'transparent'}` + + this.updateStyle({hShadow: val, boxShadow}) + } + + /** + * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠� + */ + changeVShadow = (val) => { + const { card } = this.state + + let boxShadow = `${card.hShadow || '0px'} ${val || '0px'} ${card.shadowBlur || '0px'} ${card.shadowColor || 'transparent'}` + + this.updateStyle({vShadow: val, boxShadow}) } imgChange = (val) => { @@ -479,6 +516,8 @@ <Option value="100%">100%</Option> <Option value="100% 100%">100% 100%</Option> <Option value="auto 100%">auto 100%</Option> + <Option value="100% auto">100% auto</Option> + <Option value="auto">auto</Option> <Option value="contain">contain</Option> <Option value="cover">cover</Option> </Select> @@ -609,7 +648,34 @@ label={<Icon title="闃村奖棰滆壊" type="bg-colors" />} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <ColorSketch value={card.shadow || 'transparent'} onChange={this.changeShadowColor} /> + <ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} /> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="妯$硦璺濈" type="column-width" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={card.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="姘村钩浣嶇疆" type="arrow-right" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={card.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="鍨傜洿浣嶇疆" type="arrow-down" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={card.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/> </Form.Item> </Col> </Panel> : null} -- Gitblit v1.8.0