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

<!--
@ 作者: 秦东
@ 时间: 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>