feat(device): 新增开发者模式指令及下拉菜单样式优化
新增推送开发者模式指令到设备的 API。 优化设备页面表格工具栏更多按钮的下拉菜单: - 点击触发并支持点击菜单项后自动隐藏 - 移除触发按钮 hover 时的背景色 - 调整下拉菜单项的布局、间距与圆角样式
This commit is contained in:
@@ -160,11 +160,17 @@
|
||||
<template v-else-if="col.templet === 'tool'">
|
||||
<div class="flex items-center justify-center gap-x-2">
|
||||
<template v-for="(btn, index) in tableToolbarBtn" :key="index">
|
||||
<el-dropdown v-if="btn.children !== undefined && btn.children.length > 0">
|
||||
<el-dropdown
|
||||
v-if="btn.children !== undefined && btn.children.length > 0"
|
||||
trigger="click"
|
||||
:hide-on-click="true"
|
||||
popper-class="more-dropdown-menu"
|
||||
>
|
||||
<el-button
|
||||
v-if="btn.render === undefined || btn.render(scope.row)"
|
||||
v-hasPerm="btn.perm ?? '*:*:*'"
|
||||
v-bind="btn.attrs"
|
||||
class="more-trigger-btn"
|
||||
>
|
||||
{{ btn.text }}
|
||||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
@@ -976,4 +982,40 @@ defineExpose({ fetchPageData, exportPageData, getFilterParams, getSelectionData,
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 更多按钮:去掉 link 类型 hover 时的浅蓝背景层 */
|
||||
.more-trigger-btn {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 非 scoped:下拉菜单通过 teleport 渲染到 body,需用全局样式覆盖 -->
|
||||
<style lang="scss">
|
||||
.more-dropdown-menu {
|
||||
.el-dropdown-menu {
|
||||
gap: 2px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
line-height: 1.4;
|
||||
border-radius: 6px;
|
||||
|
||||
& + .el-dropdown-menu__item {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user