zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP

This commit is contained in:
sakuya 2021-05-17 23:38:53 +08:00
parent 0e9f1bf06b
commit e0a0771d3a
3 changed files with 111 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/json/login.json
View File

@ -49,6 +49,15 @@
"type": "menu"
},
"component": "vab/print"
},
{
"path": "/vab/upload",
"name": "upload",
"meta": {
"title": "上传",
"type": "menu"
},
"component": "vab/upload"
}
]
},

26
src/components/scUpload/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="sc-upload" v-loading="loading">
<div class="sc-upload" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
<div v-if="tempImg || img" class="sc-upload-file">
<div class="mask">
<span class="del" @click.stop="del"><i class="el-icon-delete"></i></span>
@ -7,9 +7,9 @@
<el-image class="file" :src="tempImg || img" :preview-src-list="[img]" fit="cover" hide-on-click-modal append-to-body></el-image>
</div>
<div v-else class="sc-upload-uploader">
<el-upload ref="upload" v-loading="loading" class="uploader" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error">
<el-upload ref="upload" class="uploader" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error">
<div class="file-empty">
<i class="el-icon-plus"></i>
<i :class="icon"></i>
<h4>{{title}}</h4>
</div>
</el-upload>
@ -26,6 +26,8 @@
accept: { type: String, default: ".jpg, .png, .jpeg, .gif" },
maxSize: { type: Number, default: 10 },
title: { type: String, default: "上传" },
icon: { type: String, default: "el-icon-plus" },
multiple: { type: Boolean, default: false },
},
data() {
return {
@ -43,8 +45,7 @@
}
},
mounted() {
this.img = this.modelValue;
},
methods: {
before(file){
@ -82,23 +83,30 @@
}
</script>
<style>
.sc-upload+.sc-upload {margin-left: 10px;}
</style>
<style scoped>
.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}
.sc-upload {width: 120px;height: 120px;}
.sc-upload {width: 120px;height: 120px;display: inline-block;vertical-align: top;box-sizing: border-box;}
.sc-upload-file {position: relative;width: 100%;height: 100%;}
.sc-upload-file .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
.sc-upload-file .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
.sc-upload-file .mask span i {font-size: 12px;}
.sc-upload-file .mask .del {background: #F56C6C;}
.sc-upload-file .file {width: 120px;height: 120px;}
.sc-upload-file .file {width: 100%;height: 100%;}
.sc-upload-file .file img {vertical-align: bottom;}
.sc-upload-file:hover .mask {display: inline-block;}
.sc-upload-uploader {border: 1px dashed #d9d9d9;}
.sc-upload-uploader {border: 1px dashed #d9d9d9;box-sizing: border-box;width: 100%;height: 100%;}
.sc-upload-uploader:hover {border: 1px dashed #409eff;}
.sc-upload-uploader .file-empty {width: 118px;height: 118px;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.sc-upload-uploader .uploader {width: 100%;height: 100%;}
.sc-upload-uploader >>> .el-upload {width: 100%;height: 100%;}
.sc-upload-uploader .file-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
</style>

85
src/views/vab/upload.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<el-main>
<el-card shadow="never" header="基础示例">
<sc-upload v-model="imgurl" :action="uploadUrl"></sc-upload>
<sc-upload v-model="avatar" :action="uploadUrl"></sc-upload>
<sc-upload v-model="avatar" title="上传头像" icon="el-icon-picture-outline" :action="uploadUrl"></sc-upload>
</el-card>
<el-card shadow="never" header="在验证表单中使用">
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
<el-form-item label="身份证" class="imglist" required>
<el-col>
<el-form-item prop="img1">
<sc-upload v-model="form.img1" title="人像面" :action="uploadUrl"></sc-upload>
</el-form-item>
</el-col>
<el-col>
<el-form-item prop="img2">
<sc-upload v-model="form.img2" title="国徽面" :action="uploadUrl"></sc-upload>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="日期" prop="date">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">保存</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</el-main>
</template>
<script>
export default {
name: 'upload',
data() {
return {
uploadUrl: this.$API.demo.upload.url,
imgurl: "images/avatar.jpg",
avatar: "",
form: {
img1: "",
img2: "",
date: ""
},
rules: {
img1: [
{required: true, message: '请上传', trigger: 'blur'}
],
img2: [
{required: true, message: '请上传', trigger: 'blur'}
],
date: [
{required: true, message: '请选择日期', trigger: 'blur'}
]
}
}
},
methods: {
submitForm(){
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!');
}else{
return false;
}
})
},
resetForm(){
this.$refs.ruleForm.resetFields();
}
}
}
</script>
<style scoped>
.el-card+.el-card {margin-top: 15px;}
.imglist {margin-bottom:0;}
.imglist .el-col+.el-col {margin-left: 10px;}
</style>