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%;
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb34ed-2446.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb34ed-2446.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?