ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 01:17:15 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(Uploader): add readonly prop (#9118)

Browse Source 
* feat(Uploader): add readonly prop

* chore: bump deps
This commit is contained in:
neverland
2021-07-25 19:23:36 +08:00
committed by GitHub
parent 2821acb37a
commit 728e28f80c
8 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -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/*",

1
src/uploader/README.md
View File

@@ -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` |

1
src/uploader/README.zh-CN.md
View File

@@ -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` |

8
src/uploader/Uploader.tsx
View File

@@ -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 : (
<input
ref={inputRef}
type="file"
@@ -334,7 +335,10 @@ export default defineComponent({
}
return (
<div class={bem('upload')} style={getSizeStyle(props.previewSize)}>
<div
class={bem('upload', { readonly: props.readonly })}
style={getSizeStyle(props.previewSize)}
>
<Icon name={props.uploadIcon} class={bem('upload-icon')} />
{props.uploadText && (
<span class={bem('upload-text')}>{props.uploadText}</span>

4
src/uploader/index.less
View File

@@ -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);

11
src/uploader/test/__snapshots__/index.spec.ts.snap
View File

@@ -266,6 +266,17 @@ exports[`render preview image 1`] = `
</div>
`;
exports[`should not render upload input when using readonly prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__upload van-uploader__upload--readonly">
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
</i>
</div>
</div>
</div>
`;
exports[`upload-icon prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">

10
src/uploader/test/index.spec.ts
View File

@@ -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();
});

112
yarn.lock
View File

@@ -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"