vue|vue 图片剪切
templateCreat。vue 弹框组件
{{title}}
.dialog {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
z-index: 106;
.back-drop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 106;
}
.alert {
width: 498px;
min-height: 260px;
// overflow-y: scroll;
background: #fff;
left: calc(50% - 249px);
top: calc(50% - 280px);
position: fixed;
z-index: -1;
transform: scale(1.23);
opacity: 0;
transition: all 0.3s;
position: relative;
.title {
height: 44px;
justify-content: space-between;
display:flex;
width: 100%;
background: #f2f2f2;
align-items: center;
font-size: 16px;
}
.message {
padding: 18px;
min-height: 100px;
overflow: auto;
}
}
.alert-middle{
width:614px !important;
left:calc(50% - 307px);
}
.alert-big{
width:748px !important;
left:calc(50% - 374px);
}
.alert-active {
z-index: 9999;
transform: scale(1);
opacity: 1;
}
}
//index。vue 图片剪切
@change="uploadImg($event, 1)">
:auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox"
@real-time="realTime" :high="option.high"
@img-load="imgLoad" mode="cover">
文章图片
.cut {
width: 300px;
height: 300px;
margin: 30px auto;
}
vue-cropper 一个简单快捷使用的图片裁剪插件 https://www.vue-js.com/topic/5934bfc3fbaee51e2432c244
【vue|vue 图片剪切】vue-cropper 不使用npmhttps://github.com/xyxiao001/vue-cropper
