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