2

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

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

如果您能够向我展示如何调整沙箱以使响应性工作，我将不胜感激！

在此处输入图像描述 在此处输入图像描述

应该是一个单选按钮： 在此处输入图像描述

此外，底部屏幕截图中显示了我无法在代码框中重现但我在我的应用程序中遇到的问题（它是 JupyterLab 扩展）：选择标签的边框线穿过它。我试图查找某处是否存在 CSS 冲突，但不知道具体在哪里查找。 在此处输入图像描述

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

不涉及 iFrames 的解决方案将是首选，是的，我的应用程序确实用<v-app>.围绕作为主选项卡区域的 HTML 元素，而不是全屏。

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

4

1 回答 1

0

我已经解决了所有的 CSS 问题

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

在此处检查工作代码笔：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>
于 2019-10-18T21:18:04.920 回答