programing

V-툴팁:메서드에서 팝업 닫기

prostudy 2022. 4. 20. 21:48
반응형

V-툴팁:메서드에서 팝업 닫기

VueJS에서는 팝오버에 v-backtip(https://github.com/Akryum/v-tooltip)을 사용하고 있다.

팝업을 닫기 위해, 그들은 "라고 불리는 지시어를 제공한다.'v-close-popover'팝업 창을 닫기 위해 팝업 버튼/링크에 할당할 수 있다.이거 잘 된다.

그러나 나는 이 팝업을 Vue 메소드에서 닫아야 하는 요구사항이 있다.하지만 나는 그 방법에서 어떻게 포포오버의 닫기를 유발하는지 알지 못한다.

이것이 네가 이것을 성취할 수 있는 방법이다.마우스 오버 이벤트에 툴팁을 표시하고, 마우스 이탈 이벤트에 툴팁을 표시한다.template->에서

  <i
      id="requiredIcon"
      aria-hidden="true"
      v-tooltip="{content: 'Required option is not available for this question.', show: isOpen, trigger: 'manual'}"
      @mouseover="showTooltip"
      @mouseleave="removeTooltip"
    ></i>

인스크립트->>

   data() {
        return {
          isOpen: false,
        };
      },
methods:{
    showTooltip() {
            this.isOpen = true;
        },
     removeTooltip() {
          this.isOpen = false;
        }
}

참조URL: https://stackoverflow.com/questions/54624872/v-tooltip-close-popover-from-a-method

반응형