When making a UI component of vue, I encountered the problem of dynamic writing style.

such as

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


// script
props: ["bwidth"]

// style
block:before{
    content: "";
    width: bwidth - 2 //  vue
}
The width of

block is passed in by the parent, and the width of its pseudo element before needs to be-2 based on it.

how to implement the code in vue

Apr.14,2022

can be positioned absolute, relative to the parent element, and then calc (100%-2px) , with the position adjusted by itself.

block {
    position: relative;
}

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