Wot Design Uni1.2.20

Appearance

Grid 宫格 ​

代码演示 ​

基础用法 ​

基础用法需要绑定 icon 值以及 text 属性。默认显示一行。

icon 为 wd-icon 标签中的 name 属性。

html
<wd-grid>
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

自定义列数 ​

column 可以用来自定义宫格列数。未定义 column 属性时，默认显示为一行，定义该属性后，组件内部根据 column 属性自行划分行数。

html
<wd-grid :column="3">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

自定义背景颜色 ​

bg-color 可以用来自定义宫格背景颜色。

html
<wd-grid bg-color="rgba(0, 0, 0, 0.02)">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

开启边框 ​

border 可以用来开启边框线展示。

html
<wd-grid border :column="3">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

内容插槽 ​

通过默认插槽可以自定义 GridItem 的内容。

使用默认插槽过程中, 开启 GridItem 上的属性 use-slot。

html
<wd-grid>
  <wd-grid-item use-slot>
    <image class="img" :src="joy" />
  </wd-grid-item>
  <wd-grid-item use-slot>
    <image class="img" :src="joy" />
  </wd-grid-item>
  <wd-grid-item use-slot>
    <image class="img" :src="joy" />
  </wd-grid-item>
</wd-grid>
scss
.img {
  width: 100%;
  height: 90px;
}

单个插槽 ​

通过插槽 icon 可以插入 GridItem 中的图标位。通过 use-icon-slot 开启图标插槽。

通过插槽 text 可以插入 GridItem 中的文字位。通过 use-text-slot 开启文字插槽。

注意:

  1. 使用单个插槽或者自定义样式时，需要用户使用 custom-class 控制 每一个 GridItem 的高度，保证每一个 GridItem 的高度相同且符合用户预期。

  2. 使用 icon 插槽时，如果插槽大小超过icon-size设置的值时，需要调整icon-size属性使其大小等于插槽尺寸。

html
<wd-grid>
  <wd-grid-item use-icon-slot text="文字" v-for="index in 3" :key="index" icon-size="36px">
    <template #icon>
      <image class="slot-img" :src="joy" />
    </template>
  </wd-grid-item>
</wd-grid>
<wd-grid>
  <wd-grid-item use-text-slot icon="picture" v-for="index in 3" :key="index">
    <template #text>
      <view class="text">自定义文字插槽</view>
    </template>
  </wd-grid-item>
</wd-grid>
scss
.slot-img {
  height: 36px;
  width: 36px;
  border-radius: 4px;
}
.text {
  color: #ffb300;
  margin-top: 8px;
}

自定义样式 ​

通过设置 custom-class 可以自定义 GridItem 的样式。

可以在 custom-class 样式属性中设定 GridItem 的宽、高度等属性。

注意:

  • 设定宽高这类可能会影响布局的属性时，请将 custom-class 作用到当前 Grid 下的所有 GridItem 以确保所有 GridItem 样式相同。

  • 如果想改变 GridItem 高度, 不要直接设置 Grid 的高度, 修改单独的 GridItem。

  • 如果想改变 icon 大小设置 icon-size 属性, custom-icon 不能改变当前 icon 宽高。

html
<wd-grid>
  <wd-grid-item
    custom-class="custom-item"
    icon="search"
    text="京东JD.COM-专业的综合网上购物商城，销售超数万品牌、4020万种商品，囊括家电、手机、电脑、母婴、服装等13大品类。"
  />
  <wd-grid-item custom-class="custom-item" icon="person" text="秉承客户为先的理念，京东所售商品为正品行货、全国联保、机打发票。" />
</wd-grid>
scss
:deep(.custom-item) {
  height: 80px !important;
  color: #e2231a;
  padding-left: 20px;
  text-align: left !important;
}

正方形格子 ​

通过 square 属性开启正方形格属性。此时显示每一个 GridItem 都为正方形。

注意: 使用 square 不要自定义 GridItem 的高度样式。

html
<wd-grid square :column="3">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

设定格间隙 ​

通过 gutter 属性设置格子之间的距离。

html
<wd-grid :gutter="10" :column="3">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

页面导航 ​

通过 clickable 属性开启可点击状态, 可以绑定 click 事件。

通过 link-type 属性设置页面跳转方式。

通过 url 属性设置跳转链接, 通过 url 属性设置 URL 跳转链接。

html
<wd-grid clickable>
  <wd-grid-item link-type="redirectTo" url="/pages/button/index" @itemclick="click" icon="search" text="Redirect to ..." />
  <wd-grid-item link-type="navigateTo" url="/pages/button/index" @itemclick="click" icon="setting" text="Navigate to ..." />
</wd-grid>

提示信息 ​

设置 is-dot 属性后，会在图标右上角展示一个小红点。

设置 type | max | value , 使用方式同组件 wd-badge 中的同名属性。

html
<wd-grid>
  <wd-grid-item is-dot icon="goods" text="文字" />
  <wd-grid-item value="100" :max="99" icon="computer" text="文字" />
</wd-grid>

Grid Attributes ​

参数说明类型可选值默认值最低版本
column列数number---
border是否显示边框boolean-false-
gutter格子之间的间距，默认单位为pxnumber---
square是否将格子固定为正方形boolean-false-
clickable是否开启格子点击反馈boolean-false-
bg-color背景颜色设置string-#ffffff-

GridItem Attributes ​

参数说明类型可选值默认值最低版本
text文字 valuestring---
icon图标名称，可选值见 wd-icon 组件string---
is-dot是否显示图标右上角小红点boolean-false-
type图标右上角显示的 badge 类型stringprimary / success / warning / danger / info--
value图标右上角 badge 显示值string, number---
max图标右上角 badge 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型number---
url点击后跳转的链接地址string---
link-type页面跳转方式, 参考微信小程序路由文档stringnavigateTo / switchTab / reLaunch--
use-slot是否开启 GridItem 内容插槽boolean-false-
use-icon-slot是否开启 GridItem icon 插槽boolean-false-
use-text-slot是否开启 GridItem text 内容插槽boolean-false-
icon-size图标大小string-26px-
badge-props自定义徽标的属性，传入的对象会被透传给 Badge 组件的 propsBadgeProps--0.1.50

GridItem Events ​

方法名说明参数返回值最低版本
itemclick点击(跳转)事件event--

Grid Slot ​

name说明最低版本
default宫格内容-

GridItem Slot ​

name说明最低版本
default宫格中每一格的默认显示全部内容-
icon宫格中图标位内容-
text宫格中文本位内容-

Grid 外部样式类 ​

类名说明最低版本
custom-classGrid 根节点样式-

GridItem 外部样式类 ​

类名说明最低版本
custom-classGridItem 根节点样式-
custom-textGridItem 下方文字样式-
custom-iconGridItem 上方 icon 样式-

Released under the MIT License.

Copyright © 2023-present weisheng

Released under the MIT License.

Copyright © 2023-present weisheng