Wednesday, April 24, 2024
HomeCSSjavascript - VueJS Set off motion when Enter File is not proven

javascript – VueJS Set off motion when Enter File is not proven


I am making an attempt to alter the type of a div when a enter file is clicked and alter it once more when the window to pick out a file is dismissed.

I can change the type for the primary time when enter is clicked, however I do not know how you can change it once more after I’m out of the file choose window.

This is the code I’ve written to date:

<enter kind="file" type="show:none" ref="fileInput" v-on:click on="changeStyle=true" v-on:change="previewFile">
    <div class="input-file-container" v-bind:type="[changeStyle ? activeBorderStyle : '']" @click on="$refs.fileInput.click on()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
             stroke="currentColor" class="w-6 h-6 attach-file">
            <path stroke-linecap="spherical" stroke-linejoin="spherical"
                  d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"/>
        </svg>
        <p type="font-style: italic" readonly >{{imgElegida}}</p>
    </div>

Preliminary state:

enter image description here

I click on the div then i modify the div border shade:

enter image description here

I shut the choose file window after which I do not know what occasion ought to I hear to alter once more the type:

enter image description here

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments