[vue: worklist 제작] 2-3. 작업물 경로 링크

 

worklist-path일 경우

작업물의 폴더와 파일경로를 a링크로 보여주고 마우스오버시 미리보기 레이어가 노출된다

https://shubamba.tistory.com/106?category=582020

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

 

 

링크수정 버튼 클릭시 a링크가 가려지고 input text가 보여지면서 링크 경로를 수정할수 있다.

input에 focus가 사라지면 수정된 링크가 업데이트되며 input이 가려지고 수정된 a링크가 보여진다. 

https://shubamba.tistory.com/107?category=582020

[vue: worklist 제작] 2-3-2. 경로 수정버튼

 

 

링크경로에 공통경로를 따로 header의 input영역에서 수정할수 있다.

 

 

<template>
  ...
  <tr v-for="(iaValList) in iaGroup" 
    :class="`status__badge status__badge--${iaValList['worklist-status']}`"
    v-show="iaValList['worklist-status'] == this.sort || this.sort=='total'">
    <td 
      v-for="(iaVal, title) in iaValList" 
      :class="`col__${title.replace(/\s/g, '-')}`"
    >
      <div v-if="title == 'worklist-status'"> ... </div>
      <div v-else-if="title == 'worklist-path'">
        <!-- '링크수정'버튼 클릭시 input-a toggle -->
        <input type="text" 
          v-if="iaValList['mode']=='modi'" 
          :value="iaVal"
          @blur="updatePath(iaValList, $event.target)">
        <a v-else
          :href="`${commonURL}${iaValList['worklist-path']}`" 
          target="_blank" 
          @mouseenter="previewLink(`${commonURL}${iaValList['worklist-path']}`, $event)" 
          @mouseleave="previewReset($event)">{{iaVal}}</a>
        <button type="button" 
          v-if="iaValList['mode']!='modi'" 
          @click="pathModi(iaValList)"
          >링크수정</button>
      </div>
  ...
</template>

 

 

script

<script>
export default {
  ...
  methods: {
    sendNewIA : function(data){
      this.$store.dispatch('modiIA', data)
    },
    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);
    },
    previewReset : function(event){
      let el = event.target;
      el.querySelector('.sitemapIframe').remove();
    },
    updatePath: function(data,target){
      data['mode'] = '';
      let row = data;
      row['worklist-path'] = target.value;
      this.sendNewIA(row);
    },
    pathModi : function(row){
      row['mode'] = 'modi';
    },
  }
}
</script>

 

style

<style lang="scss">
  .col__worklist-path {
      position: relative;
      a {
          color: darken($pointColor, 20%);
          text-decoration: none;
          text-underline-position: under;
          &:hover {
              color: darken($color:$pointColor, $amount:0);
              text-decoration: underline;
          }
      }
  }
  .sitemapIframe{
      position: absolute;
      top:-300px - 1px;
      left:calc(50% - 124px);
      z-index: 1;
      transform:scale(0.2);transform-origin: left top;
      background-color: #fff;
      box-shadow: 0 0 30px rgba(0,0,0,.2);
  }
</style>