Uploader: optimize template

This commit is contained in:
陈嘉涵 2017-08-24 14:38:22 +08:00
parent 99259a863f
commit ac4b739814

View File

@ -1,20 +1,16 @@
<template> <template>
<div class="van-uploader"> <div class="van-uploader">
<slot></slot> <slot></slot>
<template v-if="disabled"> <input type="file" @change="onValueChange" :disabled="disable" class="van-uploader__input" ref="input" />
<input type="file" @change="onValueChange" disabled="disabled" class="van-uploader__input" />
</template>
<template v-else>
<input type="file" @change="onValueChange" class="van-uploader__input" ref="input" />
</template>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'van-uploader', name: 'van-uploader',
props: { props: {
disabled: { disable: {
type: Boolean, type: Boolean,
default: false default: false
}, },
@ -23,29 +19,30 @@
resultType: { resultType: {
type: String, type: String,
default: 'dataUrl', default: 'dataUrl',
validator(value) { validator: value => value === 'dataUrl' || value === 'text'
return value === 'dataUrl' || value === 'text';
}
} }
}, },
methods: { methods: {
onValueChange(event) { onValueChange(event) {
if (this.disabled) { if (this.disable) {
return; return;
} }
var files = event.target.files;
var file = files[0]; const file = event.target.files[0];
if (!file) return; if (!file || (this.beforeRead && !this.beforeRead(file))) {
if (this.beforeRead && !this.beforeRead(file)) return; return;
var reader = new FileReader(); }
const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
this.afterRead && this.afterRead( this.afterRead && this.afterRead({
{ file,
file: file,
content: e.target.result content: e.target.result
}); });
this.$refs.input && (this.$refs.input.value = ''); this.$refs.input && (this.$refs.input.value = '');
}; };
if (this.resultType === 'dataUrl') { if (this.resultType === 'dataUrl') {
reader.readAsDataURL(file); reader.readAsDataURL(file);
} else if (this.resultType === 'text') { } else if (this.resultType === 'text') {