[vue: worklist 제작] 2-3-1. 마우스오버시 미리보기 제공

<div v-else-if="title == 'worklist-path'">
  ...
    <a v-else
      :href="`${commonURL}${iaValList['worklist-path']}`" 
      target="_blank" 
      @mouseenter="previewLink(`${commonURL}${iaValList['worklist-path']}`, $event)" 
      @mouseleave="previewReset($event)">{{iaVal}}</a>
  ...
</div>

 

:href="`${commonURL}${iaValList['worklist-path']}`"

target="_blank"

클릭하면 공통 URL + worklist-path의 설정한 경로를 새창으로 이동

 

 

@mouseenter="previewLink(`${commonURL}${iaValList['worklist-path']}`, $event)"

previewLink : function (link,event){

  const el = event.target

  const iframe = document.createElement('iframe')

  iframe.src=`${link}.html`;

  iframe.width=1240;

  iframe.height=1500;

  iframe.setAttribute('class','sitemapIframe');

  el.appendChild(iframe);

},

마우스오버시 ifream의 src에 링크경로를 띄움

class는 sitemapIfream

style에서 position, 크기 적용

 

 

 

@mouseleave="previewReset($event)">{{iaVal}}</a>

previewReset : function(event){

  let el = event.target;

  el.querySelector('.sitemapIframe').remove();

},

a링크에서 마우스를 땠을경우 iframe인 .sitemapIfram를 삭제