CODEWITHSUNDEEP
javascriptvue.jsprinting
Courtney Erickson
Courtney Erickson

Reputation: 67

Vuejs Show Element if Window.print?

I'm just curious if this is possible to do. I have a button on my page that shows 'Pay Now' that I don't display when a user goes to print the page. I want to display a line of text that shows 'Visit www.example.com to pay now' ONLY if the user clicks the print button, and disappears when the user clicks out of the print preview. Is that something I can do?

Upvotes: 1

Views: 1323

Answers (1)

Rowan
Rowan

Reputation: 199

You don't need vue for this. You can add the following CSS

.print-only {
    display: none;
}
@media print {
    .no-print {
        display: none;
    }
    .print-only {
        display: block;
    }
}

Using your example

<a href="www.example.com" class="print-only">Visit www.example.com to pay now</a>

Upvotes: 2

Related Questions