Блог

В приведенном ниже шаблоне input исчезает, когда fullName есть true , но я хочу удалить только всплывающую подсказку. Где я должен это исправить?

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

Использование display: none для оформления вашей всплывающей подсказки приведет к тому, что слот всплывающей подсказки по умолчанию (ввод) также будет скрыт, но вам не нужно прибегать к привязкам стиля здесь.

<a-tooltip> имеет v-model значение, которое можно установить false , чтобы скрыть всплывающую подсказку. Например, вы можете использовать реквизит данных (например, named 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>
  

ДЕМОНСТРАЦИЯ