CSS 使用 Vue-Split-Panel 和 select 边框的 Vuetify 响应问题

Question

我在使用 Vuetify 时遇到了各种 CSS 问题，我希望有人可以帮助我解决这些问题。我在 Vuetify 中使用了拆分面板视图 (vue-split-panel)，但 Vuetify 似乎无法始终如一地识别何时触发全列宽度，如下所示。我可以通过打开然后关闭 Chrome js 控制台来 "trigger" 完整的列宽（对于相同的拆分面板宽度）。我将它放入一个代码箱中，以便它可以重现。这样做时，我发现了一个新问题，即单选按钮未显示。

https://codesandbox.io/s/split-view-test-7mlx1

如果您能告诉我如何调整沙箱以使响应正常工作，我将不胜感激！

应该是一个单选按钮：

此外，我无法在 codesandbox 中重现但我在我的应用程序（它是 JupyterLab 扩展）中遇到的问题显示在底部屏幕截图中：select 标签有边框线经历它。我试图找出某个地方是否存在 CSS 冲突，但不知道具体去哪里找。

此外，我还有一个问题，即 select 菜单与左侧菜单成比例偏移，出于某种原因...为什么打开左侧和顶部菜单会影响位置？我该如何解决？我试过使用 "attach" 属性并向元素本身添加一个 id，或者创建一个父元素 div，但似乎都无法解决问题。通过使拆分面板变宽并单击 multi-select，然后使其变窄并再次单击，这在沙箱中可以稍微重现。您会看到菜单在打开时发生了偏移。

不涉及 iFrame 的解决方案将是首选，是的，我确实用 <v-app> 包装了我的应用程序，但是由于它是 JupyterLab 扩展，我只能访问主选项卡 space（不是左侧或顶部菜单）因此 v-app 环绕在 HTML 元素周围，这是主选项卡区域，而不是全屏。

我认为 Vuetify 代码中围绕此函数的某处可能存在错误：https://github.com/vuetifyjs/vuetify/blob/054555a42e2ef368df2d6e168d1eec7fc06fb12c/packages/vuetify/src/components/VSelect/VSelect.ts#L456

Answer 1

我已经解决了所有 CSS 问题

通过在 UI 中添加适当的组件和细分来重构网格布局。添加了对单选按钮的修复。添加了 css 依赖项，material 图标依赖项，vuetify 内部使用的字体

在此处检查工作代码笔：https://codesandbox.io/s/split-view-test-47f2h

<template>
  <div id="app">
    <v-app>
      <Split style="height: 500px;">
        <SplitArea :size="25">panel left</SplitArea>
        <SplitArea :size="75">
          <v-container fluid grid-list-md>
             <v-layout row wrap>
              <v-flex class="d-flex" xs="12" sm="12" md="6" lg="4">
                <v-text-field
                  v-model="params.c.selected"
                  label="C"
                  hint="Penalty parameter C of the error term."
                  persistent-hint
                  return-object
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-select
                  v-model="params.kernel.selected"
                  hint="Specifies the kernel type to be used in the algorithm. It must be one of ‘linear’, ‘poly’, ‘rbf’, ‘sigmoid’, ‘precomputed’ or a callable. If none is given, ‘rbf’ will be used. If a callable is given it is used to pre-compute the kernel matrix from data matrices; that matrix should be an array of shape (n_samples, n_samples)."
                  :items="params.kernel.items"
                  label="Kernel"
                  persistent-hint
                  return-object
                  outlined
                ></v-select>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-text-field
                  v-model="params.degree.selected"
                  label="Degree"
                  hint="Degree of the polynomial kernel function ('poly'). Ignored by all other kernels."
                  persistent-hint
                  return-object
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-text-field
                  v-model="params.coef0.selected"
                  label="Coef0"
                  hint="Independent term in kernel function. It is only significant in 'poly' and 'sigmoid'."
                  persistent-hint
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-radio-group
                  v-model="params.probability.selected"
                  hint="Independent term in kernel function. It is only significant in 'poly' and 'sigmoid'."
                  persistent-hint
                >
                  <template v-slot:label>
                    <div style="font-size: 12px">
                      Probability:
                      boolean, optional (default=False)
                    </div>
                    <br>
                  </template>
                  <v-radio label="True" :value="true" color="black"></v-radio>
                  <v-radio label="False" :value="false" color="black"></v-radio>
                </v-radio-group>
              </v-flex>
            </v-layout>
          </v-container>
        </SplitArea>
      </Split>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      params: {
        c: { default: 1, selected: 1 },
        kernel: {
          default: "rbf",
          selected: "rbf",
          items: ["linear", "poly", "rbf", "sigmoid", "precomputed"]
        },
        degree: { default: 3, selected: 3 },
        coef0: { defaul: 0.0, selected: 0.0 },
        probability: { default: true, selected: true }
      }
    };
  }
};
</script>

<style>
</style>

CSS 使用 Vue-Split-Panel 和 select 边框的 Vuetify 响应问题

CSS issues with Vuetify for responsivity using Vue-Split-Panel and select border

splitpanel

responsive-design

vue.js

vuetify.js