# 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
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
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 触发事件 |