ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/designLayout/yuanjao.vue

<!--
@ 作者: 秦东
@ 时间: 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:94%; margin-left:3%">
        <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>