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>
<div class="van-uploader">
<slot></slot>
<template v-if="disabled">
<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>
<input type="file" @change="onValueChange" :disabled="disable" class="van-uploader__input" ref="input" />
</div>
</template>
<script>
export default {
name: 'van-uploader',
props: {
disabled: {
type: Boolean,
default: false
},
beforeRead: Function,
afterRead: Function,
resultType: {
type: String,
default: 'dataUrl',
validator(value) {
return value === 'dataUrl' || value === 'text';
}
}
export default {
name: 'van-uploader',
props: {
disable: {
type: Boolean,
default: false
},
methods: {
onValueChange(event) {
if (this.disabled) {
return;
}
var files = event.target.files;
var file = files[0];
if (!file) return;
if (this.beforeRead && !this.beforeRead(file)) return;
var reader = new FileReader();
reader.onload = (e) => {
this.afterRead && this.afterRead(
{
file: 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);
}
beforeRead: Function,
afterRead: Function,
resultType: {
type: String,
default: 'dataUrl',
validator: value => value === 'dataUrl' || value === 'text'
}
},
methods: {
onValueChange(event) {
if (this.disable) {
return;
}
const file = event.target.files[0];
if (!file || (this.beforeRead && !this.beforeRead(file))) {
return;
}
const reader = new FileReader();
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>