创建vue 公共组件时报错
原因:缺少根元素!
组件中不管写多少内容,最外层一定要给一个div标签把所有包含起来
示例 将上传附件封装为组件
html中引入vue封装组件时,组件名字必须全部使用小写,大写无法编译
webpack组建化形式开发 名字可大写
Vue.component('upload-file',{
template:'<div>\n' +
' <div class="row ten">\n' +
' <div class="first">附件</div>\n' +
' <div class="file_box">\n' +
' <div class="file">\n' +
' <div>文件名</div>\n' +
' <div>类型</div>\n' +
' <div>大小(kb)</div>\n' +
' <div>\n' +
' <el-upload \n' +
' class="avatar-uploader" \n' +
' multiple\n' +
' :action="uploadUrl()"\n' +
' :headers="headers"\n' +
' :show-file-list="false" \n' +
' :on-success="handleAvatarSuccess" \n' +
' :before-upload="beforeAvatarUpload"\n' +
' accept=".pdf, .doc, .docx, .xls, .xlsx" \n' +
' :file-list="fileList"\n' +
' :limit="5">\n' +
' <span style="color: #409EFF">上传</span>\n' +
' </el-upload>\n' +
' </div>\n' +
' </div>\n' +
' <div class="file lastFile" v-for="(item,key) in uploadData" :key="key">\n' +
' <el-tooltip class="item" effect="dark" :content="item.fileName" placement="top">\n' +
' <div>{{item.fileName}}</div>\n' +
' </el-tooltip>\n' +
' <div>{{item.fileType}}</div>\n' +
' <div>{{item.fileSize}}</div>\n' +
' <div style="display:flex;justify-content:space-around;">\n' +
' <el-button type="text" @click="previewFile(item)">查看</el-button>\n' +
' <el-button type="text" class="fontRed" @click="handleRemove(item)">删除</el-button>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' \n' +
' <div class="remind fontRed">\n' +
' <h4>上传附件须知</h4>\n' +
' <p>1:上传word、excel文件内容必须在纸张大小范围内(默认A4)</p>\n' +
' <p>2:内容超出,调整布局并更改纸张大小(页面布局-纸张大小)</p>\n' +
' <p>3:尽量上传.docx .xlsx格式文档</p>\n' +
' </div>\n' +
' </div>',
data: function () {
return {
headers: { Authorization: '' }, //上传组件的头部token请求验证
fileList: [],
uploadData: [], //上传列表
}
},
methods: {
// 上传
uploadUrl() {
return ctx+"file/uploadFile";
},
//文件上传之前的验证
beforeAvatarUpload(file) {
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isLt10M) {
this.$message.error("上传文件大小不能超过 10 MB!");
}
return isLt10M;
},
//上传文件
handleAvatarSuccess(res,file) {
const files = {
uid:file.uid,
fileName: res.data.fileName, //文件名称
fileType: res.data.fileType, //后缀名.jpg
fileSize: res.data.fileSize, //文件大小
filePath: res.data.filePath, //预览url
url: file.url
};
this.uploadData.push(files);
this.sendData();
},
//删除附件
handleRemove(file) {
for(var i = 0; i < this.uploadData.length; i++){
if(file.uid == this.uploadData[i].uid || file.url == this.uploadData[i].url){
this.uploadData.splice(i,1)
}
}
},
//预览附件
previewFile(file) {
if(file.url){
window.open(ctx+"upload/"+file.url, '_blank');
}else{
var url = file.response.data.filePath;
window.open(ctx+"upload/"+url, '_blank');
}
},
// 上传的附件
getUploadData(){
var data = {};
data.fileList = this.fileList;
data.uploadData = this.uploadData;
return data;
},
//向父组件传值
sendData(){
this.$emit('onchange',this.getUploadData());
}
}
})