0

我在我的 vuejs 项目中使用 ant-design-vue 库来显示一个左侧带有下拉菜单的输入字段。

我想从https://www.antdv.com/components/input/创建一个像这样的输入组

在此处输入图像描述

我从字面上将这个输入组示例的代码复制到了我的 Vuejs 组件中......

<a-input-group compact>
  <a-select default-value="Option1">
    <a-select-option value="Option1">
      Option1
    </a-select-option>
    <a-select-option value="Option2">
      Option2
    </a-select-option>
  </a-select>
  <a-input style="width: 50%" default-value="input content" />
</a-input-group>

在我的应用程序中，输入组改为这样显示... 在此处输入图像描述 注意文本输入字段是如何改为药丸形的。为什么是这样？

我注意到，如果我在 global.scss 文件中注释掉以下所有行...

// @import 'components/kit/vendors/antd/style';
// @import 'components/kit/vendors/bootstrap/style';
// @import 'components/kit/vendors/nprogress/style';
// @import 'components/kit/vendors/chartist/style';
// @import 'components/kit/vendors/chartist-tooltip-plugin/style';
// @import 'components/kit/vendors/perfect-scrollbar/style';
// @import 'components/kit/vendors/quill/style';

// @import 'components/kit/core/style'; // Clean UI KIT styles
// @import 'components/cleanui/styles/style'; // Clean UI styles

然后选项下拉菜单和输入字段根据需要通过垂直分隔线连接。

我想知道为什么所有这些样式文件都会干扰 ant design 输入组的显示。我特别惊讶 antd 样式文件会干扰，因为它也是 ant 设计库的一部分。

4

0 回答 0