JQ 與 Vue 結合

範例結果

三、利用JQ加入背景圖片

S1:利用JQ,在Vue 的 mounted之下,加入背景圖片

    new Vue({
      el: '#app',
      data: { lists: travels },
      mounted() {
        // S1:#app>div 利用JQ顯示背景圖片
        $('#app>div').each(function () {
          // $(this).append('<p>abc123</p>');
          var $file = $(this).data('file');
          console.log($file);
          $(this).css({ 'background': 'url(./images/' + $file + '.jpg) center center','background-size': 'cover' })
        });
      }// mounted end
    });
    console.log(travels);

S2:CSS美化

(1) 將【#app>div】圖片重疊排列

#app{
  width: 100%; height:500px;

  position: relative;

  &>div{
    width: 100%; height: 100%;

    position: absolute; top: 0; left: 0;
    opacity: 0;

    &:nth-of-type(1){
      opacity: 1;
    }
  } //div end
} // #app end

(2) 將【#app>title】置於圖片下方

除了一般CSS美化習慣,利用position外,使用Flex 也可以設定 z-index

#app{
  display: flex; 

  .title{
    z-index: 1;
    // position: absolute; left: 0; bottom: 0;
    align-self: flex-end; flex:1;
    display: flex;

    li{
      background: rgba(0, 0, 0, 0.5);
      flex:1;
    }

  } //.title end
} // #app end

(3) 將【#app>title】基本美化

※span 置於右下角,利用margin-top:auto時,需要flex考量

#app{
  .title{
    li{
      display: flex; flex-direction: column;
      height: 60px;

      color: #EFAF00;
      border-right: 1px solid #ca9057; padding: 5px;

      &:last-child{ border-right: none;}
      
      p{font-size: .9em;}
      span{
        font-size: .6em; text-align: right;

        margin-top:auto; 
      }
    } //li end
  } //.title end
} // #app end

(4) 將【#app>title】,利用【li.on】者表示正在顯示的CSS美化,並在上方加入三角形

#app{
  .title{
    li{
      &.on{
        background:#fcd063; color:#000; font-weight: bold;
        position: relative;
        filter: drop-shadow(1px -1px 3px #000);
      }
      &.on:before{
        content: '';
        border-bottom: 10px solid #fcd063;
        border-left:10px solid transparent; border-right:10px solid transparent;
        position: absolute; top: -9px; left: 50%; margin-left: -10px;
      }
    } //li end
  } //.title end
} // #app end

(5) 利用 CSS美化中,【:after】中【content】的【data-*】應用

參考連結:【content屬性

#app{
  .title{
    li{
      p::after{
        content:attr(data-en);
        font-size: .7em;
        display: block;
      }
    } //li end
  } //.title end
} // #app end