templateCreat。vue 弹框组件
<template>
<div v-if="showDialog" class="dialog">
<div v-if="showDialog" class="back-drop"></div>
<div class="alert" :class="{'alert-active':showDialogActive,'alert-big':big,'alert-middle':middle}" :style="'width:'+width+'px'">
<div class="title" >
<span style="padding-left:16px;">{{title}}</span>
<i v-if="closes" @click="close" style="margin-right:12px;" class="el-message-box__close el-icon-close cursor"></i>
</div>
<div class="dialog-content">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
import { setTimeout } from "timers";
export default {
name: "v-templateCreat",
props: {
title: {
type: String,
default: "温馨提示"
},
middle:{
type:Boolean,
default:false
},
big:{
type:Boolean,
default:false
},
width: {
default: 498
},
open:Boolean,
closes: {
type: Boolean,
default: true
},
},
data() {
return {
showDialog: false,
templateCreat: false,
showDialogActive: false,
};
},
methods: {
close() {
this.showDialogActive = false;
this.$emit('update:open', false);
setTimeout(() => (this.showDialog = false), 300);
},
openFn(){
this.showDialog = true;
this.checkDom();
},
checkDom(){
let timer = null;
let dom = document.body.querySelector('.dialog');
if(dom){
this.showDialogActive = true
if(!timer) clearTimeout(timer);
}
else
{
timer = setTimeout(()=>this.checkDom(),0);
}
},
},
watch: {
open: {
handler(newName, oldName) {
if(newName) this.openFn();
if(!newName) this.close();
},
immediate: true,
deep: true
}
},
mounted(){
}
};
</script>
<style lang="scss">
.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;
}
}
</style>
//index。vue 图片剪切
<template>
<div class="login">
<label class="btn" for="uploads">upload</label>
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg"
@change="uploadImg($event, 1)">
<templateCreat :open.sync="couponParticularsShowTemplate" title="图片裁剪" class="couponParticulars">
<div class="cut">
<vue-cropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType" :info="true" :full="option.full"
:can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :original="option.original"
: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"></vue-cropper>
</div>
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden', 'margin': '5px'}">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</templateCreat>
</div>
</template>
<script>
import {VueCropper} from 'vue-cropper'
import templateCreat from '@/components/templateCreat';
export default {
name: "Login",
data() {
return {
couponParticularsShowTemplate:false,
previews: {},
option: {
img: 'https://qn-qn-kibey-static-cdn.app-echo.com/goodboy-weixin.PNG',
size: 1,
full: false,
outputType: 'png',
canMove: true,
fixedBox: false,
original: false,
canMoveBox: true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 200,
autoCropHeight: 150,
centerBox: false,
high: true
},
}},
components: {
VueCropper,templateCreat
},
methods: {
// 实时预览函数
realTime(data) {
this.previews = data
console.log(data)
},
uploadImg(e, num) {
//上传图片
// this.option.img
var file = e.target.files[0]
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
return false
}
var reader = new FileReader()
reader.onload = (e) => {
let data
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
if (num === 1) {
this.option.img = data
} else if (num === 2) {
this.example2.img = data
}
}
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file)
this.couponParticularsShowTemplate = !this.couponParticularsShowTemplate
},
imgLoad(msg) {
console.log(msg)
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cut {
width: 300px;
height: 300px;
margin: 30px auto;
}
</style>
vue-cropper 一个简单快捷使用的图片裁剪插件 https://www.vue-js.com/topic/5934bfc3fbaee51e2432c244
