# gg-nav-col 快捷菜单

gg-nav-col

快捷菜单,可以配合 gg-box 快速实现菜单布局

script 中引用组件

若使用uni-app的 easycom 引入方式,则无需在script中重复引用

import ggNavCol from '@/components/gg-nav-col/gg-nav-col.vue'
export default {
    components: {ggNavCol}
}
1
2
3
4

template 中使用组件

<gg-box col="5">
    <gg-nav-col img="https://avatars1.githubusercontent.com/u/26665792?s=60&v=4" label="网络图片"  />
    <gg-nav-col img="/static/logo.png" label="会跳转的" url="/pages/layout/gg-nav-col?1=1" />
    <gg-nav-col img="/static/logo.png" label="抢购" />
    <gg-nav-col img="/static/logo.png" label="领券" />
    <gg-nav-col img="/static/logo.png" label="监听click事件的" @click="onUrl('你点到我了哟')" />
    <gg-nav-col img="/static/logo.png" label="红包" />
    <gg-nav-col img="/static/logo.png" label="聚划算" />
    <gg-nav-col img="/static/logo.png" label="美团" />
    <gg-nav-col img="/static/logo.png" label="饿了么" />
    <gg-nav-col img="/static/logo.png" label="淘宝" />
    <gg-nav-col label="camera">
    <gg-icons type="media-camera" />
    </gg-nav-col>
    <gg-nav-col label="order-cart-filled">
    <gg-icons type="order-cart-filled" />
    </gg-nav-col>
    <gg-nav-col label="无插槽无图片"></gg-nav-col>
    <gg-nav-col label="文本插槽">这是文本插槽</gg-nav-col>
</gg-box>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 属性说明

属性名 类型 默认值 说明
label String - 字段名
img String - 图片地址
url String - 跳转路径
urlType String navigateTo 跳转类型:[navigateTo],[redirectTo],[reLaunch],[switchTab]
col Number 1 横向占用空间 1/n
imgMaxSize Number 40 定义图片最大宽度
imgPadding Number 0 定义图片内边框

# slot

名称 默认值 说明
default - 插槽内容会替代图片[img]参数

# 事件说明

事件名 说明 返回值
@click 点击 Cell 触发事件

# 插件预览地址