Skip to content

G
gdtel-gztel-school-center-ui
Commit 70208c1e by 弓厶
Options

格式化代码

parent 73bacf4d
Showing with 78 additions and 81 deletions
src/views/poster/PosterList.vue
...@@ -6,36 +6,35 @@ ...@@ -6,36 +6,35 @@
<a-form layout="inline"> <a-form layout="inline">
<a-row :gutter="24"> <a-row :gutter="24">
<span class="table-page-search-submitButtons" style="float: left; overflow: hidden;"> <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
<a-col :md="6" :sm="24"> <a-col :md="6" :sm="24">
<a-button @click="add()" type="primary">新建海报</a-button> <a-button @click="add()" type="primary">新建海报</a-button>
</a-col> </a-col>
</span> </span>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>ß
<new-poster ref="model1"></new-poster> <new-poster ref="model1"></new-poster>
</div> </div>
</template> </template>
<script> <script>
import newPoster from './newPoster' import newPoster from "./newPoster";
export default { export default {
name: "PosterList", name: "PosterList",
components: {newPoster}, components: { newPoster },
compontents:{ compontents: {
newPoster newPoster
}, },
data(){ data() {
return {} return {};
}, },
methods:{ methods: {
add(){ add() {
this.$refs.model1.showModal(); this.$refs.model1.showModal();
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>
src/views/poster/newPoster.vue
<template> <template>
<a-drawer <a-drawer
title="海报创建" title="海报创建"
placement="right" placement="right"
:closable="true" :closable="true"
:visible="visible" :visible="visible"
@close="onClose" @close="onClose"
width="100%" width="100%"
:bodyStyle="{'padding':0}" :bodyStyle="{'padding':0}"
destroyOnClose destroyOnClose
> >
<div class="meun-box"> <div class="meun-box">
<a-row> <a-row>
<a-col :span="6"> <a-col :span="6">
<div class="select-btn"> <div class="select-btn">
<span>选择图片</span> <span>选择图片</span>
<input ref="selectImgae" class="seletImg" type="file" @change="selectImage"/> <input ref="selectImgae" class="seletImg" type="file" @change="selectImage" />
</div> </div>
<a-button @click="toImage" v-if="images!=''">生成图片</a-button> <a-button @click="toImage" v-if="images != ''">生成图片</a-button>
</a-col> </a-col>
<a-col :span="6" v-if="images!=''"> <a-col :span="6" v-if="images!=''">
<a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"> <a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-slider id="code" v-model="codeWidth" :max="300"/> <a-slider id="code" v-model="codeWidth" :max="300" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<div class="center-box"> <div class="center-box">
<div class="image-box" ref="imageWrapper" v-if="images!=''"> <div class="image-box" ref="imageWrapper" v-if="images!=''">
<code-move :width="codeWidth"></code-move> <code-move :width="codeWidth"></code-move>
<img class="bg-img" :src="images"> <img class="bg-img" :src="images" />
</div> </div>
</div> </div>
</a-drawer> </a-drawer>
...@@ -36,18 +36,18 @@ ...@@ -36,18 +36,18 @@
<script> <script>
import CodeMove from "../../components/sysmanage/codeMove"; import CodeMove from "../../components/sysmanage/codeMove";
import html2canvas from 'html2canvas' import html2canvas from "html2canvas";
import ACol from "ant-design-vue/es/grid/Col"; import ACol from "ant-design-vue/es/grid/Col";
export default { export default {
name: "newPoster", name: "newPoster",
components: {ACol, CodeMove}, components: { ACol, CodeMove },
data() { data() {
return { return {
visible: false, visible: false,
images: '', images: "",
codeWidth: 150//二维码大小 codeWidth: 150 //二维码大小
} };
}, },
methods: { methods: {
showModal() { showModal() {
...@@ -62,18 +62,18 @@ export default { ...@@ -62,18 +62,18 @@ export default {
return; return;
} }
var reader = new FileReader(); var reader = new FileReader();
reader.onload = (evt) => { reader.onload = evt => {
let result = evt.target.result; let result = evt.target.result;
this.images = result; this.images = result;
} };
reader.readAsDataURL(file.files[0]); reader.readAsDataURL(file.files[0]);
}, },
toImage() { toImage() {
html2canvas(this.$refs.imageWrapper, { html2canvas(this.$refs.imageWrapper, {
backgroundColor: null backgroundColor: null
}).then((canvas) => { }).then(canvas => {
let dataURL = canvas.toDataURL("image/png"); let dataURL = canvas.toDataURL("image/png");
this.downloadFile('海报.png', dataURL) ; this.downloadFile("海报.png", dataURL);
}); });
}, },
downloadFile(fileName, content) { downloadFile(fileName, content) {
...@@ -81,7 +81,7 @@ export default { ...@@ -81,7 +81,7 @@ export default {
if (window.navigator.msSaveOrOpenBlob) { if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName); navigator.msSaveBlob(blob, fileName);
} else { } else {
const link = document.createElement('a'); const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob); link.href = window.URL.createObjectURL(blob);
link.download = fileName; link.download = fileName;
...@@ -94,67 +94,65 @@ export default { ...@@ -94,67 +94,65 @@ export default {
} }
}, },
base64ToBlob(code) { base64ToBlob(code) {
const parts = code.split(';base64,'); const parts = code.split(";base64,");
const contentType = parts[0].split(':')[1]; const contentType = parts[0].split(":")[1];
const raw = window.atob(parts[1]); const raw = window.atob(parts[1]);
const rawLength = raw.length; const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength); const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) { for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i); uInt8Array[i] = raw.charCodeAt(i);
} }
return new Blob([uInt8Array], {type: contentType}); return new Blob([uInt8Array], { type: contentType });
} }
} }
} };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.meun-box { .meun-box {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
height: 80px; height: 80px;
padding: 10px 24px 0; padding: 10px 24px 0;
} }
.center-box { .center-box {
padding-top: 100px; padding-top: 100px;
} }
.select-btn { .select-btn {
width: 90px; width: 90px;
height: 32px; height: 32px;
border: 1px solid #eee; border: 1px solid #eee;
position: relative; position: relative;
background-color: #00a0e9; background-color: #00a0e9;
line-height: 31px; line-height: 31px;
border-radius: 4px; border-radius: 4px;
color: white; color: white;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
.seletImg { .seletImg {
opacity: 0; opacity: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
}
} }
}
.image-box { .image-box {
width: 300px; width: 300px;
height: auto; height: auto;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
margin: auto; margin: auto;
.bg-img {
width: 100%;
}
.bg-img {
width: 100%;
} }
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment