現(xiàn)象
開發(fā)遇到vue--cropper不能拖動(dòng)圖片和截圖框
解決方法
????????can-move-box設(shè)置為true，表示可以拖動(dòng)截圖框
????????can-move設(shè)置為true，表示可以拖動(dòng)圖片
*注意：
我外層套了一個(gè)el-col, el-col的寬高一定要大于截圖框的寬高，否則移動(dòng)不了截圖框和圖片
實(shí)現(xiàn)代碼
?<el-col :xs="24" :md="12" :style="{height: '720px',width:'1000px',position:'center'}">
?<vue-cropper
? ? ? ? ? ? ref="cropper"
? ? ? ? ? ? :img="options.imageUrl"
? ? ? ? ? ? :info="true"
? ? ? ? ? ? :autoCrop="true"
? ? ? ? ? ? :autoCropWidth="850px"
? ? ? ? ? ? :autoCropHeight="680px"
? ? ? ? ? ? :fixedBox="options.fixedBox"
? ? ? ? ? ? :can-move-box="true"
??????????? :can-move="true"
? ? ? ? ? ? :fixed-box="true"
? ? ? ? ? ? @realTime="realTime"
? ? ? ? ? ? v-if="visible"?? />
</el-col>
其他相關(guān)內(nèi)容
組件源碼地址https://github.com/xyxiao001/vue-cropperhttps://github.com/xyxiao001/vue-cropper組件演示地址
vue-cropper文章來源：http://www.zghlxwxcb.cn/news/detail-407350.html
屬性文章來源地址http://www.zghlxwxcb.cn/news/detail-407350.html
| 名稱 | 功能 | 默認(rèn)值 | 可選值 |
|---|---|---|---|
| img | 裁剪圖片的地址 | 空 |
url 地址, base64, blob
|
| outputSize | 裁剪生成圖片的質(zhì)量 | 1 |
0.1 ~ 1 |
| outputType | 裁剪生成圖片的格式 | jpg (jpg 需要傳入jpeg) |
jpeg, png, webp
|
| info | 裁剪框的大小信息 | true |
true, false
|
| canScale | 圖片是否允許滾輪縮放 | true |
true, false
|
| autoCrop | 是否默認(rèn)生成截圖框 | false |
true, false
|
| autoCropWidth | 默認(rèn)生成截圖框?qū)挾?/td> | 容器的 80% | 0 ~ max |
| autoCropHeight | 默認(rèn)生成截圖框高度 | 容器的 80% | 0 ~ max |
| fixed | 是否開啟截圖框?qū)捀吖潭ū壤?/td> | false |
true, false
|
| fixedNumber | 截圖框的寬高比例 | [1, 1] |
[ 寬度 , 高度 ] |
| full | 是否輸出原圖比例的截圖 | false |
true, false
|
| fixedBox | 固定截圖框大小 | 不允許改變 | false |
| canMove | 上傳圖片是否可以移動(dòng) | true |
true, false
|
| canMoveBox | 截圖框能否拖動(dòng) | true |
true, false
|
| original | 上傳圖片按照原始比例渲染 | false |
true, false
|
| centerBox | 截圖框是否被限制在圖片里面 | false |
true, false
|
| high | 是否按照設(shè)備的dpr 輸出等比例圖片 | true |
true, false
|
| infoTrue | true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀?/td>
| false |
true, false
|
| maxImgSize | 限制圖片最大寬度和高度 | 2000 |
0 ~ max |
| enlarge | 圖片根據(jù)截圖框輸出比例倍數(shù) | 1 |
0 ~ max(建議不要太大不然會卡死的呢) |
| mode | 圖片默認(rèn)渲染方式 | contain |
contain , cover, 100px, 100% auto |
| limitMinSize | 裁剪框限制最小區(qū)域 | 10 | Number, Array, String |
到了這里，關(guān)于vue-cropper 拖動(dòng)圖片和截圖框的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
