Vue Cropper是一個基于Vue.js的圖片裁剪組件,它可以讓用戶輕松地調整上傳的圖片大小、位置和比例。Vue Cropper有一些與之相關的屬性,下面我們將介紹這些屬性及其用途。
data() {
return {
cropperOptions: {
aspectRatio: 16/9,
autoCrop: true,
autoCropArea: 0.8,
dragMode: 'move',
cropBoxMovable: false,
cropBoxResizable: false,
responsive: true
}
}
},
mounted: function() {
this.$refs.cropper.replace('/path/to/image.jpg');
}
1. aspectRatio:設置裁剪框寬高比,默認為自由裁剪模式。例如16/9表示寬高比為16:9。
2. autoCrop:是否自動裁剪,默認為false,設置為true后,當選擇完圖片后即可自動裁剪。
3. autoCropArea:設置自動裁剪的區域大小,范圍為0-1,表示圖片寬高的比例。默認為0.8,即裁剪區域為圖片面積的0.8倍。
4. dragMode:設置拖拽模式,默認為crop,即拖拽裁剪框,還可設置為move,表示拖拽整個圖片。
5. cropBoxMovable:設置裁剪框是否可以移動,默認為true。
6. cropBoxResizable:設置裁剪框是否可調整大小,默認為true。
7. responsive:是否開啟響應式模式,默認為false,設置為true后,裁剪框將自適應容器大小。