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/stylecontroller/index.jsx | 83 ++++++++++++++++++++++++++++++++++++----- 1 files changed, 73 insertions(+), 10 deletions(-) diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx index 595e8ff..69d11e7 100644 --- a/src/menu/stylecontroller/index.jsx +++ b/src/menu/stylecontroller/index.jsx @@ -194,6 +194,27 @@ } /** + * @description 淇敼鑳屾櫙澶у皬 + */ + changeBackgroundSize = (val) => { + this.updateStyle({backgroundSize: val}) + } + + /** + * @description 淇敼鑳屾櫙浣嶇疆 + */ + changeBackgroundPositon= (val) => { + this.updateStyle({backgroundPositon: val}) + } + + /** + * @description 淇敼鑳屾櫙閲嶅璁剧疆 + */ + changeBackgroundRepeat = (val) => { + this.updateStyle({backgroundRepeat: val}) + } + + /** * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠� */ changeShadowColor = (val) => { @@ -329,7 +350,7 @@ label={<Icon title="瀹藉害" type="column-width" />} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <StyleInput defaultValue={card.width || ''} options={['px', 'vh', 'vw']} onChange={this.changeWidth}/> + <StyleInput defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%']} onChange={this.changeWidth}/> </Form.Item> </Col> </Panel> : null} @@ -448,6 +469,48 @@ <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/> </Form.Item> </Col> : null} + {!options.includes('backgroundColor') ? <Col span={24}> + <Form.Item + colon={false} + label="姣斾緥" + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Select defaultValue={card.backgroundSize || 'cover'} onChange={this.changeBackgroundSize}> + <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> + </Col> : null} + {!options.includes('backgroundColor') ? <Col span={24}> + <Form.Item + colon={false} + label="閲嶅" + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Select defaultValue={card.backgroundRepeat || 'no-repeat'} onChange={this.changeBackgroundRepeat}> + <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> + </Col> : null} + {!options.includes('backgroundColor') ? <Col span={24}> + <Form.Item + colon={false} + label="浣嶇疆" + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Select defaultValue={card.backgroundPositon || 'center'} onChange={this.changeBackgroundPositon}> + <Option value="center">center</Option> + <Option value="top">top</Option> + <Option value="bottom">bottom</Option> + </Select> + </Form.Item> + </Col> : null} </Panel> : null} {options.includes('border') ? <Panel header="杈规" key="border"> <Col span={24}> @@ -557,7 +620,7 @@ label={<Icon title="涓婅竟璺�" type="arrow-up"/>} 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 defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> </Form.Item> </Col> <Col span={24}> @@ -566,7 +629,7 @@ label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} 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 defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> </Form.Item> </Col> <Col span={24}> @@ -575,7 +638,7 @@ label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} 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 defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> </Form.Item> </Col> <Col span={24}> @@ -584,7 +647,7 @@ label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} 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 defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> </Form.Item> </Col> </Panel> : null} @@ -595,7 +658,7 @@ label={<Icon title="涓婅竟璺�" type="arrow-up"/>} 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 defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> </Form.Item> </Col> <Col span={24}> @@ -604,7 +667,7 @@ label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} 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 defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> </Form.Item> </Col> <Col span={24}> @@ -613,7 +676,7 @@ label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} 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 defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> </Form.Item> </Col> <Col span={24}> @@ -622,7 +685,7 @@ label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} 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 defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> </Form.Item> </Col> </Panel> : null} @@ -633,7 +696,7 @@ label={<Icon title="娴姩" type="swap" />} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <Radio.Group defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}> + <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}> <Radio value="left">宸︽诞鍔�</Radio> <Radio value="right">鍙虫诞鍔�</Radio> <Radio value="none">涓嶆诞鍔�</Radio> -- Gitblit v1.8.0