feat:边框组件配置完善

main
liu.tao3 2 years ago
parent dc30dcedf8
commit 14800f2d05

@ -146,7 +146,6 @@ export default {
<style lang="scss" scoped>
.bs-design-wrap{
width: 100%;
padding: 0 16px;
.tab-title-box{
height: 40px;
display: flex;

@ -103,7 +103,6 @@ export default {
@import "../../BasicComponents/fonts/index.css";
.bs-design-wrap{
width: 100%;
padding: 0 16px;
}
.time {
width: 100%;

@ -130,7 +130,6 @@ export default {
background-color: rgb(31, 31, 31);
}
.bs-design-wrap {
padding: 0 16px;
position: relative;
width: 100%;
height: 100%;

@ -332,7 +332,6 @@ export default {
}
.bs-design-wrap {
padding: 0 16px;
position: relative;
.button {

@ -110,7 +110,7 @@ export const FlyMapData = {
name: '飞线图',
title: '飞线图',
icon: Icon.getNameList()[18],
border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[16,16,16,16]},
border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[0,0,0,0]},
className:
'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
w: 800,

@ -57,7 +57,6 @@ export default {
.bs-design-wrap {
position: relative;
display: flex;
padding: 0 16px;
flex-direction: column;
justify-content: center;
align-items: center;

@ -75,7 +75,6 @@ export default {
position: relative;
overflow: hidden;
background: #fff;
padding: 0 16px;
width: 100%;
height: 100%;
.iframe-wrap {

@ -76,7 +76,6 @@ export default {
<style lang="scss" scoped>
.bs-design-wrap{
width: 100%;
padding: 0 16px;
}
.content-box{
text-align: center;

@ -362,7 +362,6 @@ export default {
.bs-design-wrap {
position: relative;
padding: 0 16px;
.button {
position: absolute;

@ -102,7 +102,7 @@ export const mapData = {
name: '地图',
title: '地图',
icon: Icon.getNameList()[5],
border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[16,16,16,16]},
border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[0,0,0,0]},
className:
'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
w: 800,

@ -51,7 +51,6 @@ export default {
<style lang="scss" scoped>
.bs-design-wrap {
padding: 0 16px;
width: 100%;
background-color: rgba(0, 0, 0, 0);
.content-box {

@ -132,7 +132,6 @@ export default {
}
.bs-design-wrap{
position: relative;
padding: 0 16px;
width: 100%;
height: 100%;
background-color: transparent;

@ -86,7 +86,6 @@ export default {
}
.bs-design-wrap{
position: relative;
padding: 0 16px;
width: 100%;
height: 100%;
background-color: transparent;

@ -302,7 +302,6 @@ export default {
.bs-design-wrap {
position: relative;
width: 100%;
padding: 0 16px;
height: 100%;
background-color: transparent;
border-radius: 4px;

@ -50,7 +50,6 @@ export default {
<style lang="scss" scoped>
.bs-design-wrap{
width: 100%;
padding: 0 16px;
}
.content-box{
text-align: center;

@ -99,7 +99,6 @@ export default {
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
}
.content-box{
text-align: center;

@ -102,7 +102,6 @@ export default {
<style lang="scss" scoped>
.bs-design-wrap{
width: 100%;
padding: 0 16px;
}
.content-box{
text-align: center;

@ -163,7 +163,6 @@ export default {
@import "../../BasicComponents/fonts/index.css";
.bs-design-wrap{
width: 100%;
padding: 0 16px;
}
.time {
height: 100%;

@ -58,7 +58,6 @@ export default {
position: relative;
width: 100%;
height: 100%;
padding: 0 16px;
display: flex;
flex-direction: column;
justify-content: center;

@ -93,7 +93,6 @@ export default {
position: relative;
width: 100%;
height: 100%;
padding: 0 16px;
background-color: transparent;
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

@ -154,7 +154,6 @@ export default {
position: absolute;
width: 100%;
height: 100%;
// padding: 0 16px;
background-color: transparent;
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

@ -154,7 +154,6 @@ export default {
position: absolute;
width: 100%;
height: 100%;
// padding: 0 16px;
background-color: transparent;
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

Binary file not shown.

After

Width:  |  Height:  |  Size: 930 B

@ -0,0 +1,125 @@
<template>
<div
style="width: 100%;height: 100%"
class="bs-design-wrap"
>
<div
:key="updateKey"
class="custom-border-box"
:style="`
border-top-left-radius: ${radiusLeftTop}px;
border-top-right-radius: ${radiusRightTop}px;
border-bottom-left-radius: ${radiusLeftBottom}px;
border-bottom-right-radius: ${radiusRightBottom}px;
border: ${width}px solid ${color};
opacity: ${opacity/ 100};
background-image: linear-gradient(${gradientDirection}, ${
gradientColor0 ? gradientColor0 : gradientColor1
} , ${gradientColor1 ? gradientColor1 : gradientColor0})
`"
>
<div class="element"
v-if="config.border.isTitle"
:style="`
color:${fontColor};
font-size:${config.border.fontSize}px;
line-height:${config.border.titleHeight}px;
height:${config.border.titleHeight};
padding:0 0 0 20px`"
>
{{config.title}}</div>
</div>
</div>
</template>
<script>
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
export default {
name: 'Border14',
components: {
},
mixins: [refreshComponentMixin],
props: {
//
config: {
type: Object,
default: () => ({})
}
},
data () {
return {
}
},
computed: {
fontColor () {
return this.config.border.fontColor ? this.config.border.fontColor
: '#fff'
},
color () {
return this.config.border.borderColor || 'rgba(135, 136, 142, 1)'
},
width () {
return this.config.border.borderWidth || 2
},
gradientColor0 () {
return this.config.border.gradientColor0 || 'rgba(131, 191, 246, 1)'
},
gradientColor1 () {
return this.config.border.gradientColor1 || 'rgba(24, 141, 240, 1)'
},
radiusLeftTop () {
return this.config.border.radiusLeftTop || 2
},
radiusRightTop () {
return this.config.border.radiusRightTop || 2
},
radiusLeftBottom () {
return this.config.border.radiusLeftBottom || 2
},
radiusRightBottom () {
return this.config.border.radiusRightBottom || 2
},
gradientDirection () {
return this.config.border.gradientDirection || 'to right'
},
opacity () {
return this.config.border.opacity || 100
}
},
watch: {
},
mounted () {
console.log( this.config.border)
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.bs-design-wrap {
position: absolute;
width: 100%;
height: 100%;
// padding: 0 16px;
background-color: transparent;
border-radius: 4px;
box-shadow: 0px 0px 0px 0px !important;
box-sizing: border-box;
.custom-border-box {
width: 100%;
height: 100%;
}
}
/*滚动条样式*/
::v-deep ::-webkit-scrollbar {
width: 4px;
border-radius: 4px;
height: 4px;
}
::v-deep ::-webkit-scrollbar-thumb {
background: #dddddd !important;
border-radius: 10px;
}
</style>

@ -0,0 +1,177 @@
const type = 'GcBorder14'
const name='边框十四'
// 右侧配置项
const setting = [
// 背景色
{
label:'边框线颜色',
// 设置组件类型, select / input / colorPicker
type: 'colorPicker',
// 字段
field: 'borderColor',
optionField: 'borderColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 'rgba(135, 136, 142, 1)',
},
{
label:'边框线宽度',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'borderWidth',
optionField: 'borderWidth', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
{
label:'背景色一',
// 设置组件类型, select / input / colorPicker
type: 'colorPicker',
// 字段
field: 'gradientColor0',
optionField: 'gradientColor0', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 'rgba(131, 191, 246, 1)',
},
{
label:'背景色二',
// 设置组件类型, select / input / colorPicker
type: 'colorPicker',
// 字段
field: 'gradientColor1',
optionField: 'gradientColor1', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 'rgba(24, 141, 240, 1)',
},
{
label: '渐变色方向',
// 设置组件类型
type: 'select',
// 字段
field: 'gradientDirection',
// 对应options中的字段
optionField: 'gradientDirection',
// 是否多选
multiple: false,
value: 'to right',
options: [
{
label: '从左到右',
value: 'to right'
},
{
label: '从右到左',
value: 'to left'
},
{
label: '从上到下',
value: 'to bottom'
},
{
label: '从下到上',
value: 'to top'
},
{
label: '从左上到右下',
value: 'to bottom right'
},
{
label: '从右上到左下',
value: 'to bottom left'
},
{
label: '从左下到右上',
value: 'to top right'
},
{
label: '从右下到左上',
value: 'to top left'
}
]
},
{
label:'不透明度',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'opacity',
optionField: 'opacity', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 100,
},
{
label:'左上圆角值',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'radiusLeftTop',
optionField: 'radiusLeftTop', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
{
label:'左下圆角值',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'radiusLeftBottom',
optionField: 'radiusLeftBottom', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
{
label:'右上圆角值',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'radiusRightTop',
optionField: 'radiusRightTop', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
{
label:'右下圆角值',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'radiusRightBottom',
optionField: 'radiusRightBottom', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
]
export default {
setting,
type,
name
}

@ -12,5 +12,5 @@ files.keys().forEach(key => {
img,
})
})
// 抛出内置系统组件
// 抛出边框组件
export default borderComponents

@ -2,7 +2,6 @@
position: relative;
width: 100%;
height: 100%;
padding: 0 16px;
background-color: rgba(0,0,0,0);
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

@ -44,7 +44,7 @@ basicConfigList = basicConfigList.map((item) => {
export function basicComponentsConfig (item) {
return {
...item,
border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[16,16,16,16]},
border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[0,0,0,0]},
option: cloneDeep(setModules[item.type]),
...cloneDeep(dataModules[item.type])
}

Loading…
Cancel
Save