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

Question

比如

// HTML<div class="block" style="{width: bwidth + 'px'}"></div>// scriptprops: ['bwidth']// styleblock: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%; }