From 8701e6928b20cc3c4af763f8e72be5396c2be99d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 09 十月 2020 18:57:15 +0800
Subject: [PATCH] 2020-10-09
---
src/menu/stylecontroller/index.jsx | 124 +++++++++++++++++++++++++++++++++++++++--
1 files changed, 118 insertions(+), 6 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 33ff5a1..82faa61 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -27,6 +27,7 @@
bgimages: [],
backgroundImage: '',
options: [],
+ borposition: 'outer'
}
shouldComponentUpdate (nextProps, nextState) {
@@ -62,6 +63,7 @@
comIds: comIds,
card: fromJS(style).toJS(),
options: options,
+ borposition: 'outer',
backgroundImage
})
}
@@ -192,12 +194,61 @@
this.updateStyle({backgroundImage: val})
}
+ changeBorderStyle = (val) => {
+ const { borposition } = this.state
+ let _style = {}
+
+ if (borposition === 'outer') {
+ _style.borderStyle = val
+ } else if (borposition === 'left') {
+ _style.borderLeftStyle = val
+ } else if (borposition === 'right') {
+ _style.borderRightStyle = val
+ } else if (borposition === 'top') {
+ _style.borderTopStyle = val
+ } else if (borposition === 'bottom') {
+ _style.borderBottomStyle = val
+ }
+
+ this.updateStyle(_style)
+ }
+
changeBorderWidth = (val) => {
- this.updateStyle({borderWidth: val})
+ const { borposition } = this.state
+ let _style = {}
+
+ if (borposition === 'outer') {
+ _style.borderWidth = val
+ } else if (borposition === 'left') {
+ _style.borderLeftWidth = val
+ } else if (borposition === 'right') {
+ _style.borderRightWidth = val
+ } else if (borposition === 'top') {
+ _style.borderTopWidth = val
+ } else if (borposition === 'bottom') {
+ _style.borderBottomWidth = val
+ }
+
+ this.updateStyle(_style)
}
changeBorderColor = (val) => {
- this.updateStyle({borderColor: val})
+ const { borposition } = this.state
+ let _style = {}
+
+ if (borposition === 'outer') {
+ _style.borderColor = val
+ } else if (borposition === 'left') {
+ _style.borderLeftColor = val
+ } else if (borposition === 'right') {
+ _style.borderRightColor = val
+ } else if (borposition === 'top') {
+ _style.borderTopColor = val
+ } else if (borposition === 'bottom') {
+ _style.borderBottomColor = val
+ }
+
+ this.updateStyle(_style)
}
changeHeight = (val) => {
@@ -218,7 +269,7 @@
}
render () {
- const { card, options, backgroundImage, bgimages } = this.state
+ const { card, options, backgroundImage, bgimages, borposition } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -369,10 +420,67 @@
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="杈规瀹藉害" type="border-outer" />}
+ label={<Icon title="杈规浣嶇疆" type="border" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.borderWidth || ''} options={['px']} onChange={this.changeBorderWidth}/>
+ <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}>
+ <Radio value="outer"><Icon title="澶栬竟妗�" type="border-outer" /></Radio>
+ <Radio value="left"><Icon title="宸﹁竟妗�" type="border-left" /></Radio>
+ <Radio value="right"><Icon title="鍙宠竟妗�" type="border-right" /></Radio>
+ <Radio value="top"><Icon title="涓婅竟妗�" type="border-top" /></Radio>
+ <Radio value="bottom"><Icon title="涓嬭竟妗�" type="border-bottom" /></Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="杈规鏍峰紡" type="border-outer" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ {borposition === 'outer' ? <Select defaultValue={card.borderStyle || 'solid'} onChange={this.changeBorderStyle}>
+ <Option value="solid">瀹炵嚎</Option>
+ <Option value="dotted">鐐瑰垝绾�</Option>
+ <Option value="dashed">铏氱嚎</Option>
+ <Option value="double">鍙岀嚎</Option>
+ </Select> : null}
+ {borposition === 'left' ? <Select defaultValue={card.borderLeftStyle || 'solid'} onChange={this.changeBorderStyle}>
+ <Option value="solid">瀹炵嚎</Option>
+ <Option value="dotted">鐐瑰垝绾�</Option>
+ <Option value="dashed">铏氱嚎</Option>
+ <Option value="double">鍙岀嚎</Option>
+ </Select> : null}
+ {borposition === 'right' ? <Select defaultValue={card.borderRightStyle || 'solid'} onChange={this.changeBorderStyle}>
+ <Option value="solid">瀹炵嚎</Option>
+ <Option value="dotted">鐐瑰垝绾�</Option>
+ <Option value="dashed">铏氱嚎</Option>
+ <Option value="double">鍙岀嚎</Option>
+ </Select> : null}
+ {borposition === 'top' ? <Select defaultValue={card.borderTopStyle || 'solid'} onChange={this.changeBorderStyle}>
+ <Option value="solid">瀹炵嚎</Option>
+ <Option value="dotted">鐐瑰垝绾�</Option>
+ <Option value="dashed">铏氱嚎</Option>
+ <Option value="double">鍙岀嚎</Option>
+ </Select> : null}
+ {borposition === 'bottom' ? <Select defaultValue={card.borderBottomStyle || 'solid'} onChange={this.changeBorderStyle}>
+ <Option value="solid">瀹炵嚎</Option>
+ <Option value="dotted">鐐瑰垝绾�</Option>
+ <Option value="dashed">铏氱嚎</Option>
+ <Option value="double">鍙岀嚎</Option>
+ </Select> : null}
+ </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 }} }
+ >
+ {borposition === 'outer' ? <StyleInput defaultValue={card.borderWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'left' ? <StyleInput defaultValue={card.borderLeftWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'right' ? <StyleInput defaultValue={card.borderRightWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'top' ? <StyleInput defaultValue={card.borderTopWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'bottom' ? <StyleInput defaultValue={card.borderBottomWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
</Form.Item>
</Col>
<Col span={24}>
@@ -381,7 +489,11 @@
label={<Icon title="杈规棰滆壊" type="bg-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch defaultValue={card.borderColor || 'transparent'} onChange={this.changeBorderColor} />
+ {borposition === 'outer' ? <ColorSketch defaultValue={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'left' ? <ColorSketch defaultValue={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'right' ? <ColorSketch defaultValue={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'top' ? <ColorSketch defaultValue={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'bottom' ? <ColorSketch defaultValue={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
</Form.Item>
</Col>
<Col span={24}>
--
Gitblit v1.8.0