将动画添加到 v-text-field 中的 append-icon答案

【问题标题】：Add animation to append-icon in v-text-field将动画添加到 v-text-field 中的 append-icon
【发布时间】：2021-03-11 15:42:54
【问题描述】：

注册新帐户后，我会在屏幕上显示登录名和密码详细信息。用户可以将登录和密码详细信息复制到剪贴板，我想在单击附加图标（放大、增加字体或替换为另一个图标）时运行动画。这样做的正确方法是什么？

<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>

【问题讨论】：

你想到了什么动画？
它可以是任何东西：1）放大或增加字体大小，2）或只是用另一个图标替换，例如'mdi-检查'

标签： vue.js vuetify.js

【解决方案1】：

对此有多种答案，但要回答其中之一：“替换图标”将非常简单。

您必须将 append-icon 属性更改为动态 :，然后为其分配一个变量，例如 copyIcon。然后，您将根据副本的状态更新此变量。

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

【讨论】：

【解决方案2】：

mdi 有动画助手，比如 append-icon="mdi-content-copy mdi-spin" 例如。

【讨论】：