FooterCom

公共底部菜单

默认用法(图标+文字)
  1. <nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>//配置数据footerMenuList 数组长度支持2到4个子对象，具体看下方使用须知
  2.             //配置数据每一项为  
  3.            {
  4.              iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
  5.              icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
  6.              url: "/orderDetail",
  7.              text:'首页'
  8.            }      
  10.

仅显示图标

  1. <nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>
  2.           //配置数据每一项为
  3.            {
  4.              iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
  5.              icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
  6.              url: "/orderDetail"
  7.            }

使用须知与通用数据代码和回调示例
  2.             //菜单图标文案 数组对象  使用须知：
  3.             // 1， 数组内对象可用属性共有： iconselect(选中图标)  icon(默认图标)   url(跳转地址)  text(文案)
  4.             // 2， text(文案) 要配置请全部配置。
  5.             // 3,  url(跳转地址) 不配置则不做跳转
  6.             // 4, iconselect(选中图标)  icon(默认图标)  为必选属性
  7.             export default {
  8.               data() {
  9.                 return  {
  10.                   footerMenuList:[
  11.                       {
  12.                         iconselect:
  13.                           "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
  14.                         icon:
  15.                           "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
  16.                         url: "/orderDetail",
  17.                         text:'首页'
  18.                       },
  19.                       {
  20.                         iconselect:
  21.                           "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
  22.                         icon:
  23.                           "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
  24.                         url: "/orderDetail",
  25.                         text:'测试1'
  26.                       },
  27.                       {
  28.                         iconselect:
  29.                           "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
  30.                         icon:
  31.                           "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
  32.                         url: "/orderDetail",
  33.                         text:'测试2'
  34.                       },
  36.                       {
  37.                         iconselect:
  38.                           "http://img12.360buyimg.com/uba/jfs/t26998/32/1861936/1307/776501d8/5b7fc73dNf725ab6d.png",
  39.                         icon:
  40.                           "http://img13.360buyimg.com/uba/jfs/t22762/195/2428374466/1450/70f02b6/5b7fc73dN45d94c02.png",
  41.                         text:'测试3'
  42.                       }
  43.                     ]
  44.                 }
  45.               },
  46.               methods: {
  47.                 changeMenuFn(item) {
  48.                   console.log(item)
  49.                 },
  50.               }
  51.             }
  52.

Props
参数说明类型默认值可选值
footerMenuList 菜单图标文案数组配置请参考上方注释Array如图所见选中前后的icon和文字（文字可不配置）—
Events
事件名说明回调参数
changeMenuFn当点击某个菜单时触发被点击菜单的数据对象