78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<template>
|
||
<div class="handling-object">
|
||
<!-- 左侧内容：L:名称+规格 -->
|
||
<div class="handling-item left">
|
||
<div class="table-icon left-icon"></div>
|
||
<span style="margin-left: 4px;">{{ leftContent }}</span>
|
||
</div>
|
||
<!-- 右侧内容：R:名称+规格 -->
|
||
<div class="handling-item right">
|
||
<div class="table-icon right-icon"></div>
|
||
<span style="margin-left: 4px;">{{ rightContent }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'HandlingObjectLabel',
|
||
props: {
|
||
injectData: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
required: true
|
||
}
|
||
},
|
||
computed: {
|
||
// 拆分左侧内容（L:xxx）
|
||
leftContent() {
|
||
const handlingStr = this.injectData.handingObject || '';
|
||
const leftPart = handlingStr.split(',')[0] || ''; // 取第一个逗号前的部分
|
||
return leftPart.replace('L:', ''); // 移除前缀"L:"
|
||
},
|
||
// 拆分右侧内容（R:xxx）
|
||
rightContent() {
|
||
const handlingStr = this.injectData.handingObject || '';
|
||
const rightPart = handlingStr.split(',')[1] || ''; // 取第一个逗号后的部分
|
||
return rightPart.replace('R:', ''); // 移除前缀"R:"
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.handling-object {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
font-size: 14px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.handling-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
/* 防止子元素被压缩 */
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.table-icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
/* 固定图标尺寸，不被挤压 */
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 左侧图标 */
|
||
.left-icon {
|
||
background-image: url('../../../../assets/img/leftTable.png');
|
||
}
|
||
|
||
/* 右侧图标 */
|
||
.right-icon {
|
||
background-image: url('../../../../assets/img/rightTable.png');
|
||
}
|
||
</style>
|