fix: 视角切换el-radio-group换原生radio(同根因)
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user