templateCreat。vue 弹框组件
{{title}}
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(){
}
};
.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)">
: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">
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)
}
},
}
.cut {
width: 300px;
height: 300px;
margin: 30px auto;
}
vue-cropper 一个简单快捷使用的图片裁剪插件 https://www.vue-js.com/topic/5934bfc3fbaee51e2432c244
vue-cropper 不使用npm https://github.com/xyxiao001/vue-cropper