在做个vue的UI组件，遇到动态写入样式问题

Question

比如

// HTML
<div class="block" style="{width: bwidth + 'px'}"></div>


// script
props: ['bwidth']

// style
block:before{
    content: '';
    width: bwidth - 2 // 这块代码如何动态写入 在vue里
}

block的宽度是父级传入的，其伪元素before的宽度需要在其基础上-2。

vue里是怎么实现代码

Answer 1

可以用绝对定位，相对于父元素定位，然后用calc(100% - 2px)来实现，位置自己调整一下。

block {
    position: relative;
}

block::before{
    position: absolute;
    content: '';
    width: calc(100% - 2px);
    height: 100%;
}