diff --git a/components.js b/components.js index 3f9709669..382e8e4d8 100644 --- a/components.js +++ b/components.js @@ -56,4 +56,5 @@ module.exports = [ 'password-input', 'search', 'stepper', + 'uploader', ]; diff --git a/docs/markdown/changelog-v3.zh-CN.md b/docs/markdown/changelog-v3.zh-CN.md index d9d1433d4..ef1a0d57c 100644 --- a/docs/markdown/changelog-v3.zh-CN.md +++ b/docs/markdown/changelog-v3.zh-CN.md @@ -51,6 +51,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 - Stepper - Switch - Sidebar +- Uploader ```html diff --git a/src/uploader/index.js b/src/uploader/index.js index d56416cf9..1319d5a77 100644 --- a/src/uploader/index.js +++ b/src/uploader/index.js @@ -18,10 +18,6 @@ export default createComponent({ mixins: [FieldMixin], - model: { - prop: 'fileList', - }, - props: { disabled: Boolean, lazyLoad: Boolean, @@ -39,7 +35,7 @@ export default createComponent({ type: String, default: 'image/*', }, - fileList: { + modelValue: { type: Array, default: () => [], }, @@ -81,19 +77,22 @@ export default createComponent({ }, }, + emits: [ + 'delete', + 'oversize', + 'close-preview', + 'click-preview', + 'update:modelValue', + ], + computed: { previewSizeWithUnit() { return addUnit(this.previewSize); }, - - // for form - value() { - return this.fileList; - }, }, methods: { - getDetail(index = this.fileList.length) { + getDetail(index = this.modelValue.length) { return { name: this.name, index, @@ -139,7 +138,7 @@ export default createComponent({ const oversize = isOversize(files, this.maxSize); if (Array.isArray(files)) { - const maxCount = this.maxCount - this.fileList.length; + const maxCount = this.maxCount - this.modelValue.length; if (files.length > maxCount) { files = files.slice(0, maxCount); @@ -203,7 +202,10 @@ export default createComponent({ : Boolean(validFiles); if (isValidFiles) { - this.$emit('input', [...this.fileList, ...toArray(validFiles)]); + this.$emit('update:modelValue', [ + ...this.modelValue, + ...toArray(validFiles), + ]); if (this.afterRead) { this.afterRead(validFiles, this.getDetail()); @@ -233,10 +235,10 @@ export default createComponent({ }, deleteFile(file, index) { - const fileList = this.fileList.slice(0); + const fileList = this.modelValue.slice(0); fileList.splice(index, 1); - this.$emit('input', fileList); + this.$emit('update:modelValue', fileList); this.$emit('delete', file, this.getDetail(index)); }, @@ -252,7 +254,7 @@ export default createComponent({ return; } - const imageFiles = this.fileList.filter((item) => isImageFile(item)); + const imageFiles = this.modelValue.filter((item) => isImageFile(item)); const imageContents = imageFiles.map((item) => item.content || item.url); this.imagePreview = ImagePreview({ @@ -320,9 +322,10 @@ export default createComponent({ ); - const PreviewCoverContent = this.slots('preview-cover', item); - const PreviewCover = PreviewCoverContent && ( -