1、动态组件以及传值问题
动态组件可以解决当父组件需要调用多个不同的子组件对话框时，需要重复编写多个子组件的问题，只需要用一个组件就可以实现多个组件的调用
动态组件实现：
//父组件代码---------------------------------------------------------------------
<template>
<el-button @click = "openSub">打开子组件<el-button>
<component
:is="current"
@closeChildDialog="closeChildDialog"
:data = 'data'
></component>
</template>
<script>
import initiate from "./initiate/index";//子组件引入
export default {
name: "Index",
components: {
initiate,
},
data() {
return {
//当前组件名称
current: 'initiate',
//需要传递的数据
data:'',
};
},
methods: {
//开启子组件
openSub(){
//将current设为子组件的名称
this.current = 'initiate'
}
//关闭弹窗
closeChildDialog() {
this.current = null;
},
},
};
</script>
//子组件./initiate/index代码------------------------------------------------------------------<template>
<div class = "initiate">
<el-dialog :visible.sync="dialogVisible" @close="closeDialog" :append-to-body="true">
<div slot="title" class="dialog-title">
<span class="title-text">弹出层标题</span>
</div>
<div>
//子组件内容
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'addPro',
props:['data'],
data () {
return {
// 子组件自己的显示标记，用于真正切换dialog的显示/隐藏
dialogVisible: true,
// 标题
title:'',
}
},
created(){
},
methods: {
// 关闭弹出框事件，触发父级组件的closeChildDialog方法
closeDialog () {
this.$emit('closeChildDialog')
},
},
watch: {
// 观察父级组件的showFlag，并将showFlag的最新值设置给dialogVisible
current (newVal, oldVal) {
this.dialogVisible = newVal
},
}
}
</script>
父组件获取子组件数据
子组件代码
data(){
return {
subData:[1,2,3]
}
}
method:{
subMethod(){
console.log('12345')
}
}
父组件代码：
<sub ref="child"> </sub>
method:{
getSub(){
//调用子组件数据
console.log(this.$refs.child.subData)//输出：[1,2,3]
//调用子组件方法
this.$refs.child.subMethod()//输出'12345'
}
}
2、文件的上传与下载
普通文件上传
<template>
<div class="upload">
<!-- ****************************************************** 文件上传按钮 ****************************************************** -->
<el-button size="small" type="primary" @click="handleClick">选择文件</el-button>
<!-- ****************************************************** 用户上传文件对话框 ****************************************************** -->
<el-dialog :close-on-click-modal="false" :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-form label-width="80px" enctype="multipart/form-data">
<el-form-item label="文件" prop="file">
<input type="file" id="file_input" accept=".xlsx">
</el-form-item>
</el-form>
<label class="tipLabel" style="color:red; display:block; margin-left:50px;">
请上传excel文件!
</label>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :disabled="subFlag" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
//接口引入
import {fileUpload} from '@/api/projects/research'
export default {
data() {
return {
// 上传文件参数
upload: {
open: false,
title: "",
},
};
},
methods: {
// 选择文件按钮
handleClick(){
this.upload.open = true;
},
// 上传提交按钮
submitForm(){
//文件判空
if(document.getElementById('file_input').files[0] != undefined){
//文件类型判断
if(document.getElementById('file_input').files[0].type != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){ this.$modal.msgWarning("请选择Excel文件!"); } else{
//采用formaData格式上传
var formData = new FormData();
formData.append('file', document.getElementById('file_input').files[0]);
//文件上传时需额外传递的参数
formData.append('projectId', this.$route.query.projectId);
//文件上传接口调用
fileUpload(formData).then(response => {
if (response.code === 200) {
this.$modal.msgSuccess("上传成功");
//关闭对话框
this.upload.open = false;
//清空输入框中的文件
document.getElementById('file_input').value = ''
}
});
}
}
else{
this.$modal.msgWarning("请选择要上传的文件!");
}
},
},
};
</script>
利用blob下载流格式文件
//自定义文件格式以及文件名下载流文件************************************************
template(urll,filename){
//urll:文件下载路径
//filename:自定义的文件名,文件名里边加上需要下载的数据=类型（如：'文件.xlsx'）
var url = baseURL + urll;
axios.get(
url,//请求的url
{
responseType: 'blob',//服务器返回的数据类型
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + getToken(),
}
}
).then((res) => {
const content = res.data
const blob = new Blob([content])//构造一个blob对象来处理数据
const fileName = filename
if ('download' in document.createElement('a')) { //支持a标签download的浏览器
const link = document.createElement('a')//创建a标签
link.download = fileName//a标签添加属性
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
document.body.appendChild(link)
link.click()//执行下载
URL.revokeObjectURL(link.href) //释放url
document.body.removeChild(link)//释放标签
} else { //其他浏览器
navigator.msSaveBlob(blob, fileName)
}
}).catch((err) => {
console.log(err);
})
},
blob固定格式流文件下载
// 文件下载
handleDownload(row){
var id = row.id;
// window.location.href= process.env.VUE_APP_BASE_API+'/projectReport/report/downLoadReport/'+id;
axios.get(process.env.VUE_APP_BASE_API+'/projectReport/report/downLoadReport/'+id, {
responseType: 'blob', // 或者responseType: 'blob'
xsrfHeaderName: 'Authorization',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + getToken()
}
}).then(res => {
const blob = new Blob([res.data], {
type: 'application/msword'//要下载的文件格式
})
const objectUrl = URL.createObjectURL(blob)
window.location.href = objectUrl
}).catch(err => {
console.log(err)
})
},
Blob 下载文件时 type 类型 大全:
根据网址下载文件：
//文件下载路径
//方法一
window.location.href = url;
//方法二
window.open(url)
3、上传图片(携带参数、图片列表展示、预览功能、删除功能)
图片列表：
大图预览：
<template>
<div class="topology">
<!-- 图片列表 -->
<el-row :gutter="20">
<el-col :span="6" v-for="item in topologyList" :key="item.id">
<div class="grid-content bg-purple">
<el-image
style="width: 180px; height: 180px"
:src=item.filePath
:preview-src-list="srcList">
</el-image>
<div class="delete-img">
<i class="el-icon-close" @click="handleDelete(item.id)"></i>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="addB" @click="addPicture">
<label>+</label>
</div>
</div>
</el-col>
</el-row>
<!-- 上传图片对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form label-width="80px" enctype="multipart/form-data">
<el-form-item label="文件" prop="file">
<input type="file" id="img_input" accept=".jpg">
</el-form-item>
<el-form-item label="备注" prop="fileRemarks">
<input type="text" v-model = 'fileRemarks' >
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {topologyUpload,listTopology,topologyDelete} from "@/api/projects/research";
export default {
name: "Topology",
props:['subId','editFlag'],
data() {
return {
// 拓扑图列表
topologyList:[
{
filePath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
},
{
filePath: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
}
],
// 拓扑图预览列表
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
// 弹出层标题
title:'请选择要上传的图片',
// 是否显示弹出层
open:false,
// 上传图片备注
fileRemarks:undefined,
// 遮罩层
loading: true,
};
},
methods: {
// 拓扑图上传按钮点击
addPicture(){
if(this.editFlag){
this.open = true;
}
},
// 拓扑图上传提交
submitForm(){
if(document.getElementById('img_input').files[0] == undefined){
this.$modal.msgWarning("请选择要上传的图片!");
}
else{
var formData = new FormData();
formData.append('file', document.getElementById('img_input').files[0]);
formData.append('其他参数', 其他参数);
topologyUpload(formData).then(response => {//上传接口调用
if (response.code === 200) {
this.$modal.msgSuccess("添加成功");
//拓扑图列表查询
this.getTopologylist()
this.open = false;
this.fileRemarks = ''
//清空输入框数据
document.getElementById('img_input').value = ''
}
});
}
},
// 拓扑图删除
handleDelete(){
//删除接口调用
},
},
};
</script>
<style scoped lang="scss">
//图片列表样式
.topology{
text-align:center;
flex-flow: column;
.el-col,.grid-content{
height: 180px;
width: 180px;
}
img{
height: 100%;
width: 100%;
&:hover {
border: 1px dashed #409eff;
}
}
.delete-img{
height: 10%;
width: 10%;
position: relative;
margin-top: -180px;
i{
position: absolute;
top: 6px;
left: 160px;
display: none;
}
}
&:hover {
i{
display:block;
}
}
.addB{
height: 100%;
background-color: #ccc;
font-size: 100px;
color:#fff;
display: flex;
align-items:center;
justify-content:center;
}
.el-button{
width: 5%;
}
}
</style>
4、html2canvas实现截图功能
npm导入html2canvas:
npm install --save html2canvas
截图代码实现：
import html2canvas from "html2canvas";
async exportPic(element,aaa) {
let imageUrl= await html2canvas('需要截图的DOM元素',{}).then((canvas) => {
return canvas.toDataURL("image/jpg"); // 将canvas转成base64图片格式
});
aaa(imageUrl);
}
//回调函数
aaa(){
console.log(imageUrl)
}
5、svga动画的实现
导入依赖包：
npm install svgaplayerweb --saveoryarn add svgaplayerweb
<div id="svgaBox" style="width: 82%;height: 124%;position: fixed;top: -23vh;left: 16vh;"></div>
import SVGA from "svgaplayerweb"
mounted() { this.$nextTick(()=>{ this.SVGA() }) },
SVGA() {
let player = new SVGA.Player("#svgaBox");
let parser = new SVGA.Parser("#svgaBox"); ]
let url=window.location.protocol + "//" + window.location.host.split(":")[0] + "/static/img/home.svga";
parser.load( url, function (videoItem) { //this.bgImg，图片路径需要线上地址，本地引用会报错 this.bgImg为svga动画的线上地址
player.setVideoItem(videoItem);
player.startAnimation();
});
},
