vue.js - 将动画添加到 v-text-field 中的 append-icon
问题描述
注册新帐户后,我会在屏幕上显示登录名和密码详细信息。用户可以将登录和密码详细信息复制到剪贴板,我想在单击附加图标(放大、增加字体或替换为另一个图标)时运行动画。这样做的正确方法是什么?
<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>
解决方案
对此有多种答案,但要回答其中之一:“替换图标”将非常简单。
您必须将 append-icon 属性更改为 dynamic :
,然后为其分配一个变量,例如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>
推荐阅读
- mysql - 使用 SELECT - JOIN 从同一个表中获取两个值
- wagtail - 如何在 Wagtail 默认管理页面中添加列表过滤器和搜索字段
- c# - CSharp 无法从 datagridview 检索正确的数据
- sql - 如何使用周数和年份查找上一行
- cmake - 柯南 CMake 和 Embarcadero 集成
- node.js - React Native npm start 卡在 Starting Packager
- php - Gestion包ftp
- python - 如何在python中的两个特殊字符之间查找数据的多个实例
- python - Print/Write to csv only if selected variable =
- css - 使用媒体查询在窗口调整大小时在语义 ui 中更改或添加类名