You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
7.8 KiB
318 lines
7.8 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 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>
|
|
|