2 changed files with 2478 additions and 2476 deletions
File diff suppressed because it is too large
@ -1,174 +1,175 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 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 buttionShow = ref(false) |
|||
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","upload","tinymce": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "treeSelect","colorPicker","signaturemap": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "txt","table","videoUpAndPlay","lowcodeCarsusel","grid","tabs": |
|||
unitIsShow.value = false; |
|||
labelIsShow.value = false; |
|||
break; |
|||
case "title": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "button": |
|||
buttionShow.value = true; |
|||
unitIsShow.value = false; |
|||
labelIsShow.value = false; |
|||
break; |
|||
|
|||
default: |
|||
unitIsShow.value = true; |
|||
labelIsShow.value = true; |
|||
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-item v-if="buttionShow" title="按钮布局" name="2"> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
<style > |
|||
.jhk_kjh .el-collapse-item__header{ |
|||
padding-left: 10px; |
|||
background-color: rgb(229, 229, 229); |
|||
} |
|||
</style> |
|||
@ 作者: 秦东 |
|||
@ 时间: 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 buttionShow = ref(false) |
|||
const unitIsShow = ref(true) |
|||
const labelIsShow = ref(true) |
|||
const inputUnitTitle = (val:string) => { |
|||
console.log("inputUnitTitle",val); |
|||
switch (val) { |
|||
case "radio": |
|||
return "输入设置" |
|||
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","upload","tinymce": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "treeSelect","colorPicker","signaturemap": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "txt","table","videoUpAndPlay","lowcodeCarsusel","grid","tabs": |
|||
unitIsShow.value = false; |
|||
labelIsShow.value = false; |
|||
break; |
|||
case "title": |
|||
unitIsShow.value = false; |
|||
break; |
|||
case "button": |
|||
buttionShow.value = true; |
|||
unitIsShow.value = false; |
|||
labelIsShow.value = false; |
|||
break; |
|||
|
|||
default: |
|||
unitIsShow.value = true; |
|||
labelIsShow.value = true; |
|||
return "输入设置" |
|||
break; |
|||
} |
|||
return "输入设置" |
|||
} |
|||
// 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="标签设置" 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-item v-if="buttionShow" title="输入设置" name="2"> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
<style > |
|||
.jhk_kjh .el-collapse-item__header{ |
|||
padding-left: 10px; |
|||
background-color: rgb(229, 229, 229); |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue