公共底部修复完成demo展示正常

config.json

@@ -340,6 +340,13 @@
       "desc": "6位短密码弹层",
       "type": "component",
       "showDemo": true
+    },
+    {
+      "name": "FooterCom",
+      "chnName": "公共底部菜单",
+      "desc": "公共底部菜单",
+      "type": "component",
+      "showDemo": true
     }
   ]
 }

src/demo/footercom.vue

@@ -0,0 +1,134 @@
+<template>
+    <div>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <h5>示例</h5>
+        <p>默认用法</p>
+       <nut-footercom :menuList='footerMenuList1' @changeMenuFn="changeMenuFn"></nut-footercom>
+        <p>仅显示图标</p>
+        <nut-footercom :menuList='footerMenuList2' @changeMenuFn="changeMenuFn"></nut-footercom>
+    </div>
+</template>
+
+<script>
+import Vue from "vue";
+import FooterCom from '../package/footercom/index.js';
+export default {
+  data() {
+    return {
+      code: `
+            //菜单图标文案 数组对象  使用须知：
+            // 1， 数组内对象可用属性共有： iconselect(选中图标)  icon(默认图标)   url(跳转地址)  text(文案)
+            // 2， text(文案) 要配置请全部配置。
+            // 3,  url(跳转地址) 不配置则不做跳转
+            // 4, iconselect(选中图标)  icon(默认图标)  为必选属性
+            export default {
+              data() {
+                return  {
+                  footerMenuList:[
+                      {
+                        iconselect:
+                          "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+                        icon:
+                          "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+                        url: "/orderDetail",
+                        text:'首页'
+                      },
+                      {
+                        iconselect:
+                          "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+                        icon:
+                          "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+                        url: "/orderDetail",
+                        text:'测试1'
+                      },
+                      {
+                        iconselect:
+                          "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+                        icon:
+                          "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+                        url: "/orderDetail",
+                        text:'测试2'
+                      },
+
+                      {
+                        iconselect:
+                          "http://img12.360buyimg.com/uba/jfs/t26998/32/1861936/1307/776501d8/5b7fc73dNf725ab6d.png",
+                        icon:
+                          "http://img13.360buyimg.com/uba/jfs/t22762/195/2428374466/1450/70f02b6/5b7fc73dN45d94c02.png",
+                        text:'测试3'
+                      }
+                    ]
+                }
+              },
+              methods: {
+                changeMenuFn(item) {
+                  console.log(item)
+                },
+              }
+            }
+          `,
+      footerMenuList1: [
+           {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+             url: "/orderDetail",
+             text:'首页'
+           },
+           {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img13.360buyimg.com/uba/jfs/t22762/195/2428374466/1450/70f02b6/5b7fc73dN45d94c02.png",
+             url: "/orderDetail",
+             text:'菜单'
+           },
+           {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+             url: "/orderDetail",
+             text:'我的1'
+           },
+              {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img13.360buyimg.com/uba/jfs/t22762/195/2428374466/1450/70f02b6/5b7fc73dN45d94c02.png",
+             url: "/orderDetail",
+             text:'我的'
+           }
+           ],
+      footerMenuList2: [
+           {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+             url: "/orderDetail"
+           },
+           {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+             url: "/orderDetail"
+           },
+           {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+             url: "/orderDetail"
+           }
+           ]
+    };
+  },
+  methods: {
+    changeMenuFn(item) {
+      console.log(item);
+    }
+  },
+   components: {
+      'nut-footercom': FooterCom
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.footer-wrap{
+    position: relative !important;
+}
+</style>
+
+

src/view/footercom.vue

@@ -8,14 +8,11 @@
         :showQrCode="true"></nut-docheader>
         <!-- DEMO区域 -->
         <h6>默认用法(图标+文字)</h6>
-        <nut-codebox :code="demo1"  imgUrl="../asset/img/demo/footercom2.png"></nut-codebox>
-
+        <nut-codebox imgUrl="../asset/img/demo/footercom4.png" :code="demo1"></nut-codebox>
         <h6>仅显示图标</h6>
         <nut-footercom :menuList='footerMenuList'></nut-footercom>
         <nut-codebox imgUrl="../asset/img/demo/footercom3.png" :code="demo2"></nut-codebox>
-        <h6>均支持2个到4个子菜单</h6>
         <nut-footercom :menuList='footerMenuList'></nut-footercom>
-        <nut-codebox imgUrl="../asset/img/demo/footercom4.png" :code="demo3"></nut-codebox>
         <h6>使用须知与通用数据代码和回调示例</h6>
         <nut-codebox :code="code"></nut-codebox>
         <h5>Props</h5>
@@ -123,8 +120,8 @@ export default {
               }
             }
           `,
-      demo1: `<nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>
-            //配置数据每一项为
+      demo1: `<nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>//配置数据footerMenuList 数组长度支持2到4个子对象，具体看下方使用须知
+            //配置数据每一项为  
            {
              iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
              icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
@@ -139,9 +136,7 @@ export default {
              iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
              icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
              url: "/orderDetail"
-           }  `,
-      demo3: `<nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>//配置数据footerMenuList 数组长度支持2到4个
-      `
+           }`
     };
   },
   methods: {