css三角形上的响应式vue样式绑定不起作用

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

我忘记了样式绑定中的 triangle_width 后面的 px：

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