Uploader: optimize template

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

View File

@ -1,57 +1,54 @@
<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: {
disabled: { props: {
type: Boolean, disable: {
default: false type: Boolean,
}, default: false
beforeRead: Function,
afterRead: Function,
resultType: {
type: String,
default: 'dataUrl',
validator(value) {
return value === 'dataUrl' || value === 'text';
}
}
}, },
methods: { beforeRead: Function,
onValueChange(event) { afterRead: Function,
if (this.disabled) { resultType: {
return; type: String,
} default: 'dataUrl',
var files = event.target.files; validator: value => value === 'dataUrl' || value === 'text'
var file = files[0]; }
if (!file) return; },
if (this.beforeRead && !this.beforeRead(file)) return;
var reader = new FileReader(); methods: {
reader.onload = (e) => { onValueChange(event) {
this.afterRead && this.afterRead( if (this.disable) {
{ return;
file: file, }
content: e.target.result
}); const file = event.target.files[0];
this.$refs.input && (this.$refs.input.value = ''); if (!file || (this.beforeRead && !this.beforeRead(file))) {
}; return;
if (this.resultType === 'dataUrl') { }
reader.readAsDataURL(file);
} else if (this.resultType === 'text') { const reader = new FileReader();
reader.readAsText(file); reader.onload = (e) => {
} this.afterRead && this.afterRead({
file,
content: e.target.result
});
this.$refs.input && (this.$refs.input.value = '');
};
if (this.resultType === 'dataUrl') {
reader.readAsDataURL(file);
} else if (this.resultType === 'text') {
reader.readAsText(file);
} }
} }
}; }
};
</script> </script>