javascript - Nuxtjs：仅当表单输入有效时如何消失工具提示

Question

在下面的模板中，isinput时消失，但我只想删除工具提示。我应该在哪里修复它？fullNametrue

<a-tooltip placement="topRight" trigger="focus" :style="
        fullName === true
          ? { display: 'none' }
          : ''
      ">
    <template slot="title">
      <span>Please fill in your Fullname</span>
    </template>
    <a-input
      @input="checkFullname"
      :placeholder="$t('contact.placeholder.fullName')"
      v-model="dropMessage.full_name"
      :style="
        fullName === false
          ? { backgroundColor: 'rgba(211,47,47,.025)' }
          : ''
      "
    />
</a-tooltip>

Answer 1

使用display: none样式设置工具提示会导致工具提示的默认插槽（输入）也被隐藏，但您不必在此处使用样式绑定。

<a-tooltip>有一个v-model可以设置false为隐藏工具提示的。例如，您可以使用数据道具（例如，命名tooltipVisible）作为v-model绑定，并根据用户输入设置它checkFullname()：

<template>
  <a-tooltip title="Enter John Doe" v-model="tooltipVisible">
    <a-input @input="checkFullname" v-model="dropMessage.full_name" />
  </a-tooltip>
</template>

<script>
export default {
  data() {
    return {
      tooltipVisible: false,
    }
  },
  methods: {
    checkFullname() {
      this.tooltipVisible = this.dropMessage.full_name !== 'John Doe'
    },
  },
}
</script>

演示