diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index 77092cdb5..2250ee746 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -42,7 +42,6 @@ "@types/fs-extra": "^9.0.13", "@types/less": "^3.0.3", "@types/markdown-it": "^12.2.3", - "@types/react": "^18", "@jest/types": "^27", "vue": "^3.2.27", "react": "^18", diff --git a/packages/vant/src/submit-bar/README.md b/packages/vant/src/submit-bar/README.md index 63dbdedf9..349803aeb 100644 --- a/packages/vant/src/submit-bar/README.md +++ b/packages/vant/src/submit-bar/README.md @@ -106,6 +106,7 @@ export default { | disabled | Whether to disable button | _boolean_ | `false` | | loading | Whether to show loading icon | _boolean_ | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | +| placeholder `v3.5.1` | Whether to generate a placeholder element | _boolean_ | `false` | ### Events diff --git a/packages/vant/src/submit-bar/README.zh-CN.md b/packages/vant/src/submit-bar/README.zh-CN.md index 1ac879229..e89b021d1 100644 --- a/packages/vant/src/submit-bar/README.zh-CN.md +++ b/packages/vant/src/submit-bar/README.zh-CN.md @@ -113,6 +113,7 @@ export default { | disabled | 是否禁用按钮 | _boolean_ | `false` | | loading | 是否显示将按钮显示为加载中状态 | _boolean_ | `false` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| placeholder `v3.5.1` | 是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | ### Events diff --git a/packages/vant/src/submit-bar/SubmitBar.tsx b/packages/vant/src/submit-bar/SubmitBar.tsx index 6d85d9bb6..f34f18e27 100644 --- a/packages/vant/src/submit-bar/SubmitBar.tsx +++ b/packages/vant/src/submit-bar/SubmitBar.tsx @@ -1,4 +1,9 @@ -import { defineComponent, type PropType, type ExtractPropTypes } from 'vue'; +import { + ref, + defineComponent, + type PropType, + type ExtractPropTypes, +} from 'vue'; import { truthProp, makeStringProp, @@ -9,6 +14,7 @@ import { // Components import { Icon } from '../icon'; import { Button, ButtonType } from '../button'; +import { usePlaceholder } from '../composables/use-placeholder'; const [name, bem, t] = createNamespace('submit-bar'); @@ -27,6 +33,7 @@ const submitBarProps = { buttonType: makeStringProp('danger'), buttonColor: String, suffixLabel: String, + placeholder: Boolean, decimalLength: makeNumericProp(2), safeAreaInsetBottom: truthProp, }; @@ -41,6 +48,9 @@ export default defineComponent({ emits: ['submit'], setup(props, { emit, slots }) { + const root = ref(); + const renderPlaceholder = usePlaceholder(root, bem); + const renderText = () => { const { price, label, currency, textAlign, suffixLabel, decimalLength } = props; @@ -99,8 +109,9 @@ export default defineComponent({ ); }; - return () => ( + const renderSubmitBar = () => (
{slots.top?.()} @@ -112,5 +123,12 @@ export default defineComponent({
); + + return () => { + if (props.placeholder) { + return renderPlaceholder(renderSubmitBar); + } + return renderSubmitBar(); + }; }, }); diff --git a/packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap index 627cbf97d..6cca54b1d 100644 --- a/packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap @@ -47,6 +47,23 @@ exports[`should render disabled submit button correctly 1`] = ` `; +exports[`should render placeholder element when using placeholder prop 1`] = ` +
+
+
+ +
+
+
+`; + exports[`should render suffix-label correctly 1`] = `
diff --git a/packages/vant/src/submit-bar/test/index.spec.ts b/packages/vant/src/submit-bar/test/index.spec.ts index 9d3742a71..8cfe7aefa 100644 --- a/packages/vant/src/submit-bar/test/index.spec.ts +++ b/packages/vant/src/submit-bar/test/index.spec.ts @@ -1,5 +1,5 @@ import { SubmitBar } from '..'; -import { mount } from '../../../test'; +import { later, mockGetBoundingClientRect, mount } from '../../../test'; test('should emit submit event when submit button is clicked', () => { const wrapper = mount(SubmitBar); @@ -107,3 +107,16 @@ test('should render button slot correctly', () => { }); expect(wrapper.html()).toMatchSnapshot(); }); + +test('should render placeholder element when using placeholder prop', async () => { + const restore = mockGetBoundingClientRect({ height: 50 }); + const wrapper = mount(SubmitBar, { + props: { + placeholder: true, + }, + }); + + await later(); + expect(wrapper.html()).toMatchSnapshot(); + restore(); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55b9c3940..777aa7ae0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -97,7 +97,6 @@ importers: '@types/jest': ^27.0.3 '@types/less': ^3.0.3 '@types/markdown-it': ^12.2.3 - '@types/react': ^18 '@vant/eslint-config': ^3.3.2 '@vant/markdown-vetur': ^2.3.0 '@vant/stylelint-config': ^1.4.2 @@ -145,7 +144,7 @@ importers: '@babel/core': 7.18.0 '@babel/preset-typescript': 7.17.12_@babel+core@7.18.0 '@docsearch/css': 3.1.0 - '@docsearch/js': 3.1.0_71dc17fa2f93091b2e1d43ec53f70836 + '@docsearch/js': 3.1.0_react-dom@18.1.0+react@18.1.0 '@types/jest': 27.5.1 '@vant/eslint-config': link:../vant-eslint-config '@vant/markdown-vetur': link:../vant-markdown-vetur @@ -192,7 +191,6 @@ importers: '@types/fs-extra': 9.0.13 '@types/less': 3.0.3 '@types/markdown-it': 12.2.3 - '@types/react': 18.0.9 react: 18.1.0 react-dom: 18.1.0_react@18.1.0 vue: 3.2.35 @@ -780,10 +778,10 @@ packages: resolution: {integrity: sha512-bh5IskwkkodbvC0FzSg1AxMykfDl95hebEKwxNoq4e5QaGzOXSBgW8+jnMFZ7JU4sTBiB04vZWoUSzNrPboLZA==} dev: false - /@docsearch/js/3.1.0_71dc17fa2f93091b2e1d43ec53f70836: + /@docsearch/js/3.1.0_react-dom@18.1.0+react@18.1.0: resolution: {integrity: sha512-5XSK+xbP0hcTIp54MECqxkWLs6kf7Ug4nWdxWNtx8cUpLiFNFnKXDxCb35wnyNpjukmrx7Q9DkO5tFFsmNVxng==} dependencies: - '@docsearch/react': 3.1.0_71dc17fa2f93091b2e1d43ec53f70836 + '@docsearch/react': 3.1.0_react-dom@18.1.0+react@18.1.0 preact: 10.7.2 transitivePeerDependencies: - '@types/react' @@ -791,7 +789,7 @@ packages: - react-dom dev: false - /@docsearch/react/3.1.0_71dc17fa2f93091b2e1d43ec53f70836: + /@docsearch/react/3.1.0_react-dom@18.1.0+react@18.1.0: resolution: {integrity: sha512-bjB6ExnZzf++5B7Tfoi6UXgNwoUnNOfZ1NyvnvPhWgCMy5V/biAtLL4o7owmZSYdAKeFSvZ5Lxm0is4su/dBWg==} peerDependencies: '@types/react': '>= 16.8.0 < 19.0.0' @@ -800,7 +798,6 @@ packages: dependencies: '@algolia/autocomplete-core': 1.6.3 '@docsearch/css': 3.1.0 - '@types/react': 18.0.9 algoliasearch: 4.13.1 react: 18.1.0 react-dom: 18.1.0_react@18.1.0 @@ -1380,24 +1377,11 @@ packages: resolution: {integrity: sha512-XFjFHmaLVifrAKaZ+EKghFHtHSUonyw8P2Qmy2/+osBnrKbH9UYtlK10zg8/kCt47MFilll/DEDKy3DHfJ0URw==} dev: false - /@types/prop-types/15.7.5: - resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} - - /@types/react/18.0.9: - resolution: {integrity: sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==} - dependencies: - '@types/prop-types': 15.7.5 - '@types/scheduler': 0.16.2 - csstype: 3.1.0 - /@types/responselike/1.0.0: resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==} dependencies: '@types/node': 17.0.35 - /@types/scheduler/0.16.2: - resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} - /@types/stack-utils/2.0.1: resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==} dev: false @@ -2576,9 +2560,6 @@ packages: /csstype/2.6.20: resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==} - /csstype/3.1.0: - resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==} - /dargs/7.0.0: resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==} engines: {node: '>=8'}