fix: 修复grid动态设置列数的问题

AntmJS · Aug 11, 2022 · 2d48724 · 2d48724
1 parent e9fe926
commit 2d48724
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 22 deletions.
diff --git a/packages/vantui-cli/site/docs/components/pageLayout/index.js b/packages/vantui-cli/site/docs/components/pageLayout/index.js
@@ -120,22 +120,15 @@ function getMobileUrl() {
   const routers = __vantui_base__?.routers || []
   const current = window.location.hash.replace('#/', '')
 
-  let isHideSimulator = false
-  let defaultUrl = ''
-
+  let useDashboard = false
   for (let i = 0; i < routers.length; i++) {
     const item = routers[i]
-    if (item.isHideSimulator && item.path === current) {
-      isHideSimulator = true
-    }
-    if (!defaultUrl && !item.isHideSimulator) {
-      defaultUrl = item.path
+    if (typeof item.hideSimulator === 'boolean' && item.path === current) {
+      useDashboard = true
     }
   }
 
-  console.info(domain)
-
-  return isHideSimulator
-    ? `${domain}#/pages/${defaultUrl}/index`
+  return useDashboard
+    ? `${domain}#/pages/dashboard/index`
     : `${domain}#/pages/${current}/index`
 }
diff --git a/packages/vantui-demo/config/index.js b/packages/vantui-demo/config/index.js
@@ -149,7 +149,7 @@ const config = {
     devServer: {
       port: 10086,
       hot: true,
-      host: '0.0.0.0',
+      host: 'localhost',
       historyApiFallback: true,
       headers: {
         'Access-Control-Allow-Origin': '*', // 表示允许跨域

diff --git a/packages/vantui-doc/src/grid/README.md b/packages/vantui-doc/src/grid/README.md
@@ -56,7 +56,7 @@ function Demo() {
   return (
     <Grid columnNum="3" border={false}>
       {[1, 2, 3].map((item, index) => (
-        <GridItem forItem="index">
+        <GridItem key={index} forItem="index">
           <Image
             style="width: 100%; height: 90px;"
             src={`https://img.yzcdn.cn/vant/apple-${index + 1}.jpg`}

diff --git a/packages/vantui-doc/src/icon/README.md b/packages/vantui-doc/src/icon/README.md
@@ -133,8 +133,12 @@ import icons from '@vant/icons'
 function Demo() {
   return (
     <>
-      {icons.basic.map((name) => (
-        <Col span="6" style={{ paddingTop: '20px', paddingBottom: '20px' }}>
+      {icons.basic.map((name, i) => (
+        <Col
+          key={i}
+          span="6"
+          style={{ paddingTop: '20px', paddingBottom: '20px' }}
+        >
           <Icon name={name} size="32px" />
           <Text>{name}</Text>
         </Col>
@@ -151,8 +155,9 @@ import icons from '@vant/icons'
 function Demo() {
   return (
     <>
-      {icons.outline.map((name) => (
+      {icons.outline.map((name, i) => (
         <Col
+          key={i}
           span="6"
           style={{ paddingTop: '20px', paddingBottom: '20px', height: '100px' }}
         >
@@ -172,8 +177,9 @@ import icons from '@vant/icons'
 function Demo() {
   return (
     <>
-      {icons.filled.map((name) => (
+      {icons.filled.map((name, i) => (
         <Col
+          key={i}
           span="6"
           style={{ paddingTop: '20px', paddingBottom: '20px', height: '100px' }}
         >

diff --git a/packages/vantui/src/grid-item/index.tsx b/packages/vantui/src/grid-item/index.tsx
@@ -43,10 +43,14 @@ export function GridItem(
     [index, setChildrenInstance],
   )
 
-  useEffect(function () {
-    updateStyle()
+  useEffect(
+    function () {
+      updateStyle()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    [parentInstance.columnNum],
+  )
 
   const updateStyle = useCallback(
     function () {

diff --git a/packages/vantui/src/grid/index.tsx b/packages/vantui/src/grid/index.tsx
@@ -71,7 +71,7 @@ export function Grid(props: GridProps) {
       return res
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [others.children],
+    [others.children, columnNum],
   )
 
   return (