fix: 视角切换el-radio-group换原生radio(同根因)

This commit is contained in:
Hermes CI Fix
2026-07-14 16:17:04 +08:00
parent 6218a7d2db
commit f821ee2c9d
+15 -5
View File
@@ -15,11 +15,15 @@
<el-button size="small" @click="zoomReset">100%</el-button> <el-button size="small" @click="zoomReset">100%</el-button>
<el-button size="small" @click="zoomFit">适合</el-button> <el-button size="small" @click="zoomFit">适合</el-button>
</div> </div>
<!-- 视角切换 --> <!-- 视角切换原生radio -->
<el-radio-group v-model="viewDirection" size="small" style="margin-right:8px;"> <span class="view-toggle">
<el-radio-button value="cascade">📐 级联</el-radio-button> <label class="vt-label" :class="{ active: viewDirection === 'cascade' }">
<el-radio-button value="causal">🔗 因果</el-radio-button> <input type="radio" v-model="viewDirection" value="cascade" /> 📐 级联
</el-radio-group> </label>
<label class="vt-label" :class="{ active: viewDirection === 'causal' }">
<input type="radio" v-model="viewDirection" value="causal" /> 🔗 因果
</label>
</span>
<el-button type="primary" @click="saveCanvas">保存</el-button> <el-button type="primary" @click="saveCanvas">保存</el-button>
<el-button type="success" @click="publishMap" v-if="currentMap?.status === 'draft'">发布</el-button> <el-button type="success" @click="publishMap" v-if="currentMap?.status === 'draft'">发布</el-button>
<el-button @click="showVersions = true; loadVersions()">版本历史</el-button> <el-button @click="showVersions = true; loadVersions()">版本历史</el-button>
@@ -1071,4 +1075,10 @@ onUnmounted(() => {
.mc-icon-btn.active { border-color:#409eff; background:#ecf5ff; } .mc-icon-btn.active { border-color:#409eff; background:#ecf5ff; }
.mc-radio-label { display:inline-flex; align-items:center; gap:4px; margin-right:16px; font-size:13px; color:#666; cursor:pointer; } .mc-radio-label { display:inline-flex; align-items:center; gap:4px; margin-right:16px; font-size:13px; color:#666; cursor:pointer; }
.mc-radio-label input { margin:0; } .mc-radio-label input { margin:0; }
.view-toggle { display:inline-flex; align-items:center; gap:0; margin-right:8px; border:1px solid #dcdfe6; border-radius:4px; overflow:hidden; }
.vt-label { padding:5px 12px; font-size:12px; cursor:pointer; color:#606266; background:#fff; transition:all .15s; display:inline-flex; align-items:center; gap:4px; }
.vt-label input { display:none; }
.vt-label.active { background:#409eff; color:#fff; border-color:#409eff; }
.vt-label:not(:last-child) { border-right:1px solid #dcdfe6; }
.vt-label:hover:not(.active) { color:#409eff; }
</style> </style>