!132 流光直线功能修改

Merge pull request !132 from 陈旭光/dev
Foming 1 year ago committed by Gitee
commit 5d2753b361
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F

@ -27,6 +27,14 @@ export const widgetDecorateFlowLine = {
placeholder: '', placeholder: '',
value: '' value: ''
}, },
{
type: 'vue-color',
label: '流光颜色',
name: 'lightColor',
required: false,
placeholder: '',
value: '#fff'
},
{ {
type: 'el-select', type: 'el-select',
label: '流动方向', label: '流动方向',
@ -39,6 +47,32 @@ export const widgetDecorateFlowLine = {
], ],
value: 'left' value: 'left'
}, },
{
type: 'el-select',
label: '流动速度',
name: 'flowingLightSpeed',
required: false,
placeholder: '',
selectOptions: [
{ code: 'low', name: '低' },
{ code: 'medium', name: '中' },
{ code: 'high', name: '高' },
],
value: 'medium'
},
{
type: 'el-select',
label: '旋转中心',
name: 'flowingLightRotationCenter',
required: false,
placeholder: '',
selectOptions: [
{ code: 'left', name: '左' },
{ code: 'center', name: '中' },
{ code: 'right', name: '右' },
],
value: 'center'
},
{ {
type: 'el-input-number', type: 'el-input-number',
label: '旋转角度', label: '旋转角度',
@ -82,7 +116,7 @@ export const widgetDecorateFlowLine = {
name: 'height', name: 'height',
required: false, required: false,
placeholder: '该容器在1080px大屏中的高度', placeholder: '该容器在1080px大屏中的高度',
value: 300, value: 4,
}, },
], ],
} }

@ -19,7 +19,11 @@ export default ({
direction: 'left', // : 'left' 'right' direction: 'left', // : 'left' 'right'
background: 'red', // background: 'red', //
containerWidth: '400px', containerWidth: '400px',
containerHeight: '4px',
rotationAngle: 0, // rotationAngle: 0, //
flowingLightColor: null,
flowingLightSpeed: 'medium',
flowingLightRotationCenter: 'center',
} }
}, },
props: { props: {
@ -64,20 +68,30 @@ export default ({
return { return {
background: this.background, background: this.background,
width: '100%', width: '100%',
height: '4px', height: this.containerHeight + "px",
position: 'relative', position: 'relative',
overflow: 'hidden', overflow: 'hidden',
flexDirection: this.direction === 'left' ? 'row-reverse' : 'row', // flexDirection: this.direction === 'left' ? 'row-reverse' : 'row', //
transform: `rotate(${this.rotationAngle}deg)` // transform: `rotate(${this.rotationAngle}deg)`, //
transformOrigin: this.flowingLightRotationCenter, //
} }
}, },
flowingLightStyle() { flowingLightStyle() {
let duration = 0; //
if (this.flowingLightSpeed === 'low') {
duration = 8; //
} else if (this.flowingLightSpeed === 'medium') {
duration = 4; //
} else if (this.flowingLightSpeed === 'high') {
duration = 2; //
}
return { return {
height: '4px', height: '4px',
width: '80px', width: '80px',
background: 'linear-gradient(to right, transparent, #fff)', background: 'linear-gradient(to right, transparent,' + this.flowingLightColor + ')',
position: 'absolute', position: 'absolute',
animation: this.direction === 'left' ? 'right_to_left 4s 0s infinite' : 'left_to_right 4s 0s infinite' // animation: this.direction === 'right' ? `right_to_left ${duration}s 0s infinite` : `left_to_right ${duration}s 0s infinite` //
} }
}, },
}, },
@ -89,13 +103,16 @@ export default ({
this.direction = optionsSetup.flowDirection; this.direction = optionsSetup.flowDirection;
this.rotationAngle = optionsSetup.rotationAngle; this.rotationAngle = optionsSetup.rotationAngle;
this.containerWidth = optionsStyle.width; this.containerWidth = optionsStyle.width;
this.containerHeight = optionsStyle.height;
this.flowingLightColor = optionsSetup.lightColor;
this.flowingLightSpeed = optionsSetup.flowingLightSpeed;
this.flowingLightRotationCenter = optionsSetup.flowingLightRotationCenter;
}, },
} }
}) })
</script> </script>
<style> <style>
.container { .container {
height: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

Loading…
Cancel
Save