123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <template>
- <div class="myUpload">
- <div class="myUpload1">
- <div class="myDemo">
- <el-upload
- class="upload-demo"
- :drag="drag"
- :action="action"
- :multiple="multiple"
- :data="data"
- :name="name"
- :show-file-list="showFileList"
- :accept="accept"
- :list-type="listType"
- :auto-upload="autoUpload"
- :disabled="disabled"
- :limit="limit"
- :on-preview="onPreview"
- :on-remove="onRemove"
- :on-success="onSuccess"
- :on-error="onError"
- :on-progress="onProgress"
- :on-change="onChange"
- :on-exceed="onExceed"
- style="width: 100%"
- >
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
- </el-upload>
- </div>
- <div class="line" v-if="fileList.length>0"></div>
- <div class="fileList" v-if="fileList.length>0">
- <ul>
- <li v-for="item in fileList" :key="item.id">
- <div><i class="el-icon-document" style="margin-right:10px"></i><span class="name" @click="checkFiles(item)">{{ item.name }}</span></div>
- <div class="type">{{ item.id?'已上传':'待上传' }}</div>
- <div class="icon" @click="onRemove(item,fileList)"><i class="el-icon-close"></i></div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- components: {},
- props: {
- action:{
- type:String,
- default:''
- },
- multiple:{
- type:Boolean
- },
- data:{
- type:Object
- },
- name:{
- type:String,
- default:''
- },
- showFileList:{
- type:Boolean
- },
- drag:{
- type:Boolean,
- default:true
- },
- accept:{
- type:String,
- default:''
- },
- listType:{
- type:String,
- default:'text'
- },
- autoUpload:{
- type:Boolean,
- default:true
- },
- fileList:{
- type:Array,
- default:()=>{
- return []
- }
- },
- disabled:{
- type:Boolean,
- default:false
- },
- limit:{
- type:Number,
- }
- },
- data() {
- return {};
- },
- watch: {},
- computed: {},
- created() {},
- mounted() {},
- methods: {
- onPreview(file){
- this.$emit('on-preview',file)
- },
- onRemove(){
- this.$emit('on-preview',file,fileList)
- },
- onSuccess(response,file,fileList){
- this.$emit('on-preview',response,file,fileList)
- },
- onError(err,file,fileList){
- this.$emit('on-preview',err,file,fileList)
- },
- onProgress(event,file,fileList){
- this.$emit('on-preview',event,file,fileList)
- },
- onChange(file,fileList){
- console.log(file)
- this.$emit('on-preview',file,fileList)
- },
- onExceed(file,fileList){
- this.$emit('on-preview',file,fileList)
- },
- //查看图片
- checkFiles(file){
- }
- },
- };
- </script>
- <style lang="scss">
- .myUpload1 {
- .el-upload {
- width: 100%;
- height: 100%;
- .el-upload-dragger {
- width: 100% !important;
- height: 100%;
- border: none;
- border-radius: 0px;
- }
- .el-upload-dragger:hover {
- border: none;
- }
- }
- .el-upload-list {
- display: none;
- }
- }
- </style>
- <style lang="scss" scoped>
- .myUpload{
- width: calc(100% - 0px);
- height: 100%;
- padding: 5px;
- }
- .myUpload1 {
- width: calc(100% - 20px);
- height: 100%;
- padding: 5px;
- display: flex;
- align-items: center;
- background: white;
- border: 1px dashed var(--bg);
- border-radius: 10px;
- .myDemo {
- width: 100%;
- height: 100%;
- flex: 1;
- }
- .line {
- width: 1px;
- height: 100%;
- background: var(--bg);
- }
- .fileList {
- width: 100%;
- height: 100%;
- overflow-y: auto;
- flex: 2;
- ul {
- list-style-type: none;
- padding: 0 10px;
- li{
- padding:5px 10px;
- border-radius: 5px;
- display: flex;
- justify-content: space-between;
- .type{
- display: block;
- color: #57a5f7;
- }
- .icon{
- display: none;
- }
- }
- li:hover{
- background: #f4f4f4;
- .name{
- color: #57a5f7;
- cursor: pointer;
- }
- .type{
- display: none;
- }
- .icon{
- display: block;
- cursor: pointer;
- }
- }
- }
- }
- }
- </style>
|