24 changed files with 5229 additions and 414 deletions
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 530 B |
|
After Width: | Height: | Size: 668 B |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,247 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-23 08:29:44 |
|||
@ 备注: 边线设置 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { reactive, computed, toRefs, ref, watch, inject } from 'vue' |
|||
const props = defineProps({ |
|||
dataVal:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
place:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
|
|||
const visible = ref(false) |
|||
const emits = defineEmits(["update:dataVal"]); |
|||
|
|||
// props.dataVal.lineColorVal = ref('#000000') |
|||
const predefineColors = ref([ |
|||
'#ff4500', |
|||
'#ff8c00', |
|||
'#ffd700', |
|||
'#90ee90', |
|||
'#00ced1', |
|||
'#1e90ff', |
|||
'#c71585', |
|||
'rgba(255, 69, 0, 0.68)', |
|||
'rgb(255, 120, 0)', |
|||
'hsv(51, 100, 98)', |
|||
'hsva(120, 40, 94, 0.5)', |
|||
'hsl(181, 100%, 37%)', |
|||
'hsla(209, 100%, 56%, 0.73)', |
|||
'#c7158577', |
|||
]) |
|||
const boxWidth = ref<number>(0) |
|||
const lineStyle = ref<string>("") |
|||
|
|||
const setDirection = (val:number) => { |
|||
// console.log("setDirection",props.dataVal) |
|||
switch (val) { |
|||
case 1: |
|||
props.dataVal["border"]=1; |
|||
// delete props.dataVal.borderTop; |
|||
// delete props.dataVal.borderleft; |
|||
// delete props.dataVal.borderRight; |
|||
// delete props.dataVal.borderBottom; |
|||
break; |
|||
case 2: |
|||
props.dataVal["border"]=2; |
|||
// props.dataVal["borderTop"]=1; |
|||
// delete props.dataVal.borderleft; |
|||
// delete props.dataVal.borderRight; |
|||
// delete props.dataVal.borderBottom; |
|||
// delete props.dataVal.border; |
|||
break; |
|||
case 3: |
|||
props.dataVal["border"]=3; |
|||
// props.dataVal["borderleft"]=1; |
|||
// delete props.dataVal.borderRight; |
|||
// delete props.dataVal.borderBottom; |
|||
// delete props.dataVal.border; |
|||
// delete props.dataVal.borderTop; |
|||
break; |
|||
case 4: |
|||
props.dataVal["border"]=4; |
|||
// props.dataVal["borderRight"]=1; |
|||
// delete props.dataVal.borderBottom; |
|||
// delete props.dataVal.border; |
|||
// delete props.dataVal.borderTop; |
|||
// delete props.dataVal.borderleft; |
|||
break; |
|||
case 5: |
|||
props.dataVal["border"]=5; |
|||
// props.dataVal["borderBottom"]=1; |
|||
// delete props.dataVal.border; |
|||
// delete props.dataVal.borderTop; |
|||
// delete props.dataVal.borderleft; |
|||
// delete props.dataVal.borderRight; |
|||
break; |
|||
default: |
|||
delete props.dataVal.border; |
|||
// delete props.dataVal.borderTop; |
|||
// delete props.dataVal.borderleft; |
|||
// delete props.dataVal.borderRight; |
|||
// delete props.dataVal.borderBottom; |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-23 14:51:03 |
|||
@ 功能: 处理轮廓 |
|||
*/ |
|||
const contourProfile = (val:number) => { |
|||
switch(val){ |
|||
case 1: |
|||
props.dataVal["contourProfile"]="solid" |
|||
break; |
|||
case 2: |
|||
props.dataVal["contourProfile"]="dashed" |
|||
break; |
|||
case 3: |
|||
props.dataVal["contourProfile"]="dotted" |
|||
break; |
|||
default: |
|||
delete props.dataVal.contourProfile; |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-23 15:19:57 |
|||
@ 功能: 监听颜色 |
|||
*/ |
|||
watch(()=>props.dataVal.lineColorVal,(val : any)=>{ |
|||
console.log("监听颜色-----1--->",val) |
|||
if(val == null || val.length == 0 || val == ""){ |
|||
delete props.dataVal.lineColorVal; |
|||
} |
|||
// Object.assign(store.controlAttr.styles.divStyle, val) |
|||
}, |
|||
{ |
|||
deep: true |
|||
}); |
|||
</script> |
|||
<template> |
|||
<table style="width:100%"> |
|||
<tr> |
|||
<td width="50">方向</td> |
|||
<td> |
|||
<div class="bianXianBox allBox" title="全边框" @click="setDirection(1)"></div> |
|||
<div class="bianXianBox topBox" title="上边框" @click="setDirection(2)"></div> |
|||
<div class="bianXianBox leftBox" title="左边框" @click="setDirection(3)"></div> |
|||
<div class="bianXianBox rightBox" title="右边框" @click="setDirection(4)"></div> |
|||
<div class="bianXianBox bottomBox" title="下边框" @click="setDirection(5)"></div> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>颜色</td> |
|||
<td> |
|||
<el-color-picker v-model="props.dataVal.lineColorVal" :predefine="predefineColors" size="default" /> |
|||
{{ props.dataVal.lineColorVal }} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>宽度</td> |
|||
<td> |
|||
<el-input-number v-model="props.dataVal.boxWidth" min="0" controls-position="right"></el-input-number>Px |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td >轮廓</td> |
|||
<td style="text-align: center;" > |
|||
<el-row> |
|||
<el-col :span="4" class="sxJz" title="none-无" @click="contourProfile(0)"> |
|||
X |
|||
</el-col> |
|||
<el-col :span="4" class="sxJz" title="solid-实线" @click="contourProfile(1)"> |
|||
<div class="bigBox"> |
|||
<div class="smallBox solidLine"></div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="4" class="sxJz" title="dashed-虚线" @click="contourProfile(2)"> |
|||
<div class="bigBox"> |
|||
<div class="smallBox dashedLine"></div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="4" class="sxJz" title="dotted-圆点" @click="contourProfile(3)"> |
|||
<div class="bigBox"> |
|||
<div class="smallBox dottedLine"></div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.bianXianBox{ |
|||
width:25px; |
|||
height:25px; |
|||
margin-right: 10px; |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
} |
|||
.allBox{ |
|||
border: 1px solid #A4A4A4; |
|||
} |
|||
.topBox{ |
|||
border-top: 1px solid #A4A4A4; |
|||
border-left: 1px solid #E4E4E4; |
|||
border-right: 1px solid #E4E4E4; |
|||
border-bottom: 1px solid #E4E4E4; |
|||
} |
|||
.leftBox{ |
|||
border-top: 1px solid #E4E4E4; |
|||
border-left: 1px solid #A4A4A4; |
|||
border-right: 1px solid #E4E4E4; |
|||
border-bottom: 1px solid #E4E4E4; |
|||
} |
|||
.rightBox{ |
|||
border-top: 1px solid #E4E4E4; |
|||
border-left: 1px solid #E4E4E4; |
|||
border-right: 1px solid #A4A4A4; |
|||
border-bottom: 1px solid #E4E4E4; |
|||
} |
|||
.bottomBox{ |
|||
border-top: 1px solid #E4E4E4; |
|||
border-left: 1px solid #E4E4E4; |
|||
border-right: 1px solid #E4E4E4; |
|||
border-bottom: 1px solid #A4A4A4; |
|||
} |
|||
.sxJz{ |
|||
display:flex; |
|||
text-align:center; |
|||
align-items: center; |
|||
justify-content:center; |
|||
cursor: pointer; |
|||
} |
|||
.bigBox{ |
|||
width:25px; |
|||
height:25px; |
|||
margin-right: 10px; |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
} |
|||
.smallBox{ |
|||
|
|||
width:100%; |
|||
height:12px; |
|||
cursor: pointer; |
|||
|
|||
} |
|||
.solidLine{ |
|||
border-bottom: 1px solid #000000; |
|||
} |
|||
.dashedLine{ |
|||
border-bottom: 1px dashed #000000; |
|||
} |
|||
.dottedLine{ |
|||
border-bottom: 1px dotted #000000; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,107 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-22 10:40:17 |
|||
@ 备注: |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { reactive, computed, toRefs, ref, watch, inject } from 'vue' |
|||
const props = defineProps({ |
|||
dataVal:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
place:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
const visible = ref(false) |
|||
const emits = defineEmits(["update:dataVal"]); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-21 14:29:49 |
|||
@ 功能: 获取和更新数值 |
|||
*/ |
|||
const getUpdataVal = computed({ |
|||
get: () => { |
|||
console.log("获取和更新数值-->props.place",props.place); |
|||
return props.dataVal[props.place] |
|||
}, |
|||
set: (val) => { |
|||
emits("update:dataVal", val); |
|||
}, |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-21 16:32:44 |
|||
@ 功能: 设定值 |
|||
*/ |
|||
const setGutter = (val: String) =>{ |
|||
// console.log("获取和更新数值-->getUpdataVal",props.dataVal[props.place],val); |
|||
// getUpdataVal=val; |
|||
props.dataVal[props.place] = val; |
|||
// console.log("获取和更新数值-->getUpdataVal--end->",props.dataVal[props.place],val); |
|||
|
|||
} |
|||
|
|||
</script> |
|||
<template> |
|||
<el-popover :visible="visible" placement="top" :width="300"> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-input v-model="props.dataVal[props.place]" :min="0" placeholder="请输入数值" type="number"> |
|||
<template #append>Px</template> |
|||
</el-input> |
|||
</el-col> |
|||
<el-col :span="24" style="padding:10px 0 0 0"> |
|||
<el-row :gutter="5"> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('auto')">Auto</el-button> |
|||
</el-col> |
|||
<el-col :span="18"> |
|||
<el-row :gutter="5"> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('0')">0</el-button> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('10')">10</el-button> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('20')">20</el-button> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('40')">40</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="5" style="padding:10px 0 0 0"> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('60')">60</el-button> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('100')">100</el-button> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('140')">140</el-button> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button text bg class="butwidth" @click="setGutter('220')">220</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24" class="butCss"> |
|||
<el-button type="danger" @click="visible=false">关闭</el-button> |
|||
<el-button type="warning" @click="props.dataVal[props.place]='0'">重置</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<template #reference> |
|||
<el-button link @click="visible=!visible">{{ props.dataVal[props.place]?props.dataVal[props.place]:"0" }}</el-button> |
|||
</template> |
|||
</el-popover> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,177 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-22 10:39:16 |
|||
@ 备注: 布局设计器 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { reactive, computed, toRefs, ref, watch, inject } from 'vue' |
|||
import { subUnitStyle } from '@/types/styles' |
|||
import { useDesignStore } from '@/store/design' |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-21 14:31:00 |
|||
@ 功能: 引入页面 |
|||
*/ |
|||
import DesignLayoutBut from "@/components/DesignForm/designLayout/designLayoutButPage.vue" |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
layouytStyle: subUnitStyle |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits(["update:layouytStyle"]); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-21 14:29:49 |
|||
@ 功能: 获取和更新数值 |
|||
*/ |
|||
const getUpdataMastVal = computed({ |
|||
get: () => props.layouytStyle, |
|||
set: (val) => { |
|||
emits("update:layouytStyle", val); |
|||
}, |
|||
}); |
|||
</script> |
|||
<template> |
|||
<div class="steeringWheel"> <!--margin--> |
|||
<div class="steeringWheelCont"> |
|||
<div class="swLeft h30 leftBanJiaoTop"></div> |
|||
<div class="swCentent h30 beiJingPingpu shangXia"> |
|||
<DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'marginTop'" /> |
|||
</div> |
|||
<div class="swright h30 rightBanJiaoTop"></div> |
|||
</div> |
|||
<div class="steeringWheelCont"> |
|||
<div class="swLeft h140 beiJingPingpus zuoYou"> |
|||
<DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'marginLeft'" /> |
|||
</div> |
|||
<div class="swCentent h140"> |
|||
<!--padding--> |
|||
<div class="steeringWheel_s"> |
|||
<div class="steeringWheelCont"> |
|||
<div class="swLeft h30 leftBanJiaoTop"></div> |
|||
<div class="swCentent_s h30 beiJingPingpu shangXia"> |
|||
<DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'paddingTop'" /> |
|||
</div> |
|||
<div class="swright h30 rightBanJiaoTop"></div> |
|||
</div> |
|||
<div class="steeringWheelCont"> |
|||
<div class="swLeft h30 beiJingPingpus zuoYou"> |
|||
<DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'paddingLeft'" /> |
|||
</div> |
|||
<div class="swCentent_s h30"></div> |
|||
<div class="swright h30 beiJingPingpus zuoYou"> |
|||
<DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'paddingRight'" /> |
|||
</div> |
|||
</div> |
|||
<div class="steeringWheelCont"> |
|||
<div class="swLeft h30 leftBanJiaoBot"></div> |
|||
<div class="swCentent_s h30 beiJingPingpu shangXia"> |
|||
<DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'paddingBot'" /> |
|||
</div> |
|||
<div class="swright h30 rightBanJiaoBot"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="swright h140 beiJingPingpus zuoYou"> |
|||
<DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'marginRight'" /> |
|||
</div> |
|||
</div> |
|||
<div class="steeringWheelCont"> |
|||
<div class="swLeft h30 leftBanJiaoBot"></div> |
|||
<div class="swCentent h30 beiJingPingpu shangXia"> |
|||
<DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'marginBot'" /> |
|||
</div> |
|||
<div class="swright h30 rightBanJiaoBot"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.steeringWheel{ |
|||
width:272px; |
|||
height:162px; |
|||
border:1px solid rgba(209,209,209, 1); |
|||
margin:0 auto |
|||
} |
|||
.steeringWheelCont{ |
|||
width:100%; |
|||
display: flex; |
|||
} |
|||
.swLeft{ |
|||
width:30px; |
|||
} |
|||
.swright{ |
|||
width:30px; |
|||
} |
|||
.swCentent{ |
|||
width:210px; |
|||
overflow: hidden; |
|||
} |
|||
.h140{ |
|||
display: flex; |
|||
height:100px; |
|||
text-align:center; |
|||
align-items: center; |
|||
justify-content:center; |
|||
} |
|||
.h30{ |
|||
display: flex; |
|||
display:black; |
|||
height:30px; |
|||
text-align:center; |
|||
align-items: center; |
|||
justify-content:center; |
|||
} |
|||
.leftBanJiaoTop{ |
|||
background: linear-gradient( |
|||
45deg, |
|||
rgba(229,229,229, 1) 50%, |
|||
rgba(209,209,209, 1) 50%, |
|||
); |
|||
} |
|||
.rightBanJiaoTop{ |
|||
background: linear-gradient( |
|||
315deg, |
|||
rgba(229,229,229, 1) 50%, |
|||
rgba(209,209,209, 1) 50%, |
|||
); |
|||
} |
|||
.leftBanJiaoBot{ |
|||
background: linear-gradient( |
|||
135deg, |
|||
rgba(229,229,229, 1) 50%, |
|||
rgba(209,209,209, 1) 50%, |
|||
); |
|||
} |
|||
.rightBanJiaoBot{ |
|||
background: linear-gradient( |
|||
225deg, |
|||
rgba(229,229,229, 1) 50%, |
|||
rgba(209,209,209, 1) 50%, |
|||
); |
|||
} |
|||
.beiJingPingpu{ |
|||
background-color:rgba(209,209,209, 1) |
|||
} |
|||
.beiJingPingpus{ |
|||
background-color:rgba(229,229,229, 1) |
|||
} |
|||
.steeringWheel_s{ |
|||
width: 202px; |
|||
height: 92px; |
|||
border: 1px solid rgb(209, 209, 209); |
|||
} |
|||
.swCentent_s{ |
|||
width:140px; |
|||
} |
|||
.h40{ |
|||
height:40px; |
|||
} |
|||
.shangXia{ |
|||
cursor:ns-resize; |
|||
} |
|||
.zuoYou{ |
|||
cursor:ew-resize; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,318 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-25 15:43:38 |
|||
@ 备注: 尺寸 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { reactive, computed, toRefs, ref, watch, inject,onBeforeMount } from 'vue' |
|||
const props = defineProps({ |
|||
layouytStyle:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
place:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
watch(()=>props.layouytStyle.widthStatus,(val:booble) => { |
|||
if(val){ |
|||
delete props.layouytStyle.width; |
|||
delete props.layouytStyle.widthMax; |
|||
delete props.layouytStyle.widthMin; |
|||
}else{ |
|||
delete props.layouytStyle.widthXs; |
|||
delete props.layouytStyle.widthSm; |
|||
delete props.layouytStyle.widthMd; |
|||
delete props.layouytStyle.widthLg; |
|||
delete props.layouytStyle.widthXl; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.width,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.width; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.widthMax,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthMax; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.widthMin,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthMin; |
|||
} |
|||
}) |
|||
|
|||
watch(()=>props.layouytStyle.widthXs,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthXs; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.widthSm,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthSm; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.widthMd,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthMd; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.widthLg,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthLg; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.widthXl,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthXl; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.height,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.height; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.heightMax,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.heightMax; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.heightMin,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.heightMin; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.objectFit,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.objectFit; |
|||
} |
|||
}) |
|||
const objectFitOptions = [ |
|||
{ |
|||
value:"fill", |
|||
label:"fill-填充", |
|||
}, |
|||
{ |
|||
value:"contain", |
|||
label:"contain-包含", |
|||
}, |
|||
{ |
|||
value:"vover", |
|||
label:"vover-原始比例填充", |
|||
}, |
|||
{ |
|||
value:"none", |
|||
label:"none-无", |
|||
}, |
|||
{ |
|||
value:"scaleDown", |
|||
label:"scaleDown-缩小", |
|||
} |
|||
]; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-27 13:26:40 |
|||
@ 功能: 设置溢出属性 |
|||
*/ |
|||
const overFlowSet = (val:any) =>{ |
|||
props.layouytStyle.overflow = val |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-27 13:58:44 |
|||
@ 功能: 设置对齐 |
|||
*/ |
|||
const duiQi = (val:any) =>{ |
|||
props.layouytStyle.textAlign = val |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-27 14:03:16 |
|||
@ 功能: 设置风格 |
|||
*/ |
|||
const fengGe = (val:any) =>{ |
|||
props.layouytStyle.fontStyle = val |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-27 14:03:44 |
|||
@ 功能: 设置修饰 |
|||
*/ |
|||
const xiuShi = (val:any) =>{ |
|||
props.layouytStyle.textecoration = val |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-switch |
|||
v-model="props.layouytStyle.widthStatus" |
|||
class="mb-2" |
|||
active-text="响应式宽度" |
|||
inactive-text="固定宽度" |
|||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #E6A23C" |
|||
/> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
|
|||
<table v-if="!props.layouytStyle.widthStatus" style="width:100%"> |
|||
<tr> |
|||
<td width="70">宽度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.width"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>最大宽度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthMax"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>最小宽度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthMin"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
|
|||
|
|||
<table v-if="props.layouytStyle.widthStatus" style="width:100%"> |
|||
<tr> |
|||
<td width="70">Xs</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthXs"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Sm</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthSm"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Md</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthMd"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Lg</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthLg"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Xl</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthXl"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
|
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<table style="width:100%"> |
|||
<tr> |
|||
<td width="70">高度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.height"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>最大高度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.heightMax"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>最小高度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.heightMin"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>溢出</td> |
|||
<td> |
|||
<el-button title="溢出可见" text size="small" class="fa fa-eye" @click="overFlowSet('visible')"></el-button> |
|||
<el-button title="溢出隐藏" text size="small" class="fa fa-eye-slash" @click="overFlowSet('hidde')"></el-button> |
|||
<el-button title="溢出滚动" text size="small" class="fa fa-text-height" @click="overFlowSet('scrol')"></el-button> |
|||
<el-button title="溢出才自动滚动" text size="small" class="fa fa-arrows" @click="overFlowSet('auto')"></el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>适应</td> |
|||
<td> |
|||
<el-select |
|||
v-model="props.layouytStyle.objectFit" |
|||
clearable |
|||
class="m-2" |
|||
style="width:100%" |
|||
> |
|||
<el-option |
|||
v-for="item in objectFitOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>对齐</td> |
|||
<td> |
|||
<el-button title="左对齐" text size="small" class="fa fa-align-left" @click="duiQi('left')"></el-button> |
|||
<el-button title="居中对齐" text size="small" class="fa fa-align-center" @click="duiQi('center')"></el-button> |
|||
<el-button title="右对齐" text size="small" class="fa fa-align-right" @click="duiQi('right')"></el-button> |
|||
<el-button title="两侧对齐" text size="small" class="fa fa-align-justify" @click="duiQi('justify')"></el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>风格</td> |
|||
<td> |
|||
<el-button title="常规" text size="small" @click="fengGe('normal')">I</el-button> |
|||
<el-button title="倾斜" text size="small" class="fa fa-italic" @click="fengGe('italic')"></el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>修饰</td> |
|||
<td> |
|||
<el-button title="无" text size="small" class="fa fa-times" @click="xiuShi('none')"></el-button> |
|||
<el-button title="删除线" text size="small" class="fa fa-strikethrough" @click="xiuShi('line-through')"></el-button> |
|||
<el-button title="下划线" text size="small" class="fa fa-underline" @click="xiuShi('underline')"></el-button> |
|||
<el-button title="上划线" text size="small" class="fa fa-etsy" @click="xiuShi('overline')"></el-button> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,230 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-28 09:31:39 |
|||
@ 备注: |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { reactive, computed, toRefs, ref, watch, inject,onBeforeMount } from 'vue' |
|||
const props = defineProps({ |
|||
layouytStyle:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
place:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
const objectFitOptions = [ |
|||
{ |
|||
value:"fill", |
|||
label:"fill-填充", |
|||
}, |
|||
{ |
|||
value:"contain", |
|||
label:"contain-包含", |
|||
}, |
|||
{ |
|||
value:"vover", |
|||
label:"vover-原始比例填充", |
|||
}, |
|||
{ |
|||
value:"none", |
|||
label:"none-无", |
|||
}, |
|||
{ |
|||
value:"scaleDown", |
|||
label:"scaleDown-缩小", |
|||
} |
|||
]; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-27 13:26:40 |
|||
@ 功能: 设置溢出属性 |
|||
*/ |
|||
const overFlowSet = (val:any) =>{ |
|||
props.layouytStyle.overflow = val |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-27 13:58:44 |
|||
@ 功能: 设置对齐 |
|||
*/ |
|||
const duiQi = (val:any) =>{ |
|||
props.layouytStyle.textAlign = val |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-27 14:03:16 |
|||
@ 功能: 设置风格 |
|||
*/ |
|||
const fengGe = (val:any) =>{ |
|||
props.layouytStyle.fontStyle = val |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-27 14:03:44 |
|||
@ 功能: 设置修饰 |
|||
*/ |
|||
const xiuShi = (val:any) =>{ |
|||
props.layouytStyle.textecoration = val |
|||
} |
|||
watch(()=>props.layouytStyle.widthStatus,(val:booble) => { |
|||
if(val){ |
|||
delete props.layouytStyle.width; |
|||
delete props.layouytStyle.widthMax; |
|||
delete props.layouytStyle.widthMin; |
|||
}else{ |
|||
delete props.layouytStyle.widthXs; |
|||
delete props.layouytStyle.widthSm; |
|||
delete props.layouytStyle.widthMd; |
|||
delete props.layouytStyle.widthLg; |
|||
delete props.layouytStyle.widthXl; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.width,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.width; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.widthMax,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthMax; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.widthMin,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.widthMin; |
|||
} |
|||
}) |
|||
|
|||
watch(()=>props.layouytStyle.height,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.height; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.heightMax,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.heightMax; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.heightMin,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.heightMin; |
|||
} |
|||
}) |
|||
watch(()=>props.layouytStyle.objectFit,(val:any) => { |
|||
if(val == null || val == ""){ |
|||
delete props.layouytStyle.objectFit; |
|||
} |
|||
}) |
|||
</script> |
|||
<template> |
|||
<table style="width:100%"> |
|||
<tr> |
|||
<td width="70">宽度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.width"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>最大宽度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthMax"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>最小宽度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.widthMin"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td >高度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.height"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>最大高度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.heightMax"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>最小高度</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.heightMin"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>溢出</td> |
|||
<td> |
|||
<el-button title="溢出可见" text size="small" class="fa fa-eye" @click="overFlowSet('visible')"></el-button> |
|||
<el-button title="溢出隐藏" text size="small" class="fa fa-eye-slash" @click="overFlowSet('hidde')"></el-button> |
|||
<el-button title="溢出滚动" text size="small" class="fa fa-text-height" @click="overFlowSet('scrol')"></el-button> |
|||
<el-button title="溢出才自动滚动" text size="small" class="fa fa-arrows" @click="overFlowSet('auto')"></el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>适应</td> |
|||
<td> |
|||
<el-select |
|||
v-model="props.layouytStyle.objectFit" |
|||
clearable |
|||
class="m-2" |
|||
style="width:100%" |
|||
> |
|||
<el-option |
|||
v-for="item in objectFitOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>对齐</td> |
|||
<td> |
|||
<el-button title="左对齐" text size="small" class="fa fa-align-left" @click="duiQi('left')"></el-button> |
|||
<el-button title="居中对齐" text size="small" class="fa fa-align-center" @click="duiQi('center')"></el-button> |
|||
<el-button title="右对齐" text size="small" class="fa fa-align-right" @click="duiQi('right')"></el-button> |
|||
<el-button title="两侧对齐" text size="small" class="fa fa-align-justify" @click="duiQi('justify')"></el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>风格</td> |
|||
<td> |
|||
<el-button title="常规" text size="small" @click="fengGe('normal')">I</el-button> |
|||
<el-button title="倾斜" text size="small" class="fa fa-italic" @click="fengGe('italic')"></el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>修饰</td> |
|||
<td> |
|||
<el-button title="无" text size="small" class="fa fa-times" @click="xiuShi('none')"></el-button> |
|||
<el-button title="删除线" text size="small" class="fa fa-strikethrough" @click="xiuShi('line-through')"></el-button> |
|||
<el-button title="下划线" text size="small" class="fa fa-underline" @click="xiuShi('underline')"></el-button> |
|||
<el-button title="上划线" text size="small" class="fa fa-etsy" @click="xiuShi('overline')"></el-button> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,141 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-28 08:43:59 |
|||
@ 备注: 文本设置 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { reactive, computed, toRefs, ref, watch, inject,onBeforeMount } from 'vue' |
|||
const props = defineProps({ |
|||
layouytStyle:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
place:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
|
|||
const ziTiList = [ |
|||
{ |
|||
value:"宋体", |
|||
label:"宋体", |
|||
}, |
|||
{ |
|||
value:"微软雅黑", |
|||
label:"微软雅黑", |
|||
}, |
|||
{ |
|||
value:"黑体", |
|||
label:"黑体", |
|||
}, |
|||
{ |
|||
value:"Arial", |
|||
label:"Arial", |
|||
}, |
|||
{ |
|||
value:"Bitter", |
|||
label:"Bitter", |
|||
}, |
|||
{ |
|||
value:"Verdana", |
|||
label:"Verdana", |
|||
}, |
|||
{ |
|||
value:"Geneva", |
|||
label:"Geneva", |
|||
}, |
|||
{ |
|||
value:"sans-serif", |
|||
label:"sans-serif", |
|||
} |
|||
]; |
|||
const fontWeightList = [ |
|||
{ |
|||
value:"100", |
|||
label:"100", |
|||
}, |
|||
{ |
|||
value:"400", |
|||
label:"400", |
|||
}, |
|||
{ |
|||
value:"700", |
|||
label:"700", |
|||
}, |
|||
{ |
|||
value:"900", |
|||
label:"900", |
|||
}, |
|||
{ |
|||
value:"bolder", |
|||
label:"bolder", |
|||
} |
|||
]; |
|||
</script> |
|||
<template> |
|||
<table style="width:100%"> |
|||
<tr> |
|||
<td width="70">字号</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.fontSize"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>字体</td> |
|||
<td> |
|||
<el-select |
|||
v-model="props.layouytStyle.fontFamily" |
|||
class="m-2" |
|||
placeholder="选择字体" |
|||
> |
|||
<el-option |
|||
v-for="item in ziTiList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="70">行高</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.fontHight"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td >字重</td> |
|||
<td> |
|||
<el-select |
|||
v-model="props.layouytStyle.fontWeight" |
|||
class="m-2" |
|||
placeholder="选择字重" |
|||
> |
|||
<el-option |
|||
v-for="item in fontWeightList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="50">颜色</td> |
|||
<td> |
|||
<el-color-picker v-model="props.layouytStyle.fontColor" size="default" /> |
|||
{{ props.layouytStyle.backgroundColor }} |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-23 14:58:56 |
|||
@ 备注: 组件背景 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { reactive, computed, toRefs, ref, watch, inject } from 'vue' |
|||
const props = defineProps({ |
|||
layouytStyle:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-23 15:19:57 |
|||
@ 功能: 监听颜色 |
|||
*/ |
|||
watch(()=>props.layouytStyle.backgroundColor,(val : any)=>{ |
|||
console.log("监听颜色-----1--->",val) |
|||
if(val == null || val.length == 0 || val == ""){ |
|||
delete props.layouytStyle.backgroundColor; |
|||
} |
|||
// Object.assign(store.controlAttr.styles.divStyle, val) |
|||
}, |
|||
{ |
|||
deep: true |
|||
}); |
|||
const transparency = ref(100) |
|||
watch(()=>transparency,(val : any)=>{ |
|||
// if(val.value == null || val.value.length == 0 || val.value == "" || val.value == 0 || val.value == "0"){ |
|||
// delete props.layouytStyle.transparency; |
|||
// }else{ |
|||
// props.layouytStyle.transparency = val.value |
|||
// } |
|||
props.layouytStyle.transparency = val.value |
|||
}, |
|||
{ |
|||
deep: true |
|||
}); |
|||
if(props.layouytStyle.backgroundColor){ |
|||
props.layouytStyle.backgroundColor = 100 |
|||
} |
|||
</script> |
|||
<template> |
|||
<table style="width:100%"> |
|||
<tr> |
|||
<td width="50">颜色</td> |
|||
<td> |
|||
<el-color-picker v-model="props.layouytStyle.backgroundColor" size="default" /> |
|||
{{ props.layouytStyle.backgroundColor }} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>透明度</td> |
|||
<td> |
|||
<el-row :gutter="15"> |
|||
<el-col :span="14"> |
|||
<el-slider v-model="props.layouytStyle.transparency" :min="0" :max="100" /> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-input |
|||
v-model="props.layouytStyle.transparency" |
|||
disabled |
|||
:formatter="(value) => `${value} %`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" |
|||
:parser="(value) => value.replace(/\$\s?|(,*)/g, '')" |
|||
input-style="text-align: right;" |
|||
/> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.text_right{ |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,165 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-23 14:16:51 |
|||
@ 备注: 圆角处理 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { reactive, computed, toRefs, ref, watch, inject,onBeforeMount } from 'vue' |
|||
// import SvgIcon from '@/views/design/form/components/svgicon.vue' |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import BianKuang from "@/assets/icons/bianKuang.svg" |
|||
import BianKuangBoot from "@/assets/icons/bianKuangBoot.svg" |
|||
import BianKuangLeft from "@/assets/icons/bianKuangLeft.svg" |
|||
import BianKuangRight from "@/assets/icons/bianKuangRight.svg" |
|||
import BianKuangTop from "@/assets/icons/bianKuangTop.svg" |
|||
import BianKuangYj from "@/assets/icons/bianKuangYuanjiao.svg" |
|||
import SiJiaoBianKuang from "@/assets/icons/siJiao.svg" |
|||
|
|||
const props = defineProps({ |
|||
layouytStyle:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
place:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
|
|||
|
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-20 14:05:40 |
|||
@ 功能: 处理边框圆角 |
|||
*/ |
|||
const boxHornCope = (val:number) => { |
|||
console.log("处理边框圆角",val) |
|||
if(val == 1){ |
|||
props.layouytStyle.divbox="all" |
|||
}else{ |
|||
props.layouytStyle.divbox = "gap" |
|||
delete props.layouytStyle.borderRadius; |
|||
} |
|||
|
|||
// radiusLeftTop = 0 |
|||
// radiusrightTop.value = 0 |
|||
// radiusLeftBot.value = 0 |
|||
// radiusrightBot.value = 0 |
|||
|
|||
console.log("处理边框圆角",props.layouytStyle) |
|||
} |
|||
onBeforeMount(() => { |
|||
props.layouytStyle.divbox = "all" |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-22 11:32:14 |
|||
@ 功能: 滑块处理值 |
|||
*/ |
|||
|
|||
const sliderChange = (val:number) => { |
|||
console.log("处理边框圆角112",val) |
|||
props.layouytStyle.borderRadius = val |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-23 14:42:56 |
|||
@ 功能: 监听四角变化 |
|||
*/ |
|||
watch(()=>props.layouytStyle.radiusLeftTop,(val:number)=>{ |
|||
calculationProperties(); |
|||
}, |
|||
{ |
|||
deep: true |
|||
}) |
|||
watch(()=>props.layouytStyle.radiusrightTop,(val:number)=>{ |
|||
calculationProperties(); |
|||
}, |
|||
{ |
|||
deep: true |
|||
}) |
|||
watch(()=>props.layouytStyle.radiusLeftBot,(val:number)=>{ |
|||
calculationProperties(); |
|||
}, |
|||
{ |
|||
deep: true |
|||
}) |
|||
watch(()=>props.layouytStyle.radiusrightBot,(val:number)=>{ |
|||
calculationProperties(); |
|||
}, |
|||
{ |
|||
deep: true |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-22 14:30:57 |
|||
@ 功能: 计算属性 |
|||
*/ |
|||
const calculationProperties = () =>{ |
|||
if( props.layouytStyle.radiusLeftTop == 0 && props.layouytStyle.radiusrightTop == 0 && props.layouytStyle.radiusLeftBot == 0 && props.layouytStyle.radiusrightBot == 0){ |
|||
delete props.layouytStyle.borderRadius; |
|||
delete props.layouytStyle.radiusLeftTop; |
|||
delete props.layouytStyle.radiusrightTop; |
|||
delete props.layouytStyle.radiusLeftBot; |
|||
delete props.layouytStyle.radiusrightBot; |
|||
}else if( props.layouytStyle.radiusLeftTop != 0 && props.layouytStyle.radiusrightTop != 0 && props.layouytStyle.radiusLeftBot != 0 && props.layouytStyle.radiusrightBot != 0){ |
|||
delete props.layouytStyle.borderRadius; |
|||
}else{ |
|||
if(props.layouytStyle.radiusLeftTop == 0){ |
|||
delete props.layouytStyle.radiusLeftTop; |
|||
} |
|||
if(props.layouytStyle.radiusrightTop == 0){ |
|||
delete props.layouytStyle.radiusrightTop; |
|||
} |
|||
if(props.layouytStyle.radiusLeftBot == 0){ |
|||
delete props.layouytStyle.radiusLeftBot; |
|||
} |
|||
if(props.layouytStyle.radiusrightBot == 0){ |
|||
delete props.layouytStyle.radiusrightBot; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<table style="width:100%"> |
|||
<tr> |
|||
<td style="width:55px"> |
|||
<el-image style="width: 20px; height: 20px; cursor: pointer;" :src="BianKuangYj" :fit="'fit'" @click.top="boxHornCope(1)" /> |
|||
<el-image style="width: 20px; height: 20px; cursor: pointer;" :src="SiJiaoBianKuang" :fit="'fit'" @click.top="boxHornCope(2)" /> |
|||
</td> |
|||
<td> |
|||
<el-slider v-if="props.layouytStyle.divbox!='gap'" v-model="props.layouytStyle.borderRadius" :min="0" :max="100" /> |
|||
<table v-if="props.layouytStyle.divbox=='gap'" style="width:100%"> |
|||
<tr> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.radiusLeftTop" placeholder="0" :min="0" type="number"> |
|||
|
|||
</el-input> |
|||
</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.radiusrightTop" placeholder="0" :min="0" type="number"> |
|||
|
|||
</el-input> |
|||
</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.radiusLeftBot" placeholder="0" :min="0" type="number"> |
|||
|
|||
</el-input> |
|||
</td> |
|||
<td> |
|||
<el-input v-model="props.layouytStyle.radiusrightBot" placeholder="0" :min="0" type="number"> |
|||
|
|||
</el-input> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,155 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-29 14:18:54 |
|||
@ 备注: 样式布局 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import DesignLayout from "@/components/DesignForm/designLayout/designLayoutPage.vue" |
|||
import BianXian from "@/components/DesignForm/designLayout/bianXian.vue" |
|||
import YuanJiao from "@/components/DesignForm/designLayout/yuanjao.vue" |
|||
import UnitBackGround from "@/components/DesignForm/designLayout/unitBackGround.vue" |
|||
import PageSize from "@/components/DesignForm/designLayout/pageSize.vue" |
|||
import PageSizeSmail from "@/components/DesignForm/designLayout/pageSizeSmail.vue" |
|||
import TextPage from "@/components/DesignForm/designLayout/textPage.vue" |
|||
|
|||
const props = defineProps({ |
|||
stylesVal:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
place:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
const unitIsShow = ref(true) |
|||
const labelIsShow = ref(true) |
|||
const inputUnitTitle = (val:string) => { |
|||
console.log("inputUnitTitle",val); |
|||
switch (val) { |
|||
case "radio": |
|||
return "Radio布局" |
|||
break; |
|||
case "select": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "datePicker": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "timePicker": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "switch": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "inputNumber": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "cascader": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "rate": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "slider": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "treeSelect": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "txt": |
|||
unitIsShow.value = false; |
|||
labelIsShow.value = false; |
|||
break; |
|||
case "title": |
|||
unitIsShow.value = false; |
|||
break; |
|||
default: |
|||
return "Input布局" |
|||
break; |
|||
} |
|||
return "Input布局" |
|||
} |
|||
// const divStyle = reactive<any>({}) |
|||
// watch(()=>divStyle,(val : any)=>{ |
|||
// // console.log("格式布局-----1--->",val) |
|||
// props.stylesVal[props.place] = val |
|||
// // Object.assign(store.controlAttr.styles.divStyle, val) |
|||
// }, |
|||
// { |
|||
// deep: true |
|||
// }); |
|||
|
|||
watch(()=>props.place,(val : any)=>{ |
|||
console.log("格式布局-----1--->",val) |
|||
inputUnitTitle(val); |
|||
// props.stylesVal[props.place] = val |
|||
// Object.assign(store.controlAttr.styles.divStyle, val) |
|||
}, |
|||
{ |
|||
deep: true |
|||
}); |
|||
const activeName = ref('0') |
|||
</script> |
|||
<template> |
|||
<div class="jhk_kjh"> |
|||
当前组件类别======>{{props.place}} |
|||
<el-collapse v-model="activeName" accordion> |
|||
|
|||
<el-collapse-item title="边框布局" name="1"> |
|||
|
|||
<el-divider content-position="left">外框</el-divider> |
|||
<DesignLayout v-model:layouyt-style="props.stylesVal.divStyle" /> |
|||
<el-divider content-position="left">圆角</el-divider> |
|||
<YuanJiao v-model:layouyt-style="props.stylesVal.divStyle" /> |
|||
<el-divider content-position="left">边线</el-divider> |
|||
<BianXian v-model:dataVal="props.stylesVal.divStyle" /> |
|||
<el-divider content-position="left">背景</el-divider> |
|||
<UnitBackGround v-model:layouyt-style="props.stylesVal.divStyle" /> |
|||
<el-divider content-position="left">尺寸</el-divider> |
|||
<PageSize v-model:layouyt-style="props.stylesVal.divStyle" :place="'div'" /> |
|||
|
|||
<el-divider v-if="props.place=='txt'" content-position="left">文本</el-divider> |
|||
<TextPage v-if="props.place=='txt'" v-model:layouyt-style="props.stylesVal.divStyle" :place="'div'" /> |
|||
|
|||
</el-collapse-item> |
|||
|
|||
<el-collapse-item v-if="labelIsShow" title="Lable布局" name="2"> |
|||
<el-divider content-position="left">外框</el-divider> |
|||
<DesignLayout v-model:layouyt-style="props.stylesVal.labelStyle" /> |
|||
<el-divider content-position="left">圆角</el-divider> |
|||
<YuanJiao v-model:layouyt-style="props.stylesVal.labelStyle" /> |
|||
<el-divider content-position="left">边线</el-divider> |
|||
<BianXian v-model:dataVal="props.stylesVal.labelStyle" /> |
|||
<el-divider content-position="left">背景</el-divider> |
|||
<UnitBackGround v-model:layouyt-style="props.stylesVal.labelStyle" /> |
|||
<el-divider content-position="left">尺寸</el-divider> |
|||
<PageSizeSmail v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
|||
<el-divider content-position="left">文本</el-divider> |
|||
<TextPage v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
|||
</el-collapse-item> |
|||
|
|||
<el-collapse-item v-if="unitIsShow" :title="inputUnitTitle(props.place)" name="3"> |
|||
<el-divider content-position="left">外框</el-divider> |
|||
<DesignLayout v-model:layouyt-style="props.stylesVal.inputStyle" /> |
|||
|
|||
<el-divider content-position="left">边线</el-divider> |
|||
<BianXian v-model:dataVal="props.stylesVal.inputStyle" /> |
|||
<el-divider content-position="left">背景</el-divider> |
|||
<UnitBackGround v-model:layouyt-style="props.stylesVal.inputStyle" /> |
|||
<el-divider content-position="left">尺寸</el-divider> |
|||
<PageSizeSmail v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" /> |
|||
<el-divider content-position="left">文本</el-divider> |
|||
<TextPage v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" /> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
</div> |
|||
</template> |
|||
<style > |
|||
.jhk_kjh .el-collapse-item__header{ |
|||
padding-left: 10px; |
|||
background-color: rgb(229, 229, 229); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,581 @@ |
|||
export const AnalysisCss = (ele:any) =>{ |
|||
let styleObject:any = {} |
|||
if(ele['marginTop']){ |
|||
if(ele['marginTop'] != "auto"){ |
|||
styleObject['margin-top'] = ele['marginTop']+"px"; |
|||
}else{ |
|||
styleObject['margin-top'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginLeft']){ |
|||
if(ele['marginLeft'] != "auto"){ |
|||
styleObject['margin-left'] = ele['marginLeft']+"px"; |
|||
}else{ |
|||
styleObject['margin-left'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginRight']){ |
|||
if(ele['marginRight'] != "auto"){ |
|||
styleObject['margin-right'] = ele['marginRight']+"px"; |
|||
}else{ |
|||
styleObject['margin-right'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginBot']){ |
|||
if(ele['marginBot'] != "auto"){ |
|||
styleObject['margin-bottom'] = ele['marginBot']+"px"; |
|||
}else{ |
|||
styleObject['margin-bottom'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingTop']){ |
|||
if(ele['paddingTop'] != "auto"){ |
|||
styleObject['padding-top'] = ele['paddingTop']+"px"; |
|||
}else{ |
|||
styleObject['padding-top'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingLeft']){ |
|||
if(ele['paddingLeft'] != "auto"){ |
|||
styleObject['padding-left'] = ele['paddingLeft']+"px"; |
|||
}else{ |
|||
styleObject['padding-left'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingRight']){ |
|||
if(ele['paddingRight'] != "auto"){ |
|||
styleObject['padding-right'] = ele['paddingRight']+"px"; |
|||
}else{ |
|||
styleObject['padding-right'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingBot']){ |
|||
if(ele['paddingBot'] != "auto"){ |
|||
styleObject['padding-bottom'] = ele['paddingBot']+"px"; |
|||
}else{ |
|||
styleObject['padding-bottom'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['divbox']){ |
|||
if(ele['divbox'] == "gap"){ |
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'gap')); |
|||
}else{ |
|||
// styleObject['border-radius'] = yuanJiaoAnalysis(ele,'gap');
|
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all')); |
|||
} |
|||
}else{ |
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all')); |
|||
} |
|||
|
|||
let borderLink = "" |
|||
|
|||
if(ele["boxWidth"]){ |
|||
borderLink+=ele["boxWidth"]+"px " |
|||
} |
|||
if(ele["contourProfile"]) { |
|||
borderLink+=" " +ele["contourProfile"] + " " |
|||
} |
|||
if(ele["lineColorVal"]) { |
|||
borderLink+=" " +ele["lineColorVal"] + " " |
|||
} |
|||
if(ele["border"] && borderLink != ""){ |
|||
switch(ele["border"]){ |
|||
case 1: |
|||
styleObject['border']=borderLink |
|||
break; |
|||
case 2: |
|||
styleObject['border-top']=borderLink |
|||
break; |
|||
case 3: |
|||
styleObject['border-left']=borderLink |
|||
break; |
|||
case 4: |
|||
styleObject['border-right']=borderLink |
|||
break; |
|||
case 5: |
|||
styleObject['border-bottom']=borderLink |
|||
break; |
|||
default: |
|||
styleObject['border']= "0px" |
|||
} |
|||
} |
|||
|
|||
if(ele["transparency"] || ele["transparency"] == 0) { |
|||
styleObject['opacity'] = ele['transparency']/100; |
|||
} |
|||
|
|||
if(ele["backgroundColor"]) { |
|||
styleObject['background-color'] = ele['backgroundColor'] |
|||
} |
|||
|
|||
if(ele['width']){ |
|||
if(ele['width'] != ""){ |
|||
styleObject['width'] = ele['width'].toString()+"px"; |
|||
} |
|||
} |
|||
if(ele['widthMax'] && ele['widthMax'] != ""){ |
|||
styleObject['max-width'] = ele['widthMax'].toString()+"px"; |
|||
} |
|||
if(ele['widthMin'] && ele['widthMin'] != ""){ |
|||
styleObject['min-width'] = ele['widthMin'].toString()+"px"; |
|||
} |
|||
if(ele['height'] && ele['height'] != ""){ |
|||
styleObject['height'] = ele['height'].toString()+"px"; |
|||
} |
|||
if(ele['heightMax'] && ele['heightMax'] != ""){ |
|||
styleObject['max-height'] = ele['heightMax'].toString()+"px"; |
|||
} |
|||
if(ele['heightMin'] && ele['heightMin'] != ""){ |
|||
styleObject['min-height'] = ele['heightMin'].toString()+"px"; |
|||
} |
|||
if(ele['objectFit'] && ele['objectFit'] != ""){ |
|||
switch(ele['objectFit']){ |
|||
case "fill": |
|||
styleObject['object-fit'] = "fill"; |
|||
break; |
|||
case "contain": |
|||
styleObject['object-fit'] = "contain"; |
|||
break; |
|||
case "vover": |
|||
styleObject['object-fit'] = "cover"; |
|||
break; |
|||
case "none": |
|||
styleObject['object-fit'] = "none"; |
|||
break; |
|||
case "scaleDown": |
|||
styleObject['object-fit'] = "scale-down"; |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
|
|||
} |
|||
if(ele['textAlign'] && ele['textAlign'] != ""){ |
|||
styleObject['text-align'] = ele['textAlign']; |
|||
} |
|||
if(ele['fontStyle'] && ele['fontStyle'] != ""){ |
|||
styleObject['font-style'] = ele['fontStyle']; |
|||
} |
|||
if(ele['textecoration'] && ele['textecoration'] != ""){ |
|||
styleObject['text-decoration'] = ele['textecoration']; |
|||
} |
|||
if(ele['fontSize'] && ele['fontSize'] != ""){ |
|||
styleObject['font-size'] = ele['fontSize'].toString()+"px"; |
|||
} |
|||
if(ele['fontFamily'] && ele['fontFamily'] != ""){ |
|||
styleObject['font-family'] = ele['fontFamily']; |
|||
} |
|||
if(ele['fontHight'] && ele['fontHight'] != ""){ |
|||
styleObject['line-height'] = ele['fontHight'].toString()+"px"; |
|||
} |
|||
if(ele['fontWeight'] && ele['fontWeight'] != ""){ |
|||
styleObject['font-weight'] = ele['fontWeight']; |
|||
} |
|||
if(ele['fontColor'] && ele['fontColor'] != ""){ |
|||
styleObject['color'] = ele['fontColor']; |
|||
} |
|||
console.log("分析css==>",styleObject); |
|||
return styleObject |
|||
} |
|||
|
|||
const yuanJiaoAnalysis = (ele:any,types:string) => { |
|||
if(types == "gap"){ |
|||
let borRad:any = {} |
|||
for(let k in ele){ |
|||
if(k == 'radiusLeftTop'){ |
|||
if(ele[k] != ""){ |
|||
borRad['border-top-left-radius'] = ele[k]+"px"; |
|||
}else{ |
|||
borRad['border-top-left-radius'] = "0px"; |
|||
} |
|||
} |
|||
if(k == 'radiusrightTop'){ |
|||
if(ele[k] != ""){ |
|||
borRad['border-top-right-radius'] = ele[k]+"px"; |
|||
}else{ |
|||
borRad['border-top-right-radius'] = "0px"; |
|||
} |
|||
} |
|||
if(k == 'radiusLeftBot'){ |
|||
if(ele[k] != ""){ |
|||
borRad['border-bottom-left-radius'] = ele[k]+"px"; |
|||
}else{ |
|||
borRad['border-bottom-left-radius'] = "0px"; |
|||
} |
|||
} |
|||
if(k == 'radiusrightBot'){ |
|||
if(ele[k] != ""){ |
|||
borRad['border-bottom-right-radius'] = ele[k]+"px"; |
|||
}else{ |
|||
borRad['border-bottom-right-radius'] = "0px"; |
|||
} |
|||
} |
|||
} |
|||
// console.log("borRad",borRad)
|
|||
return borRad; |
|||
}else{ |
|||
let borRad:any = {} |
|||
for(let k in ele){ |
|||
if(k == 'borderRadius'){ |
|||
if(ele[k] != ""){ |
|||
borRad['border-radius'] = ele[k]+"px"; |
|||
}else{ |
|||
borRad['border-radius'] = "0px"; |
|||
} |
|||
} |
|||
} |
|||
return borRad; |
|||
} |
|||
} |
|||
|
|||
export const AnalysisInputCss = (ele:any,sty:number) =>{ |
|||
let styleObject:any = {} |
|||
if(sty == 1 || sty == 2){ |
|||
if(ele['marginTop']){ |
|||
if(ele['marginTop'] != "auto"){ |
|||
styleObject['margin-top'] = ele['marginTop']+"px"; |
|||
}else{ |
|||
styleObject['margin-top'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginLeft']){ |
|||
if(ele['marginLeft'] != "auto"){ |
|||
styleObject['margin-left'] = ele['marginLeft']+"px"; |
|||
}else{ |
|||
styleObject['margin-left'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginRight']){ |
|||
if(ele['marginRight'] != "auto"){ |
|||
styleObject['margin-right'] = ele['marginRight']+"px"; |
|||
}else{ |
|||
styleObject['margin-right'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginBot']){ |
|||
if(ele['marginBot'] != "auto"){ |
|||
styleObject['margin-bottom'] = ele['marginBot']+"px"; |
|||
}else{ |
|||
styleObject['margin-bottom'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['divbox']){ |
|||
if(ele['divbox'] == "gap"){ |
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'gap')); |
|||
}else{ |
|||
// styleObject['border-radius'] = yuanJiaoAnalysis(ele,'gap');
|
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all')); |
|||
} |
|||
}else{ |
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all')); |
|||
} |
|||
|
|||
let borderLink = "" |
|||
|
|||
if(ele["boxWidth"]){ |
|||
borderLink+=ele["boxWidth"]+"px " |
|||
} |
|||
if(ele["contourProfile"]) { |
|||
borderLink+=" " +ele["contourProfile"] + " " |
|||
} |
|||
if(ele["lineColorVal"]) { |
|||
borderLink+=" " +ele["lineColorVal"] + " " |
|||
} |
|||
if(ele["border"] && borderLink != ""){ |
|||
switch(ele["border"]){ |
|||
case 1: |
|||
styleObject['border']=borderLink |
|||
break; |
|||
case 2: |
|||
styleObject['border-top']=borderLink |
|||
break; |
|||
case 3: |
|||
styleObject['border-left']=borderLink |
|||
break; |
|||
case 4: |
|||
styleObject['border-right']=borderLink |
|||
break; |
|||
case 5: |
|||
styleObject['border-bottom']=borderLink |
|||
break; |
|||
default: |
|||
styleObject['border']= "0px" |
|||
} |
|||
} |
|||
if(ele['width']){ |
|||
if(ele['width'] != ""){ |
|||
styleObject['width'] = ele['width'].toString()+"px"; |
|||
} |
|||
} |
|||
if(ele['widthMax'] && ele['widthMax'] != ""){ |
|||
styleObject['max-width'] = ele['widthMax'].toString()+"px"; |
|||
} |
|||
if(ele['widthMin'] && ele['widthMin'] != ""){ |
|||
styleObject['min-width'] = ele['widthMin'].toString()+"px"; |
|||
} |
|||
if(ele['height'] && ele['height'] != ""){ |
|||
styleObject['height'] = ele['height'].toString()+"px"; |
|||
} |
|||
if(ele['heightMax'] && ele['heightMax'] != ""){ |
|||
styleObject['max-height'] = ele['heightMax'].toString()+"px"; |
|||
} |
|||
if(ele['heightMin'] && ele['heightMin'] != ""){ |
|||
styleObject['min-height'] = ele['heightMin'].toString()+"px"; |
|||
} |
|||
if(ele['objectFit'] && ele['objectFit'] != ""){ |
|||
switch(ele['objectFit']){ |
|||
case "fill": |
|||
styleObject['object-fit'] = "fill"; |
|||
break; |
|||
case "contain": |
|||
styleObject['object-fit'] = "contain"; |
|||
break; |
|||
case "vover": |
|||
styleObject['object-fit'] = "cover"; |
|||
break; |
|||
case "none": |
|||
styleObject['object-fit'] = "none"; |
|||
break; |
|||
case "scaleDown": |
|||
styleObject['object-fit'] = "scale-down"; |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
|
|||
} |
|||
} |
|||
if(sty == 1 || sty == 3){ |
|||
if(ele['paddingTop']){ |
|||
if(ele['paddingTop'] != "auto"){ |
|||
styleObject['padding-top'] = ele['paddingTop']+"px"; |
|||
}else{ |
|||
styleObject['padding-top'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingLeft']){ |
|||
if(ele['paddingLeft'] != "auto"){ |
|||
styleObject['padding-left'] = ele['paddingLeft']+"px"; |
|||
}else{ |
|||
styleObject['padding-left'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingRight']){ |
|||
if(ele['paddingRight'] != "auto"){ |
|||
styleObject['padding-right'] = ele['paddingRight']+"px"; |
|||
}else{ |
|||
styleObject['padding-right'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingBot']){ |
|||
if(ele['paddingBot'] != "auto"){ |
|||
styleObject['padding-bottom'] = ele['paddingBot']+"px"; |
|||
}else{ |
|||
styleObject['padding-bottom'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['textAlign'] && ele['textAlign'] != ""){ |
|||
styleObject['text-align'] = ele['textAlign']; |
|||
} |
|||
if(ele['fontStyle'] && ele['fontStyle'] != ""){ |
|||
styleObject['font-style'] = ele['fontStyle']; |
|||
} |
|||
if(ele['textecoration'] && ele['textecoration'] != ""){ |
|||
styleObject['text-decoration'] = ele['textecoration']; |
|||
} |
|||
if(ele['fontSize'] && ele['fontSize'] != ""){ |
|||
styleObject['font-size'] = ele['fontSize'].toString()+"px"; |
|||
} |
|||
if(ele['fontFamily'] && ele['fontFamily'] != ""){ |
|||
styleObject['font-family'] = ele['fontFamily']; |
|||
} |
|||
if(ele['fontHight'] && ele['fontHight'] != ""){ |
|||
styleObject['line-height'] = ele['fontHight'].toString()+"px"; |
|||
} |
|||
if(ele['fontWeight'] && ele['fontWeight'] != ""){ |
|||
styleObject['font-weight'] = ele['fontWeight']; |
|||
} |
|||
if(ele['fontColor'] && ele['fontColor'] != ""){ |
|||
styleObject['color'] = ele['fontColor']; |
|||
} |
|||
} |
|||
if(sty == 1 || sty == 4){ |
|||
if(ele['marginTop']){ |
|||
if(ele['marginTop'] != "auto"){ |
|||
styleObject['margin-top'] = ele['marginTop']+"px"; |
|||
}else{ |
|||
styleObject['margin-top'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginLeft']){ |
|||
if(ele['marginLeft'] != "auto"){ |
|||
styleObject['margin-left'] = ele['marginLeft']+"px"; |
|||
}else{ |
|||
styleObject['margin-left'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginRight']){ |
|||
if(ele['marginRight'] != "auto"){ |
|||
styleObject['margin-right'] = ele['marginRight']+"px"; |
|||
}else{ |
|||
styleObject['margin-right'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['marginBot']){ |
|||
if(ele['marginBot'] != "auto"){ |
|||
styleObject['margin-bottom'] = ele['marginBot']+"px"; |
|||
}else{ |
|||
styleObject['margin-bottom'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['divbox']){ |
|||
if(ele['divbox'] == "gap"){ |
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'gap')); |
|||
}else{ |
|||
// styleObject['border-radius'] = yuanJiaoAnalysis(ele,'gap');
|
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all')); |
|||
} |
|||
}else{ |
|||
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all')); |
|||
} |
|||
|
|||
let borderLink = "" |
|||
|
|||
if(ele["boxWidth"]){ |
|||
borderLink+=ele["boxWidth"]+"px " |
|||
} |
|||
if(ele["contourProfile"]) { |
|||
borderLink+=" " +ele["contourProfile"] + " " |
|||
} |
|||
if(ele["lineColorVal"]) { |
|||
borderLink+=" " +ele["lineColorVal"] + " " |
|||
} |
|||
if(ele["border"] && borderLink != ""){ |
|||
switch(ele["border"]){ |
|||
case 1: |
|||
styleObject['border']=borderLink |
|||
break; |
|||
case 2: |
|||
styleObject['border-top']=borderLink |
|||
break; |
|||
case 3: |
|||
styleObject['border-left']=borderLink |
|||
break; |
|||
case 4: |
|||
styleObject['border-right']=borderLink |
|||
break; |
|||
case 5: |
|||
styleObject['border-bottom']=borderLink |
|||
break; |
|||
default: |
|||
styleObject['border']= "0px" |
|||
} |
|||
} |
|||
if(ele['width']){ |
|||
if(ele['width'] != ""){ |
|||
styleObject['width'] = ele['width'].toString()+"px"; |
|||
} |
|||
} |
|||
if(ele['widthMax'] && ele['widthMax'] != ""){ |
|||
styleObject['max-width'] = ele['widthMax'].toString()+"px"; |
|||
} |
|||
if(ele['widthMin'] && ele['widthMin'] != ""){ |
|||
styleObject['min-width'] = ele['widthMin'].toString()+"px"; |
|||
} |
|||
if(ele['height'] && ele['height'] != ""){ |
|||
styleObject['height'] = ele['height'].toString()+"px"; |
|||
} |
|||
if(ele['heightMax'] && ele['heightMax'] != ""){ |
|||
styleObject['max-height'] = ele['heightMax'].toString()+"px"; |
|||
} |
|||
if(ele['heightMin'] && ele['heightMin'] != ""){ |
|||
styleObject['min-height'] = ele['heightMin'].toString()+"px"; |
|||
} |
|||
if(ele['objectFit'] && ele['objectFit'] != ""){ |
|||
switch(ele['objectFit']){ |
|||
case "fill": |
|||
styleObject['object-fit'] = "fill"; |
|||
break; |
|||
case "contain": |
|||
styleObject['object-fit'] = "contain"; |
|||
break; |
|||
case "vover": |
|||
styleObject['object-fit'] = "cover"; |
|||
break; |
|||
case "none": |
|||
styleObject['object-fit'] = "none"; |
|||
break; |
|||
case "scaleDown": |
|||
styleObject['object-fit'] = "scale-down"; |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
|
|||
} |
|||
if(ele['textAlign'] && ele['textAlign'] != ""){ |
|||
styleObject['text-align'] = ele['textAlign']; |
|||
} |
|||
} |
|||
if(sty == 1 || sty == 5){ |
|||
if(ele['paddingTop']){ |
|||
if(ele['paddingTop'] != "auto"){ |
|||
styleObject['padding-top'] = ele['paddingTop']+"px"; |
|||
}else{ |
|||
styleObject['padding-top'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingLeft']){ |
|||
if(ele['paddingLeft'] != "auto"){ |
|||
styleObject['padding-left'] = ele['paddingLeft']+"px"; |
|||
}else{ |
|||
styleObject['padding-left'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingRight']){ |
|||
if(ele['paddingRight'] != "auto"){ |
|||
styleObject['padding-right'] = ele['paddingRight']+"px"; |
|||
}else{ |
|||
styleObject['padding-right'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['paddingBot']){ |
|||
if(ele['paddingBot'] != "auto"){ |
|||
styleObject['padding-bottom'] = ele['paddingBot']+"px"; |
|||
}else{ |
|||
styleObject['padding-bottom'] = "0px"; |
|||
} |
|||
} |
|||
if(ele['fontStyle'] && ele['fontStyle'] != ""){ |
|||
styleObject['font-style'] = ele['fontStyle']; |
|||
} |
|||
if(ele['textecoration'] && ele['textecoration'] != ""){ |
|||
styleObject['text-decoration'] = ele['textecoration']; |
|||
} |
|||
if(ele['fontSize'] && ele['fontSize'] != ""){ |
|||
styleObject['font-size'] = ele['fontSize'].toString()+"px"; |
|||
} |
|||
if(ele['fontFamily'] && ele['fontFamily'] != ""){ |
|||
styleObject['font-family'] = ele['fontFamily']; |
|||
} |
|||
if(ele['fontHight'] && ele['fontHight'] != ""){ |
|||
styleObject['line-height'] = ele['fontHight'].toString()+"px"; |
|||
} |
|||
if(ele['fontWeight'] && ele['fontWeight'] != ""){ |
|||
styleObject['font-weight'] = ele['fontWeight']; |
|||
} |
|||
if(ele['fontColor'] && ele['fontColor'] != ""){ |
|||
styleObject['color'] = ele['fontColor']; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
if(ele["backgroundColor"]) { |
|||
styleObject['background-color'] = ele['backgroundColor'] |
|||
} |
|||
if(ele["transparency"] || ele["transparency"] == 0) { |
|||
styleObject['opacity'] = ele['transparency']/100; |
|||
} |
|||
return styleObject; |
|||
} |
|||
Loading…
Reference in new issue