<script setup>
|
import {ref} from "vue";
|
|
function setupComponent() {
|
// 各个输入框绑定的值，初始化为0
|
const quicksetTop = ref('0');
|
const quicksetRight = ref('0');
|
const quicksetBottom = ref('0');
|
const quicksetLeft = ref('0');
|
// 用于控制的输入值，初始化为1
|
const controlValue = ref('1');
|
|
const syncValues = () => {
|
// 将控制值赋给其他四个组件
|
quicksetTop.value = controlValue.value;
|
quicksetRight.value = controlValue.value;
|
quicksetBottom.value = controlValue.value;
|
quicksetLeft.value = controlValue.value;
|
};
|
return {
|
quicksetTop,
|
quicksetRight,
|
quicksetBottom,
|
quicksetLeft,
|
controlValue,
|
syncValues
|
};
|
}
|
const {
|
quicksetTop,
|
quicksetRight,
|
quicksetBottom,
|
quicksetLeft,
|
controlValue,
|
syncValues
|
} = setupComponent();
|
|
const check = ref(true)
|
|
</script>
|
|
<template>
|
<div id="box1">
|
<span>磨边量（毫米）</span><br><br>
|
<span>选择流程卡：</span>
|
<vxe-select size="small" placeholder="全部" clearable>
|
<vxe-option>全部</vxe-option>
|
</vxe-select>
|
|
<div style="display: flex">
|
<div class="square-container">
|
<div class="square" @click="syncValues"></div>
|
<el-input-number v-model="quicksetTop" class="top" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
<el-input-number v-model="quicksetRight" class="right" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
<el-input-number v-model="quicksetBottom" class="bottom" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
<el-input-number v-model="quicksetLeft" class="left" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
</div>
|
<el-button type="primary" style="float: right; margin: 184px 0 0 13px;">应用</el-button>
|
</div>
|
|
<div style="margin-top: -20px">
|
<span>鼠标点击蓝色图形区域可快速设置磨边量</span>
|
<el-input-number v-model="controlValue" class="quickset" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
<br>
|
<span>成品边长大于等于多少时自动填充(单位: 毫米)</span>
|
<el-checkbox v-model="check" style="margin: 5px 0 0 12px;"/>
|
<vxe-input style="width: 100px; height: 40px; margin-left: 5px" placeholder="0"/>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
#box1 {
|
width: 100%;
|
height: 100%;
|
padding: 10px;
|
border-radius: 5px;
|
background-color: #D5EAFF;
|
}
|
|
.square-container {
|
width: 300px;
|
height: 300px;
|
display: flex;
|
position: relative;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.square {
|
width: 100px;
|
height: 100px;
|
background-color: #5cadfe;
|
}
|
|
.top,
|
.right,
|
.bottom,
|
.left {
|
width: 100px;
|
height: 50px;
|
position: absolute;
|
}
|
|
.top {
|
top: 45px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.right {
|
top: 50%;
|
right: -5px;
|
transform: translateY(-50%);
|
}
|
|
.bottom {
|
bottom: 45px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.left {
|
top: 50%;
|
left: -5px;
|
transform: translateY(-50%);
|
}
|
|
.quickset {
|
margin-left: 60px;
|
width: 100px;
|
height: 40px;
|
}
|
</style>
|
