Question

我想用vue的样式绑定创建工具提示。我想使用CSS中的attr()函数，它接受属性值，它是一个被动对象dynamicColor。我现在的代码是：

<div class="test">
    <span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
       smallText
    </span>
</div>

<style>
div.test span.marker {
  position: absolute;
  width: 28px;
  height: 15px;
  border-radius: 2px;
  display: block;
  top: -25px;
  font-size: 10px;
  text-align: center;
}

div.test span.marker::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: attr(color) transparent transparent transparent;
}
</style>

但它不起作用。由于某些原因，我不想使用bootstrap。我试着看看我是否可以在vue样式绑定中找到伪选择器，但找不到多少。关于如何实现这一点的任何想法？谢谢。

Answer 1

正如@ Stephan-v在评论中所建议的，我为箭头添加了单独的元素。最终代码如下所示：

<div class="test">
    <span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
    <span class="marker" :style="{'background': dynamicColor}">
       smallText
    </span>
</div>

<style>
div.test span.marker {
  position: absolute;
  width: 28px;
  height: 15px;
  border-radius: 2px;
  display: block;
  top: -25px;
  font-size: 10px;
  text-align: center;
}

div.test span.markertip {
    content: "";
    position: absolute;
    top: -45%;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
}
</style>

带有vue风格绑定的箭头的工具提示

1 个答案: