如何在vuetify-form-base中为图标添加工具提示
<template>
<v-container fluid>
<h4>Textfields and Fileselector with Mask and Tooltips</h4>
<v-form>
<v-form-base
:value="myValue"
:schema="mySchema"
@input="log"
/>
</v-form>
<infoline
:value="myValue"
:schema="mySchema"
:path="$options._componentTag"
/>
</v-container>
</template>
<script>
import VFormBase from '@/components/vFormBase'
import Infoline from '@/components/infoline'
import log from '@/lib'
const mask = '####-####-####-####'
const accept = 'image/*'
export default {
name: 'Textfields',
components: { VFormBase, Infoline },
data () {
return {
myValue: {
name: 'Base',
creditcard: '12345678',
password: 'abcdefgh',
file: [] // array of File objects
},
mySchema: {
name: 'text',
password: {
type: 'password',
clearable: true,
flex: 12
},
creditcard: {
type: 'text',
label: 'Creditcard',
prependInnerIcon: 'credit_card',
hint: mask,
mask,
tooltip: 'Creditcard',
flex: 12
},
file: {
type: 'file',
label: 'Files',
accept,
multiple: true,
tooltip: { color: 'green', label: 'File Selection', top: true },
flex: 12
}
}
}
},
methods: {
log
}
}
</script>
从上述代码中,工具提示通过使用 tooltip:'Creditcard'应用于整个文本字段,但我只希望工具提示用于图标。现在,工具提示将应用于整个文本字段的悬停,但仅在图标悬停时显示。
参考:1。 https://github.com/wotamann/vuetify-form-base 2. https://wotamann.github.io/