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

Question

我向我的按钮（一个 CSS 三角形）添加了一个样式绑定，它应该根据屏幕大小更改边框宽度，但 styles 未应用于元素或以某种方式不可见。

（ .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属性正常工作，但未应用样式。 只有当我 hover 在它上面时，三角形才应该可见，但现在它不可见。

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

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'
}