feat(ConfigProvider): add tag prop (#8967)

src/config-provider/ConfigProvider.tsx

@@ -23,6 +23,10 @@ export default defineComponent({
 
   props: {
     themeVars: Object as PropType<Record<string, string | number>>,
+    tag: {
+      type: String as PropType<keyof HTMLElementTagNameMap>,
+      default: 'div',
+    },
   },
 
   setup(props, { slots }) {
@@ -33,9 +37,9 @@ export default defineComponent({
     });
 
     return () => (
-      <div class={bem()} style={style.value}>
+      <props.tag class={bem()} style={style.value}>
         {slots.default?.()}
-      </div>
+      </props.tag>
     );
   },
 });

src/config-provider/README.md

@@ -195,6 +195,7 @@ There are some **Basic Variables** below, for component CSS Variables, please re
 
 ### Props
 
-| Attribute  | Description     | Type     | Default |
-| ---------- | --------------- | -------- | ------- |
-| theme-vars | Theme variables | _object_ | -       |
+| Attribute    | Description              | Type     | Default |
+| ------------ | ------------------------ | -------- | ------- |
+| theme-vars   | Theme variables          | _object_ | -       |
+| tag `v3.1.2` | HTML Tag of root element | _string_ | `div`   |

src/config-provider/README.zh-CN.md

@@ -195,6 +195,7 @@ export default {
 
 ### Props
 
-| 参数       | 说明           | 类型     | 默认值 |
-| ---------- | -------------- | -------- | ------ |
-| theme-vars | 自定义主题变量 | _object_ | -      |
+| 参数         | 说明                     | 类型     | 默认值 |
+| ------------ | ------------------------ | -------- | ------ |
+| theme-vars   | 自定义主题变量           | _object_ | -      |
+| tag `v3.1.2` | 根节点对应的 HTML 标签名 | _string_ | `div`  |

src/config-provider/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render tag prop correctly 1`] = `
+<section class="van-config-provider">
+</section>
+`;

src/config-provider/test/index.spec.ts

@@ -0,0 +1,11 @@
+import { ConfigProvider } from '..';
+import { mount } from '../../../test';
+
+test('should render tag prop correctly', () => {
+  const wrapper = mount(ConfigProvider, {
+    props: {
+      tag: 'section',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});