Question

我在按钮（一个CSS三角形）上添加了样式绑定，该样式绑定应根据屏幕尺寸更改边框宽度，但是样式不会应用于元素或以某种方式不可见。

（.triangle以外的其他类来自TailwindCSS，但它们应该是不言自明的）

HTML：

<button
    class="triangle absolute bottom-0 z-30"
    :style="{
        borderLeft: triangle_width + ' solid transparent',
        borderRight: triangle_width + ' solid transparent',
        borderBottom: triangle_width + ' solid transparent'
    }"
    @click="action"
    @mouseover="toggle"
    @mouseleave="toggle"
/>

CSS：

.triangle:hover {
  border-color: transparent transparent white transparent;
}

.triangle {
  transition-property: border-color;
  transition-duration: 200ms;
  width: 0;
  height: 0;
  margin-bottom: 3px;
}

triangle_width属性可以正常工作，但是未应用样式。只有当我将鼠标悬停在三角形上时，该三角形才应该可见，但是现在它不可见。

感谢您提供有关如何解决此问题的建议。如果需要更多信息，请随时询问。

Answer 1

我在样式绑定中的三角形宽度之后忘记了px：

{
        borderLeft: this.triangle_width + 'px solid transparent',
        borderRight: this.triangle_width + 'px solid transparent',
        borderBottom: this.triangle_width + 'px solid transparent'
}

在CSS三角形上响应式Vue样式绑定不起作用

1 个答案: