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