cv-grid-item 网格菜单

简要

网格菜单，可以配合 cv-grid-group 快速实现菜单布局

示例

<template>
  <view>
    <view class="components-title">
      <view class="components-title-t">cv-grid-item</view>
      <view class="components-title-d">网格菜单</view>
    </view>
    <!-- 使用cv-box包住 -->
    <cv-box col="5">
      <cv-grid-item img="https://h5.10yun.com/static/logo.png" label="网络图片" />
      <cv-grid-item img="/static/logo.png" imgPadding="3" label="会跳转的" url="/pages/layout/cv-grid-item?1=1" />
      <cv-grid-item img="/static/logo.png" label="抢购" />
      <cv-grid-item img="/static/logo.png" label="领券" />
      <cv-grid-item img="/static/logo.png" label="监听click事件的" @click="onUrl('你点到我了哟')" />
      <cv-grid-item img="/static/logo.png" label="红包" />
      <cv-grid-item img="/static/logo.png" label="聚划算" />
      <cv-grid-item img="/static/logo.png" label="美团" />
      <cv-grid-item img="/static/logo.png" label="饿了么" />
      <cv-grid-item img="/static/logo.png" label="淘宝" />
      <cv-grid-item label="camera">
        <cv-icons type="media-camera" />
      </cv-grid-item>
      <cv-grid-item label="cart-filled">
        <cv-icons type="order-cart-filled" />
      </cv-grid-item>
      <cv-grid-item label="无插槽无图片"></cv-grid-item>
      <cv-grid-item label="文本插槽">这是文本插槽</cv-grid-item>
    </cv-box>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    onUrl(url) {
      uni.showToast({
        title: url,
        duration: 2000,
        icon: 'none'
      });
    }
  }
};
</script>

属性

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

插槽

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

事件

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