我可以在打印HTML頁面時使用范圍CSS嗎？ （使用Laravel和Vue.js）

Question

我應該將scoped CSS放在我的主文件中，還是應該更改print函數以容納組件的scoped CSS？ 在第二種情況下，我應該如何更改JS功能？

我使用Laravel 5和許多Vue組件。 在其中一個中，我有以下范圍的CSS

<style scoped>
    td.not-purchased{
        background-color: darkgrey;
    }
    td.not-assigned-here{
        background-color: lightgreen;
    }
    td .checkbox{
        margin-top: 0;
        margin-bottom: 0;
        display: inline-block;
    }

    table th:nth-child(n+3),
    table td:nth-child(n+3){
        width: 50px;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
</style>

打印生成的內容時，該功能在新頁面中打開內容，並將外部CSS復制到原始文檔的HEAD中。

$(document).on('click', '.glyphicon[data-printselector]', function(){
        if($(this).data('printselector') != ''){
            // Print in new window
            let printHtml = $($(this).data('printselector')).clone(),
                printWindow = window.open(),
                waitTimeout;

            $(printWindow.document.body).append($('<div />', {class: 'container'}).append(printHtml));


            $.each($('link'), function() {
                $(printWindow.document.head).append($(this).clone());

                clearTimeout(waitTimeout);
                waitTimeout = setTimeout(function(){
                    // Here we ensure that CSS is loaded properly
                    printWindow.print();
                    printWindow.close();
                }, window.changeFunctionTimeoutLong);
            });

        }
        else
            window.print();
    });

我知道這可以通過將scoped CSS直接放入我的網站的主CSS中來完成，但我相信這與使用范圍CSS的整個觀點相悖。

Answer 1

默認情況下Vue的工作方式，您的作用域CSS將按以下方式轉換：

• CSS中的CSS選擇器會獲得一個額外的屬性選擇器，CSS本身會在<style>標記內嵌到頁面中
• 與CSS中的選擇器匹配的HTML元素將被賦予相應的唯一屬性

這樣，CSS規則的范圍限定為與唯一屬性匹配的特定HTML元素。

如果您希望您的范圍樣式在與原始頁面不同的上下文中工作，那么您需要做兩件事來確保工作：

• HTML元素具有必要的屬性
• 存在具有這些屬性的CSS的<style>標記

根據你的描述，聽起來后者至少是缺失的。 嘗試這一點的一個簡單方法是在復制外部CSS時復制頁面中的所有<style>標記，看看是否有效。

然后你可以確定這對你來說是否足夠好，或者你是否真的希望看到只是抓住你需要的樣式（如果你有很多樣式）。