调用方法

<div class="hello">
    <AntDiy :leftMenu="leftMenu"></AntDiy>
</div>

// 记得设置下div的宽度和高度
.hello{
    width: 1300px;
    height: 600px;
    border: 1px #42b983 solid;
    background-color: #f2f4f7;
}

左侧导航

左侧导航支持自定义分组,自定义组内图标,同时图标图片、名称都可以自定义,当然我们给大家准备了默认的图标36中类别,和36个图标,大家可以任意修改

leftMenu参数说明

参数 说明 类型
leftMenu 数组 Array
>> title 分组标题 String
>> btns 组中的按钮列表 Array
>>>> type 按钮类型,内置36种类型 String
>>>> title 按钮标题,必须填写,留空则没有标题 String
>>>> img 按钮图片预制36中类型的对应图标,支持自定义,自定义图标大小必须是76px*76px,不自定义设置为’’ String

type 参数说明

参数 说明
member 会员信息
order 订单图标组
memberIcon 常用图标组
goods 商品组
tabbar 选项卡
guess 猜你喜欢
goodsRanking 商品排行
notice 公告
search 搜索框
fixedsearch 固定搜索框
banner 图片轮播
picture 图片
hotspot 热区
pictures 图片展播
cube 魔方
listmenu 列表导航
line 辅助线
title 标题栏
richtext 富文本
blank 辅助空白
audio 音频播放
menu 按钮组
form 表单
video 视频播放
float 浮动按钮
coupon 优惠劵
groups 拼团
seckill 秒杀
countdown 倒计时
bargain 砍价
presell 定价膨胀
wxlive 小程序直播
live 直播带货
popadvertising 弹窗广告
storeLocation 门店定位
storeLise 门店信息
// 完整的36中图标
leftMenu:[
    {
        title: "基础组件",
        btns: [
            {
                type: "member",
                title: "会员信息",
                img: '',
            },{
                type: "order",
                title: "订单图标组",
                img: '',
            },{
                type: "memberIcon",
                title: "常用图标组",
                img: '',
            }
        ]
    },{
        title: "商品类",
        btns: [
             {
                type: "goods",
                title: "商品组",
                img: '',
            },{
                type: "tabbar",
                title: "选项卡",
                img: '',
            },{
                type: "guess",
                title: "猜你喜欢",
                img: '',
            },{
                type: "goodsRanking",
                title: "商品排行",
                img: '',
            }
        ]
    },{
        title: "图文类",
        btns: [
            {
                type: "notice",
                title: "公告",
                img: '',
            },{
                type: "search",
                title: "搜索框",
                img: '',
            },{
                type: "fixedsearch",
                title: "固定搜索框",
                img: '',
            },{
                type: "banner",
                title: "图片轮播",
                img: '',
            },{
                type: "picture",
                title: "图片",
                img: '',
            },{
                type: "hotspot",
                title: "热区",
                img: '',
            },{
                type: "pictures",
                title: "图片展播",
                img: '',
            },{
                type: "cube",
                title: "魔方",
                img: '',
            },{
                type: "listmenu",
                title: "列表导航",
                img: '',
            },{
                type: "line",
                title: "辅助线",
                img: '',
            },{
                type: "title",
                title: "标题栏",
                img: '',
            },{
                type: "richtext",
                title: "富文本",
                img: '',
            },{
                type: "blank",
                title: "辅助空白",
                img: '',
            },{
                type: "audio",
                title: "音频播放",
                img: '',
            },{
                type: "menu",
                title: "按钮组",
                img: '',
            },{
                type: "form",
                title: "表单",
                img: '',
            },{
                type: "video",
                title: "视频播放",
                img: '',
            },{
                type: "float",
                title: "浮动按钮",
                img: '',
            }
        ]
    },{
        title: "营销类",
        btns: [
            {
                type: "coupon",
                title: "优惠劵",
                img: '',
            },{
                type: "groups",
                title: "拼团",
                img: '',
            },{
                type: "seckill",
                title: "秒杀",
                img: '',
            },{
                type: "countdown",
                title: "倒计时",
                img: '',
            },{
                type: "bargain",
                title: "砍价",
                img: '',
            },{
                type: "presell",
                title: "定价膨胀",
                img: '',
            },{
                type: "wxlive",
                title: "小程序直播",
                img: '',
            },{
                type: "live",
                title: "直播带货",
                img: '',
            }
        ]
    },{
        title: "其他组件",
        btns: [
            {
                type: "popadvertising",
                title: "弹窗广告",
                img: '',
            },{
                type: "storeLocation",
                title: "门店定位",
                img: '',
            },{
                type: "storeLise",
                title: "门店信息",
                img: '',
            }
        ]
    }
]

事件

文档更新时间: 2020-07-31 22:14   作者:admin