vue-treeselect组件改变下拉框箭头方向

Question

在使用vue-treeselect这个组件的时候遇到的问题，文档中下拉选项的箭头方向都是正常的，但是我引入到项目中之后发现箭头变成向上的真是奇怪，如下图所示，正常来说应该是展开的是向下的，收缩的是向右的，但是我的这个变成展开向右，收缩向上，被向右旋转了90度，上网搜索到的几个办法都用过但是并没有效果，请教一下各位

.vue-treeselect__control {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

.vue-treeselect__control::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #333; /* 改变这里的颜色和尺寸来改变箭头的颜色和大小 */
}

.vue-treeselect__control--arrow-expanded .vue-treeselect__control::before,
.vue-treeselect__control--arrow-collapsed .vue-treeselect__control::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg); /* 改变这里的旋转角度来改变箭头方向 */
  border: solid #333; /* 改变这里的颜色来改变箭头的颜色 */
  border-width: 3px 0 0 3px;
  height: 0;
  width: 0;
}

这个无效

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

你好！看起来你在使用 vue-treeselect 组件时遇到了一个关于下拉箭头方向的问题。这个问题可能是由于 CSS 样式没有正确应用到组件上，或者是组件的内部样式覆盖了你的自定义样式。

首先，你提供的 CSS 代码看起来是正确的，但是有几点需要注意：

1. 确保你的 CSS 选择器具有足够的特异性，以确保它们不会被其他样式覆盖。
2. 检查是否有其他 CSS 规则可能覆盖了你的样式，特别是那些可能包含 !important 的规则。
3. 确保你的 CSS 文件被正确加载，并且没有被其他文件阻塞或覆盖。

此外，你可以尝试以下方法来解决这个问题：

• 检查组件的版本：确保你使用的 vue-treeselect 组件版本没有已知的与样式相关的问题。
• 使用开发者工具：使用浏览器的开发者工具（如 Chrome DevTools）来检查和调试你的 CSS 规则。这可以帮助你看到哪些样式被应用，哪些被覆盖。
• 检查父元素的影响：有时候，父元素的样式也会影响到子元素，确保没有父元素的样式影响到下拉箭头的显示。
• 使用更具体的选择器：尝试使用更具体的 CSS 选择器，例如基于类名或 ID 的选择器，来确保你的样式规则不会被其他规则覆盖。

如果你已经尝试了上述方法，但问题仍然存在，你可以考虑在 vue-treeselect 的 GitHub 仓库中查找相关的 issue 或者提交一个新的 issue，看看社区是否有解决方案或者官方是否有计划修复这个问题。

至于参考链接，你可以查看 vue-treeselect 的官方文档和GitHub 仓库，以获取更多信息和可能的解决方案。

希望这些信息对你有所帮助！如果还有其他问题或者需要进一步的帮助，请随时告诉我。