From 728e28f80cc32a69677f06a6da755bbc0ea583c0 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 25 Jul 2021 19:23:36 +0800 Subject: [PATCH] feat(Uploader): add readonly prop (#9118) * feat(Uploader): add readonly prop * chore: bump deps --- package.json | 6 +- src/uploader/README.md | 1 + src/uploader/README.zh-CN.md | 1 + src/uploader/Uploader.tsx | 8 +- src/uploader/index.less | 4 + .../test/__snapshots__/index.spec.ts.snap | 11 ++ src/uploader/test/index.spec.ts | 10 ++ yarn.lock | 112 +++++++++--------- 8 files changed, 92 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index bfccc1ff3..73e0baab9 100644 --- a/package.json +++ b/package.json @@ -59,10 +59,10 @@ "vue": "^3.0.0" }, "devDependencies": { - "@vant/cli": "^3.11.1", + "@vant/cli": "^3.11.2", "@vant/area-data": "^1.1.1", - "@vue/compiler-sfc": "^3.1.4", - "vue": "^3.1.4" + "@vue/compiler-sfc": "^3.1.5", + "vue": "^3.1.5" }, "sideEffects": [ "es/**/style/*", diff --git a/src/uploader/README.md b/src/uploader/README.md index 60594e8aa..8127b6909 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -300,6 +300,7 @@ export default { | preview-options | Options of full screen image preview，see [ImagePreview](#/en-US/image-preview) | _object_ | - | | multiple | Whether to enable multiple selection pictures | _boolean_ | `false` | | disabled | Whether to disabled the upload | _boolean_ | `false` | +| readonly `v3.1.5` | Whether to make upload area readonly | _boolean_ | `false` | | deletable | Whether to show delete icon | _boolean_ | `true` | | show-upload | Whether to show upload area | _boolean_ | `true` | | lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 5e9ede007..3bb5385b5 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -321,6 +321,7 @@ export default { | preview-options | 全屏图片预览的配置项，可选值见 [ImagePreview](#/zh-CN/image-preview) | _object_ | - | | multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` | | disabled | 是否禁用文件上传 | _boolean_ | `false` | +| readonly `v3.1.5` | 是否将上传区域设置为只读状态 | _boolean_ | `false` | | deletable | 是否展示删除按钮 | _boolean_ | `true` | | show-upload | 是否展示上传区域 | _boolean_ | `true` | | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` | diff --git a/src/uploader/Uploader.tsx b/src/uploader/Uploader.tsx index de6e3eea9..32a4f8c0e 100644 --- a/src/uploader/Uploader.tsx +++ b/src/uploader/Uploader.tsx @@ -60,6 +60,7 @@ export default defineComponent({ capture: String, multiple: Boolean, disabled: Boolean, + readonly: Boolean, lazyLoad: Boolean, uploadText: String, deletable: truthProp, @@ -311,7 +312,7 @@ export default defineComponent({ return; } - const Input = ( + const Input = props.readonly ? null : ( +
{props.uploadText && ( {props.uploadText} diff --git a/src/uploader/index.less b/src/uploader/index.less index 9bf9766cb..1ecfa75c5 100644 --- a/src/uploader/index.less +++ b/src/uploader/index.less @@ -76,6 +76,10 @@ background-color: var(--van-uploader-upload-active-color); } + &--readonly:active { + background-color: var(--van-uploader-upload-background-color); + } + &-icon { color: var(--van-uploader-icon-color); font-size: var(--van-uploader-icon-size); diff --git a/src/uploader/test/__snapshots__/index.spec.ts.snap b/src/uploader/test/__snapshots__/index.spec.ts.snap index 2da10484f..27c162802 100644 --- a/src/uploader/test/__snapshots__/index.spec.ts.snap +++ b/src/uploader/test/__snapshots__/index.spec.ts.snap @@ -266,6 +266,17 @@ exports[`render preview image 1`] = `
`; +exports[`should not render upload input when using readonly prop 1`] = ` +
+
+
+ + +
+
+
+`; + exports[`upload-icon prop 1`] = `
diff --git a/src/uploader/test/index.spec.ts b/src/uploader/test/index.spec.ts index 7ef1f42d6..52b28087a 100644 --- a/src/uploader/test/index.spec.ts +++ b/src/uploader/test/index.spec.ts @@ -609,3 +609,13 @@ test('preview-cover slot', async () => { expect(wrapper.html()).toMatchSnapshot(); }); + +test('should not render upload input when using readonly prop', async () => { + const wrapper = mount(Uploader, { + props: { + readonly: true, + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); diff --git a/yarn.lock b/yarn.lock index 99d01ee69..c0638fd7e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1888,10 +1888,10 @@ resolved "https://registry.nlark.com/@vant/area-data/download/@vant/area-data-1.1.1.tgz#b9acf8a804c0d60f721b6900680299422b006b1a" integrity sha1-uaz4qATA1g9yG2kAaAKZQisAaxo= -"@vant/cli@^3.11.1": +"@vant/cli@^3.11.2": version "3.11.2" - resolved "https://registry.yarnpkg.com/@vant/cli/-/cli-3.11.2.tgz#d6a91160b6d64a8a302bebff1858ef8ea3671b0c" - integrity sha512-8sd61UqKHBsCkc3K1wrymuo9f6JxRFfKbX6nq5rlexygZLmoydKgXL8fpB9w3uhriiJJLt3JKNm6Q8k49IjyeA== + resolved "https://registry.nlark.com/@vant/cli/download/@vant/cli-3.11.2.tgz#d6a91160b6d64a8a302bebff1858ef8ea3671b0c" + integrity sha1-1qkRYLbWSoowK+v/GFjvjqNnGww= dependencies: "@babel/core" "^7.14.5" "@babel/preset-env" "^7.14.5" @@ -2040,37 +2040,37 @@ html-tags "^3.1.0" svg-tags "^1.0.0" -"@vue/compiler-core@3.1.4": - version "3.1.4" - resolved "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.1.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcompiler-core%2Fdownload%2F%40vue%2Fcompiler-core-3.1.4.tgz#a3a74cf52e8f01af386d364ac8a099cbeb260424" - integrity sha1-o6dM9S6PAa84bTZKyKCZy+smBCQ= +"@vue/compiler-core@3.1.5": + version "3.1.5" + resolved "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.1.5.tgz?cache=0&sync_timestamp=1627084218528&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcompiler-core%2Fdownload%2F%40vue%2Fcompiler-core-3.1.5.tgz#298f905b6065d6d81ff63756f98c60876b393c87" + integrity sha1-KY+QW2Bl1tgf9jdW+Yxgh2s5PIc= dependencies: "@babel/parser" "^7.12.0" "@babel/types" "^7.12.0" - "@vue/shared" "3.1.4" + "@vue/shared" "3.1.5" estree-walker "^2.0.1" source-map "^0.6.1" -"@vue/compiler-dom@3.1.4": - version "3.1.4" - resolved "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.1.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcompiler-dom%2Fdownload%2F%40vue%2Fcompiler-dom-3.1.4.tgz#bf3795e1449f32c965d38c4ea6d808ca05fdfc97" - integrity sha1-vzeV4USfMsll04xOptgIygX9/Jc= +"@vue/compiler-dom@3.1.5": + version "3.1.5" + resolved "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.1.5.tgz?cache=0&sync_timestamp=1627084219372&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcompiler-dom%2Fdownload%2F%40vue%2Fcompiler-dom-3.1.5.tgz#cbb97020c62a5faa3fbc2a97916bd98041ac9856" + integrity sha1-y7lwIMYqX6o/vCqXkWvZgEGsmFY= dependencies: - "@vue/compiler-core" "3.1.4" - "@vue/shared" "3.1.4" + "@vue/compiler-core" "3.1.5" + "@vue/shared" "3.1.5" -"@vue/compiler-sfc@^3.1.4": - version "3.1.4" - resolved "https://registry.nlark.com/@vue/compiler-sfc/download/@vue/compiler-sfc-3.1.4.tgz#93e87db950e0711339c18baa7bb7d28d3522d7bc" - integrity sha1-k+h9uVDgcRM5wYuqe7fSjTUi17w= +"@vue/compiler-sfc@^3.1.5": + version "3.1.5" + resolved "https://registry.nlark.com/@vue/compiler-sfc/download/@vue/compiler-sfc-3.1.5.tgz?cache=0&sync_timestamp=1627084192687&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcompiler-sfc%2Fdownload%2F%40vue%2Fcompiler-sfc-3.1.5.tgz#e61e54f3a963b0f4a8e523fbb8632390dc52b0d6" + integrity sha1-5h5U86ljsPSo5SP7uGMjkNxSsNY= dependencies: "@babel/parser" "^7.13.9" "@babel/types" "^7.13.0" "@types/estree" "^0.0.48" - "@vue/compiler-core" "3.1.4" - "@vue/compiler-dom" "3.1.4" - "@vue/compiler-ssr" "3.1.4" - "@vue/shared" "3.1.4" + "@vue/compiler-core" "3.1.5" + "@vue/compiler-dom" "3.1.5" + "@vue/compiler-ssr" "3.1.5" + "@vue/shared" "3.1.5" consolidate "^0.16.0" estree-walker "^2.0.1" hash-sum "^2.0.0" @@ -2082,42 +2082,42 @@ postcss-selector-parser "^6.0.4" source-map "^0.6.1" -"@vue/compiler-ssr@3.1.4": - version "3.1.4" - resolved "https://registry.nlark.com/@vue/compiler-ssr/download/@vue/compiler-ssr-3.1.4.tgz#7f6eaac5b1851fc15c82c083e8179eb1216b303c" - integrity sha1-f26qxbGFH8FcgsCD6BeesSFrMDw= +"@vue/compiler-ssr@3.1.5": + version "3.1.5" + resolved "https://registry.nlark.com/@vue/compiler-ssr/download/@vue/compiler-ssr-3.1.5.tgz?cache=0&sync_timestamp=1627084220709&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcompiler-ssr%2Fdownload%2F%40vue%2Fcompiler-ssr-3.1.5.tgz#f068652774293256a1e53084bed48a67682df9d2" + integrity sha1-8GhlJ3QpMlah5TCEvtSKZ2gt+dI= dependencies: - "@vue/compiler-dom" "3.1.4" - "@vue/shared" "3.1.4" + "@vue/compiler-dom" "3.1.5" + "@vue/shared" "3.1.5" -"@vue/reactivity@3.1.4": - version "3.1.4" - resolved "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.1.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Freactivity%2Fdownload%2F%40vue%2Freactivity-3.1.4.tgz#d926ed46fb0d48582ccf8665b062d37b5d35ba99" - integrity sha1-2SbtRvsNSFgsz4ZlsGLTe101upk= +"@vue/reactivity@3.1.5": + version "3.1.5" + resolved "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.1.5.tgz?cache=0&sync_timestamp=1627084200959&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Freactivity%2Fdownload%2F%40vue%2Freactivity-3.1.5.tgz#dbec4d9557f7c8f25c2635db1e23a78a729eb991" + integrity sha1-2+xNlVf3yPJcJjXbHiOninKeuZE= dependencies: - "@vue/shared" "3.1.4" + "@vue/shared" "3.1.5" -"@vue/runtime-core@3.1.4": - version "3.1.4" - resolved "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.1.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fruntime-core%2Fdownload%2F%40vue%2Fruntime-core-3.1.4.tgz#3e30ae6ecbfff06df5adc9414491143191a375ba" - integrity sha1-PjCubsv/8G31rclBRJEUMZGjdbo= +"@vue/runtime-core@3.1.5": + version "3.1.5" + resolved "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.1.5.tgz?cache=0&sync_timestamp=1627084215662&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fruntime-core%2Fdownload%2F%40vue%2Fruntime-core-3.1.5.tgz#a545b7f146092929cb5e833e85439150f17ac87b" + integrity sha1-pUW38UYJKSnLXoM+hUORUPF6yHs= dependencies: - "@vue/reactivity" "3.1.4" - "@vue/shared" "3.1.4" + "@vue/reactivity" "3.1.5" + "@vue/shared" "3.1.5" -"@vue/runtime-dom@3.1.4": - version "3.1.4" - resolved "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.1.4.tgz#acfeee200d5c45fc2cbdf7058cda1498f9b45849" - integrity sha1-rP7uIA1cRfwsvfcFjNoUmPm0WEk= +"@vue/runtime-dom@3.1.5": + version "3.1.5" + resolved "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.1.5.tgz?cache=0&sync_timestamp=1627084217090&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fruntime-dom%2Fdownload%2F%40vue%2Fruntime-dom-3.1.5.tgz#4fa28947d408aa368fa17ea0edc1beb9af1472a1" + integrity sha1-T6KJR9QIqjaPoX6g7cG+ua8UcqE= dependencies: - "@vue/runtime-core" "3.1.4" - "@vue/shared" "3.1.4" + "@vue/runtime-core" "3.1.5" + "@vue/shared" "3.1.5" csstype "^2.6.8" -"@vue/shared@3.1.4": - version "3.1.4" - resolved "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.1.4.tgz#c14c461ec42ea2c1556e86f60b0354341d91adc3" - integrity sha1-wUxGHsQuosFVbob2CwNUNB2RrcM= +"@vue/shared@3.1.5": + version "3.1.5" + resolved "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03" + integrity sha1-dO46rZldCjmWpruVM9TSgFFO3gM= "@vue/test-utils@2.0.0-rc.6": version "2.0.0-rc.6" @@ -10892,14 +10892,14 @@ vue-router@^4.0.0: resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.4.tgz?cache=0&sync_timestamp=1613740744184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.4.tgz#ad9b4b7bbdad622407b4ff189b1646f48c1e9053" integrity sha1-rZtLe72tYiQHtP8YmxZG9IwekFM= -vue@^3.1.4: - version "3.1.4" - resolved "https://registry.nlark.com/vue/download/vue-3.1.4.tgz#120d6818c51eaa35d0879e5bc1cff60135bc69fd" - integrity sha1-Eg1oGMUeqjXQh55bwc/2ATW8af0= +vue@^3.1.5: + version "3.1.5" + resolved "https://registry.nlark.com/vue/download/vue-3.1.5.tgz#12879b11d0685ee4478c8869551799630a52f9fe" + integrity sha1-EoebEdBoXuRHjIhpVReZYwpS+f4= dependencies: - "@vue/compiler-dom" "3.1.4" - "@vue/runtime-dom" "3.1.4" - "@vue/shared" "3.1.4" + "@vue/compiler-dom" "3.1.5" + "@vue/runtime-dom" "3.1.5" + "@vue/shared" "3.1.5" w3c-hr-time@^1.0.2: version "1.0.2"