vue结合elementui制作上传文件组件

<template>
	<div class="upLoad-box">
		<div class="file">
			<div class="textBox" v-show="uploadName">
				<i class="fileIcon"></i>
				<span class="fileTitle">{{uploadName}}</span>
				<i class="uploadClose" @click="deleteFile()"></i>
			</div>
			<el-upload
				class="upload-demo"
				ref="uploadFile"
				action="123"
				:disabled="disabled"
				:on-change="(file)=>handleChange(file)"
				:show-file-list="false"
				:auto-upload="false">
					<div class="click" slot="trigger">···</div>
			</el-upload>
		</div>
	</div>
</template>
<script>
export default{
	props: {
		disabled: {
			type: Boolean,
			default: function () {
				return false
			}
	},
	data () {
		return {
			uploadName: ''
		}
	},
	methods: {
		deleteFile () {
			this.$emit("uploadFile);
			this.$refs.uploadFile.clearFiles();
			this.uploadName = '';
		},
		handleChange (file) {
			this.$emit('uploadFile',file);
			this.uploadName = file.raw.name;
		}
	}
}
</script>
<style lang="less" scoped>
.upload-box {
	width: 100%;
	height: 32px;
	.file {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #4B5259;
		border-radius: 1px;
		height: 32px;
		box-sizing: border-box;
		padding-right: 15px;
		color: #BDC3CA;
		position: relative;
		&:hover {
			border-color: #C0C4CC;
		}
		.text {
			width: 93%;
			height: 32px;
		}
		.click {
			width: 20px;
			text-align: center;
			cursor: pointer;
		}
		.delete {
			cursor: pointer;
		}
		.textBox {
			width: auto;
			background: #414B54;
			height:24px;
			display: flex;
			align-items: center;
			margin: 4px 0 4px 4px;
			.flleIcon {
				width: 16px;
				height:16px;
				display: inline-block;
				background: url('...'); /*文件icon*/
				margin: 0 4px;
			}
			.fileTitle {
				font-size: 12px;
				color: #BDC3CA;
			}
			.uploadClose {
				width:12px;
				height:12px;
				background: rgba(132,141,151,0.3);
				border-radius: 6px;
				display: inline-block;
				cursor: pointer;
				margin: 0 6px;
				position: relative;
				top: 1px;
				&:hover {
					background-color: #0B66F2;
				}
				&::before {
					content: '';
					display: inline-block;
					width:8px;
					height:8px;
					background: url('...') transparent no-repeat; /*取消文件icon*/
					background-size: cover;
					position: absolute;
					top:2px;
					left: 2px;
				}
			}
		}
		.upload-demo {
			position: absolute;
			right: 15px;
		}
	}
}
</style>

使用时（vue注册组件我就不写了）：

/*uploadFile方法中可以拿到file文件*/
<upLoad @updateFile="uploadFile"></upLoad>