hxgksystemapp/src/components/DesignForm/designLayout/pageSize.vue

<!--
@ 作者: 秦东
@ 时间: 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 style="width:94%; margin-left:3%">
        <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 #suffix>PX</template>
						</el-input>
					</td>
				</tr>
				<tr>
					<td>最大宽度</td>
					<td>
						<el-input v-model="props.layouytStyle.widthMax">
							<template #suffix>PX</template>
						</el-input>
					</td>
				</tr>
				<tr>
					<td>最小宽度</td>
					<td>
						<el-input v-model="props.layouytStyle.widthMin">
							<template #suffix>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 #suffix>PX</template>
						</el-input>
					</td>
				</tr>
				<tr>
					<td>Sm</td>
					<td>
						<el-input v-model="props.layouytStyle.widthSm">
							<template #suffix>PX</template>
						</el-input>
					</td>
				</tr>
				<tr>
					<td>Md</td>
					<td>
						<el-input v-model="props.layouytStyle.widthMd">
							<template #suffix>PX</template>
						</el-input>
					</td>
				</tr>
				<tr>
					<td>Lg</td>
					<td>
						<el-input v-model="props.layouytStyle.widthLg">
							<template #suffix>PX</template>
						</el-input>
					</td>
				</tr>
				<tr>
					<td>Xl</td>
					<td>
						<el-input v-model="props.layouytStyle.widthXl">
							<template #suffix>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 #suffix>PX</template>
						</el-input>
					</td>
				</tr>
				<tr>
					<td>最大高度</td>
					<td>
						<el-input v-model="props.layouytStyle.heightMax">
							<template #suffix>PX</template>
						</el-input>
					</td>
				</tr>
				<tr>
					<td>最小高度</td>
					<td>
						<el-input v-model="props.layouytStyle.heightMin">
							<template #suffix>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>