原来那行 :dropdown-style 是无效的 —— NSelect 没有这个 prop(只有 menu-props),写了会当普通属性掉到根节点上。真正卡高度的是 naive-ui InternalSelectMenu 主题里的 height: calc(var(--n-option-height) * 7.6), 作用在菜单内部的 .n-scrollbar 上。8 条排序项 280px 超出 258.4px 半条, 逼出一根只能滚 22px 的滚动条。 改走 theme-overrides,按选项条数算高度,以后加减排序项自动跟着走。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Sy3L9zJHiSNFyNC3ZbMwdj
This commit is contained in:
@@ -47,6 +47,19 @@ const sortOptions = [
|
||||
{ label: "语法检查", value: "ast" },
|
||||
]
|
||||
|
||||
// naive-ui 下拉菜单默认只给 7.6 个选项的高度(InternalSelectMenu 主题里的
|
||||
// height: calc(var(--n-option-height) * 7.6)),8 条排序正好多出半条,逼出一根
|
||||
// 只能滚两像素的滚动条。按实际条数放开,+8px 是菜单自己的上下内边距。
|
||||
// 注意:NSelect 没有 dropdown-style 这个 prop,写了会当普通属性掉到根节点上
|
||||
// 不起作用;控制高度只能走 peers.InternalSelectMenu。
|
||||
const sortMenuTheme = {
|
||||
peers: {
|
||||
InternalSelectMenu: {
|
||||
height: `calc(var(--n-option-height) * ${sortOptions.length} + 8px)`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const userStore = useUserStore()
|
||||
@@ -250,7 +263,7 @@ function rowProps(row: ProblemFiltered) {
|
||||
style="width: 120px"
|
||||
v-model:value="query.sort"
|
||||
:options="sortOptions"
|
||||
:dropdown-style="{ maxHeight: 'unset' }"
|
||||
:theme-overrides="sortMenuTheme"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
|
||||
Reference in New Issue
Block a user