如何在vuetify-form-b​​ase中为添加或添加的图标添加工具提示?

时间:2020-02-27 16:59:27

标签: javascript vue.js vuetify.js

如何在vuetify-form-b​​ase中为图标添加工具提示

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

0 个答案:

没有答案