[vue]基於vue的響應式HTML img擷取顯示效果
阿新 • • 發佈：2019-02-04
>問題描述
vue是一個學習曲線相對平緩的響應式框架，利用vue可以做到素材圖片的動態裁剪、切換。
將本文要解決的問題抽象成基本原型進行描述：下圖，為一個尺寸相對固定的素材圖片，實現的目標是每次只實現一格圖片，如下所示：
同時，還要做到頁面的動態響應。
>解決思路
問題的難度就演變成了如何實現圖片的“切片效果”以及動態響應。
切片問題還算簡單，利用div+img，div套用overflow:hidden的style，然後內嵌的img做一個relative的偏移即可；而動態響應，則需要藉助vue中關於內聯樣式的繫結和計算屬性的相關特性。
>程式碼
HTML:
<html> <head> <script src="./vue.js"></script> </head> <!--div繫結內聯樣式物件--> <div id='card1' :style="divsize"> <!--img繫結內聯樣式的計算屬性--> <img :src='picurl' :style="{position:'relative', top:getTop, left:getLeft}"/> </div> </div> </body> </html>
JavaScript:
<script> var card1 = new Vue({ el:'#card1', data:{ // 改變y,x的值，就可以動態切換裁剪後的圖片 y:1, // 每格圖片的y軸編號，從0起 x:2, // .........x............ divsize:{ width:card_width, // 每格圖片的寬，詳見下文；下同 height:card_height, overflow:'hidden' }, picurl:'./0_1.jpg' // 圖片地址 }, computed:{ // 計算屬性，求偏移量 getTop: function(){ return ''+(-pic_top_margin-card_height*this.y)+'px'; }, getLeft: function(){ return ''+(-pic_left_margin-card_width*this.x)+'px'; } } }) </script>
其中，下面這四個值分別是原素材左上角的起始點座標(leftx,top)、每格圖片的尺寸width，height：
var card_width = 156;
var card_height = 241;
var pic_left_margin = 56;
var pic_top_margin = 48;