CODEWITHSUNDEEP
vue.jsvuetify.js
Kogelet
Kogelet

Reputation: 514

Add animation to append-icon in v-text-field

When a new account is registered, I display login and password details on the screen. The user can copy login&passwod details to clipboard and I would like to run animation when the append-icon (scale up, increase font or replace with another icon) is clicked. What would be the right way to do that?

<template>
  <v-card class="col-12 col-md-8 col-lg-6 p-6 px-16" elevation="4">
    <div class="title h2 mb-10 text-uppercase text-center">
      Success
      <v-icon color="green" x-large>
        mdi-check-circle
      </v-icon>
    </div>

    <v-text-field
      :value="newAccount.login"
      label="Login"
      outlined
      readonly
      append-icon="mdi-content-copy"
      ref='login'
      @click:append="copy('login')"
    ></v-text-field>

     <v-text-field
      :value="newAccount.password"
      label="Password"
      outlined
      readonly
      append-icon="mdi-content-copy"
      ref='login'
      @click:append="copy('login')"
    ></v-text-field>

  </v-card>
</template>

<script>
  methods: {
    copy(field) {
      const input = this.$refs[field].$refs.input
      input.select()
      document.execCommand('copy')
      input.setSelectionRange(0,0) 
      // apply append-icon animation
    }
  }
</script>

Upvotes: 1

Views: 4152

Answers (2)

xonauga
xonauga

Reputation: 56

mdi has animation helpers like append-icon="mdi-content-copy mdi-spin" For example.

Upvotes: 2

S&#248;lve
S&#248;lve

Reputation: 4396

There is multiple answers to this, but to answer one of them: "replacing icon" would be pretty straight forward.

You would have to change the append-icon prop do be dynamic :, then assign a variable to it like copyIcon. You will then update this variable depending on the state of the copy.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    copyIcon: 'mdi-content-copy',
    newAccount: {
      login: 'GhostDestroyer69',
      password: '',
    },
  },
  methods: {
    copy(field) {
      const input = this.$refs[field].$refs.input
      input.select()
      document.execCommand('copy')
      input.setSelectionRange(0, 0)
      
      // Set icon to check
      this.copyIcon = 'mdi-check'
      
      // Reset icon to copy after 1 second
      setTimeout(() => {
        this.copyIcon = 'mdi-content-copy'
      }, 1000)
    }
  }
})
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-card class="col-12 col-md-8 col-lg-6 p-6 px-16" elevation="4">
    <v-text-field
      :value="newAccount.login"
      label="Login"
      outlined
      readonly
      :append-icon="copyIcon"
      ref='login'
      @click:append="copy('login')"
    ></v-text-field>
  </v-card>
</div>

Upvotes: 2

Related Questions