# HZG-VantPluginSourceCode

**Repository Path**: huozige-technical-team/hzg-vant-plugin

## Basic Information

- **Project Name**: HZG-VantPluginSourceCode
- **Description**: 活字格UI组件-手机组件包-Vant插件源代码
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 2
- **Created**: 2022-09-27
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vant Plugin


## 目录

*   [说明](#说明)

*   [Vant 单元格类型](#vant-单元格类型)

    *   *   [V-日历](#v-日历)

        *   [V-级联选择器](#v-级联选择器)

        *   [V-环形进度条](#v-环形进度条)

        *   [V-时间选择器](#v-时间选择器)

        *   [V-宫格](#v-宫格)

        *   [V-输入框](#v-输入框)

        *   [V-数字键盘输入框](#v-数字键盘输入框)

        *   [V-通知栏](#v-通知栏)

        *   [V-分页](#v-分页)

        *   [V-进度条](#v-进度条)

        *   [V-评分](#v-评分)

        *   [V-选择器](#v-选择器)

        *   [V-滑块](#v-滑块)

        *   [V-步进器](#v-步进器)

        *   [V-步骤条](#v-步骤条)

        *   [V-轮播图](#v-轮播图)

        *   [V-标签页头](#v-标签页头)

        *   [V-标签](#v-标签)

        *   [V-时间线](#v-时间线)

        *   [V-文件上传](#v-文件上传)

*   [Vant 命令](#vant-命令)

    *   *   [V-轻提示](#v-轻提示)

        *   [V-关闭轻提示](#v-关闭轻提示)

        *   [V-弹窗](#v-弹窗)

        *   [V-消息通知](#v-消息通知)

*   [Vant自定义](#vant自定义)

    *   *   [自定义V-日历](#自定义v-日历)

        *   [自定义V-级联选择器](#自定义v-级联选择器)

        *   [自定义V-时间选择器](#自定义v-时间选择器)

        *   [自定义V-宫格](#自定义v-宫格)

        *   [自定义V-选择器](#自定义v-选择器)

        *   [自定义V-轮播图](#自定义v-轮播图)

# Vant插件说明

## 说明

手机端更加现代美化的组件库。

***

***

## Vant 单元格类型

#### V-日历

**使用场景**

*   可以直接创建一个日历

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_HAxkKmtTX9.png)

**策略**

*

\*\*
设计时\*\*​

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_vBXPy4Rkrn.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_wA7ZKOWviK.png)

**单元格设置**

| 名称                | 说明                           |
| ----------------- | ---------------------------- |
| 编辑点击命令            | 当日期单元格被点击时触发                 |
| 单元格权限             | 基于用户角色控制可见/可用权限              |
| 类型                | 选择单个日期/选择多个日期/选择范围日期         |
| 默认值               | 可设置日期字符串或者OADate             |
| 最小日期              | 选择最小日期                       |
| 最大日期              | 选择最大日期                       |
| 最多可选天数            | 必须选择多个日期/选择范围日期类型。设置最大可选天数数量 |
| 周起始日              |                              |
| 主题色               |                              |
| 是否显示月份背景水印        |                              |
| 是否显示日历副标题(年月)     |                              |
| 只读                |                              |
| 是否允许日期范围的起止时间为同一天 | 必须选择范围日期类型。设置是否允许起止日期相同      |

***

#### V-级联选择器

**使用场景**

*   如果选项具有清晰的层次结构，则可以使用 V-级联选择器来查看和选择。

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_XCKy44NYDr.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_ycKyy2DQat.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_lA0NH3bu0H.png)

**单元格设置**

| 名称              | 说明                                                                                                                                                                                                       |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 编辑命令            | 值变更时时执行的命令                                                                                                                                                                                               |
| 数据验证            | 配置单元格数据验证，仅在更新命令执行或请求服务器命令执行时验证                                                                                                                                                                          |
| 单元格权限           | 基于用户角色控制可见/可用权限                                                                                                                                                                                          |
| 默认值             |                                                                                                                                                                                                          |
| 选项来自数据库         | 设置数据源是否绑定数据库                                                                                                                                                                                             |
| 配置选项            | 数据不来自数据库时，配置选项                                                                                                                                                                                           |
| 绑定数据源           | 必须选项来自数据库。除了选择项、查询条件、行数等类似数据表查询的设置外，还有一个其他设置，可以设置开启缓存并设置缓存过期时间。此处缓存是指查询结果会放在服务器的内存中，直到过期，在高并发场景下，相同查询不会反复访问数据库，可以大幅降低数据库压力。

此外，保留的缓存不可以设置权限过滤，所以开启缓存后，为不同用户设置的不同查询结果是不会生效的。如需权限控制查询内容，请不要开启此功能。 |
| 占位文本            |                                                                                                                                                                                                          |
| 左侧图标            |                                                                                                                                                                                                          |
| 右侧图标            |                                                                                                                                                                                                          |
| 显示内边框           |                                                                                                                                                                                                          |
| 显示清除按钮          |                                                                                                                                                                                                          |
| 只读              |                                                                                                                                                                                                          |
| 禁用              |                                                                                                                                                                                                          |
| 可用操作            | 直接拖拽可用操作到页面上，自动生成操作单元格命令                                                                                                                                                                                 |
| 可用操作-弹出选择框      |                                                                                                                                                                                                          |
| 可用操作-设置数据源(对象树) | 使用动态 JSON 对象树作为数据源，JSON 格式示例见备注。
示例中假设'值属性'为value，'标签属性名'为label，'下级属性名'为'children'。
通常，JSON数据源可以通过HTTP请求命令从Web服务获取，也可以通过服务端命令获取                                                                  |
| 可用操作-设置数据源(二维表) | 使用二维表JSON对象树作为数据源，JSON 格式示例见备注。
示例中假设‘值属性’为value，‘标签属性名’为label，‘父级值属性’为‘parentValue’。
二维表格式是数据库中常见的多级数据保存格式。                                                                                     |

**备注**

*   对象树-JSON

```纯文本
[
    {
        "value": 1,
        "label": "Department1",
        "children": [
            {
                "value": 2,
                "label": "Sub-department1"
            },
            {
                "value": 3,
                "label": "Sub-department2",
                "children": [
                    {
                       "value": 4,
                       "label": "Sub-department2-1"
                    }
                ]
            }
        ]
    },
    {
        "value": 5,
        "label": "Department2"
    },
    {
        "value": 6,
        "label": "Department3"
    }
]
```

*   二维表-JSON

```纯文本
[
    {"value": 1, "label": "Department1", "parentValue": null},
    {"value": 2, "label": "Department1-1", "parentValue": 1},
    {"value": 3, "label": "Department1-2", "parentValue": 1},
    {"value": 4, "label": "Department1-2-1", "parentValue": 3},
    {"value": 5, "label": "Department2", "parentValue": null},
    {"value": 6, "label": "Department3", "parentValue": null}
]
```

***

#### V-环形进度条

**使用场景**

*   可以通过进度条展示数字

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_Dr7xaBqGPg.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_2XGamwNj9H.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_j3zrmPulGm.png)

**单元格设置**

| 名称            | 说明                       |
| ------------- | ------------------------ |
| 编辑值变更命令       |                          |
| 默认值           |                          |
| 自定义显示文本       |                          |
| 进度条颜色         | 设置进度条颜色                  |
| 轨道颜色          | 设置轨道（即未填充进度）颜色           |
| 填充颜色          | 设置进度圆环内圆形的颜色             |
| 圆环直径(单位:像素)   |                          |
| 进度条宽度(单位:像素)  |                          |
| 进度条端点形状       |                          |
| 动画速度(单位:进度/秒) | 设置进度条增长动画的速度             |
| 进度条起始位置       | 上/下/左/右                  |
| 顺时针增加         | 勾选后进度为顺时针增长，不勾选为逆时针增长    |
|               |                          |
| 可用操作          | 直接拖拽可用操作到页面上，自动生成操作单元格命令 |
|               |                          |

***

#### V-时间选择器

**优劣对比**

与活字格内置单元格类型-时间、日期对比

优势：

*   更现代的UI界面

*   支持左侧图标

*   支持右侧图标

*   支持清空按钮

*   结合了日期单元格类型和时间单元格类型

劣势

*   不支持添加进表格

*   不支持获得焦点时全选文本内容

*   不支持设置单元格样式

*   不支持使用单元格格式

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_eSqh5u31RX.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_CztdPhRvf5.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_rSrXGvDLku.png)

**单元格设置**

| 名称         | 说明                         |
| ---------- | -------------------------- |
| 编辑命令       |                            |
| 数据验证       |                            |
| 单元格权限      |                            |
| 默认值        |                            |
| 选择类型       | 年月日/年月/年日/年月日小时/年月日小时分钟/时间 |
| 最小日期       |                            |
| 最大日期       |                            |
| 最小小时       | 必须时间类型。                    |
| 最大小时       | 必须时间类型。                    |
| 最大分钟       | 必须时间类型。                    |
| 最小分钟       | 必须时间类型。                    |
| 占位文本       |                            |
| 左侧图标       |                            |
| 右侧图标       |                            |
| 显示边框       |                            |
| 显示清除按钮     |                            |
| 只读         |                            |
| 禁用         |                            |
| 弹出框设置      | 设置弹出框的顶部标题文本、确认按钮文本等细节     |
| 可用操作       | 直接拖拽可用操作到页面上，自动生成操作单元格命令   |
| 可用操作-弹出选择框 |                            |

***

#### V-宫格

**使用场景**

*   用于手机场景下得到导航

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_IvYwA8xr2n.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_HB4Sm1MZVp.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_KgiKF7LYP4.png)

**单元格设置**

| 名称            | 说明                            |
| ------------- | ----------------------------- |
| 编辑命令          | 点击单元格时执行的命令                   |
| 选项来自数据库       |                               |
| 配置项目          |                               |
| 绑定数据源         |                               |
| 格子内容排列方向      | 水平/方向                         |
| 宫格列数          |                               |
| 图标大小(单位:像素)   |                               |
| 格子间的间距(单位:像素) | 设置格子间距距离                      |
| 显示边框          |                               |
| 居中显示格子内容      |                               |
| 格子固定为正方形      |                               |
| 调整图标和文本位置     | 不勾选时文本位于图标下方，勾选后本位位于图标上方      |
| 可用操作          | 直接拖拽可用操作到页面上，自动生成操作单元格命令      |
| 可用操作-设置徽标     | 根据目标值（格子值）选择对应的格子，设置徽标（消息红点）值 |

***

#### V-输入框

**优劣对比**

与活字格内置单元格类型-文本框对比

优势：

*   更现代的UI界面

*   支持设置最大输入长度并进行字数统计

*   支持左侧、右侧图标

*   支持添加清空按钮

*   提供了两个可用操作

劣势

*   不支持添加进表格

*   不支持值唯一校验

*   不支持获得焦点时全选文本内容

*   不支持设置单元格格式

*   不支持设置单元格样式

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_QwT864rLqf.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_bsepNZP8Zl.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_9wsYHHYu0O.png)

**单元格设置**

| 名称        | 说明                                        |
| --------- | ----------------------------------------- |
| 编辑命令      | 值变更时执行命令                                  |
| 数据验证      |                                           |
| 单元格权限     | 基于用户角色控制可见性/可用性/可编辑性权限                    |
| 默认值       |                                           |
| 输入框类型     | 文本框/多行文本框/密码框                             |
| 键盘类型      | 文本/电话键盘/纯数字键盘/带符号的纯数字键盘/日期/日期时间/时间/邮件/URL |
| 最大长度      |                                           |
| 显示字数统计    |                                           |
| 占位文本      |                                           |
| 左侧图标      |                                           |
| 右侧图标      |                                           |
| 显示内边框     |                                           |
| 显示清除按钮    |                                           |
| 只读        |                                           |
| 禁用        |                                           |
| 可用操作      | 直接拖拽可用操作到页面上，自动生成操作单元格命令                  |
| 可用操作-设置焦点 |                                           |
| 可用操作-选中文字 |                                           |

**限制**

*   当输入框类型为多行文本框时，左侧图标、右侧图标和清除按钮将不会生效

***

#### V-数字键盘输入框

**优劣对比**

与活字格内置单元格类型-数字对比

优势：

*   更现代的UI界面

*   支持设置最大长度

劣势

*   不支持添加进表格

*   不支持千分位

*   不支持设置单元格样式

*   不支持使用单元格格式

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_IqQmISnOzp.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_VXL2UueObs.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_CIclg_a1_f.png)

**单元格设置**

| 名称          | 说明                                                                                                         |
| ----------- | ---------------------------------------------------------------------------------------------------------- |
| 编辑命令        | 点击单元格时执行的命令                                                                                                |
| 数据验证        |                                                                                                            |
| 单元格权限       |                                                                                                            |
| 默认值         |                                                                                                            |
| 最大长度        | 设置输入数字的最大长度                                                                                                |
| 占位文本        |                                                                                                            |
| 左侧图标        |                                                                                                            |
| 右侧图标        |                                                                                                            |
| 显示内边框       |                                                                                                            |
| 显示清除按钮      |                                                                                                            |
| 值转为数字       | 是否把输入的值转为数字，把值转为数字会方便公式计算或保存值到数字类型的数据库中
缺点是如果输入“001”会自动变为“1”，输入特别大的数字会损失精度。
如果不勾选此选项，会使用字符串作为单元格的值 |
| 只读          |                                                                                                            |
| 禁用          |                                                                                                            |
| 数字键盘设置      | 设置数字键盘的细节                                                                                                  |
| 可用操作        | 直接拖拽可用操作到页面上，自动生成操作单元格命令                                                                                   |
| 可用操作-弹出数字键盘 |                                                                                                            |

***

#### V-通知栏

**使用场景**

*   用于通知

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_drQdIudEYT.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_bYq6TwOacp.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_sWUxFRrPQ-.png)

**单元格设置**

| 名称            | 说明               |
| ------------- | ---------------- |
| 编辑命令          | 通知栏被点击时执行命令      |
| 通知栏内容         | 设置通知的内容          |
| 通知栏按钮         | 无/关闭按钮/链接按钮      |
| 左侧图标          |                  |
| 滚动播放          | 关闭滚动播放/水平滚动/垂直滚动 |
| 动画延迟时间(单位:秒)  | 必须水平滚动模式下。       |
| 滚动速率(像素/秒)    | 必须水平滚动模式下。       |
| 自动轮播间隔(单位:毫秒) | 必须垂直滚动模式下。       |
| 动画时长(单位:毫秒)   | 必须垂直滚动模式下。       |

***

#### V-分页

**优劣对比**

与活字格内置单元格类型-分页导航按钮对比

优势：

*   更现代的UI界面

*   允许用户在运行中更改每页展示行数

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_daPeGDd5V3.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_tbkdV-gc98.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_F4Q29u3VnO.png)

**单元格设置**

| 名称            | 说明                                           |
| ------------- | -------------------------------------------- |
| 分页变更命令        | 当页面索引由用户通过界面操作变更时调用命令                        |
| 单元格权限选择表      | 选择分页的目标表格
如果多个分页单元格被绑定在同一个表格上，它们的设置将会被同步 |
| 显示模式          | 多项/简单                                        |
| 最大页码按钮显示数     |                                              |
| 每页显示行数        |                                              |
| 上一页文本         |                                              |
| 下一页文本         |                                              |
| 显示省略号         |                                              |
| 只有一页时隐藏       |                                              |
| 可用操作          | 直接拖拽可用操作到页面上，自动生成操作单元格命令                     |
| 可用操作-设置每页显示行数 |                                              |
| 可用操作-设置当前页码   |                                              |
| 可用操作-设置总行数    |                                              |
| 可用操作-执行命令     |                                              |

***

#### V-进度条

**使用场景**

*   可以通过进度条展示数字

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_83ETnqgN8N.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_i13r4jAwya.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_79lFUG8cTV.png)

**单元格设置**

| 名称           | 说明                       |
| ------------ | ------------------------ |
| 编辑值变更命令      | 点击单元格时执行的命令              |
| 默认值          |                          |
| 进度条宽度(单位:像素) | 设置进度条宽度                  |
| 进度条颜色        | 设置进度条（生效进度）颜色            |
| 轨道颜色         | 设置轨道（未生效进度）颜色            |
| 显示进度文本       | 设置是否显示进度文本               |
| 自定义显示文本      | 必须显示进度文本。                |
| 进度条文本背景色     | 必须显示进度文本。                |
| 可用操作         | 直接拖拽可用操作到页面上，自动生成操作单元格命令 |
| 可用操作-更改进度条状态 |                          |

***

#### V-评分

**使用场景**

*   可用于打分

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_q5l2tmvt1w.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_jAuaLXTgmy.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_So2YqlnZIJ.png)

**单元格设置**

| 名称          | 说明        |
| ----------- | --------- |
| 编辑命令        | 值变更时执行命令  |
| 单元格权限       |           |
| 默认分值        |           |
| 图标数量        |           |
| 图标大小(单位:像素) | 设置图标大小    |
| 图标间距(单位:像素) | 设置图标间距    |
| 选中图标的颜色     |           |
| 未选中图标的颜色    |           |
| 禁用图标        |           |
| 禁用图标时的颜色    |           |
| 允许半选        | 设置后可以选择半星 |
| 可以通过滑动手势评分  |           |
| 只读          |           |

***

#### V-选择器

**优劣对比**

与活字格内置单元格类型-组合框按钮对比

优势：

*   更现代的UI界面

劣势：

*   不支持添加进表格

*   不支持获得焦点时全选文本内容

*   不支持设置单元格样式

*   不支持使用单元格格式

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_H06Zu94Uty.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_L0KEcs425D.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_agtI5vkeJO.png)

**单元格设置**

| 名称                | 说明                                                                                                                                                                                                                             |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 编辑命令              |                                                                                                                                                                                                                                |
| 数据验证              |                                                                                                                                                                                                                                |
| 单元格权限             |                                                                                                                                                                                                                                |
| 默认值               |                                                                                                                                                                                                                                |
| 选项来自数据库           | 如果设置选项来自数据库，V-选择器会自动移除重复选项                                                                                                                                                                                                     |
| 配置选项              |                                                                                                                                                                                                                                |
| 绑定数据源             | 必须选项来自数据库。设置值、行数、排序、缓存等                                                                                                                                                                                                        |
| 添加空项              | 必须选项来自数据库。                                                                                                                                                                                                                     |
| 占位文本              |                                                                                                                                                                                                                                |
| 左侧图标              |                                                                                                                                                                                                                                |
| 右侧图标              |                                                                                                                                                                                                                                |
| 显示内边框             |                                                                                                                                                                                                                                |
| 显示清除按钮            |                                                                                                                                                                                                                                |
| 只读                |                                                                                                                                                                                                                                |
| 禁用                |                                                                                                                                                                                                                                |
| 弹出框设置             |                                                                                                                                                                                                                                |
| 可用操作              | 直接拖拽可用操作到页面上，自动生成操作单元格命令                                                                                                                                                                                                       |
| 可用操作-弹出选择框        |                                                                                                                                                                                                                                |
| 可用操作-设置数据源（字符串数组） | 使用动态 JSON 字符串数组作为单元格的数据源，例如：
\[
"香蕉",
"苹果",
"鸭梨"
]
通常，数据源可以通过HTTP请求命令从Web服务获取，也可以通过服务端命令获取                                                                                                             |
| 可用操作-设置数据源（对象数组）  | 使用动态 JSON 字符串数组作为单元格的数据源，例如：
\[
{"value": 1, "label": "香蕉"},
{"value": 2, "label": "苹果"},
{"value": 3, "label": "鸭梨"}
]
以上数据假设‘值属性’为value，‘显示文本’为label
通常，JSON数据源可以通过HTTP请求命令从Web服务获取，也可以通过服务端命令获取 |
| 可用操作-获取显示文本       |                                                                                                                                                                                                                                |

**限制**

*   以下情况下，绑定数据库源后查询行数会返回异常

    1.  使用从数据库生成选项，但数据源中有重复数据

    2.  设置查询行数

    3.  返回结果可能小于查询行数的设定值。因为选择器会自动去重，且这步操作在数据源查询后，所以当数据源查询的结果行中有重复数据时，选项会变少。（例如：数据库查询结果为：1,1,2,2,3,...，但设定了查询行数为3，则返回1,1,2给EL-选择器作为选项，此时选择器自动去重，导致最后选项只有2项为1和2）

***

#### V-滑块

**使用场景**

*   固定范围内可拖拽的滑块

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_pSd1I9OyiX.png)

**策略**

*   当开启双滑块模式时，单元格值为一组被逗号分割的数字组成的字符串

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_rw4iTgeZpP.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_bp--H6LtLV.png)

**单元格设置**

| 名称            | 说明                         |
| ------------- | -------------------------- |
| 编辑命令          |                            |
| 单元格权限         |                            |
| 默认值           |                            |
| 最小值           |                            |
| 最大值           |                            |
| 步长            |                            |
| 布局            | 横向/竖向                      |
| 进度条高度(单位:像素)  |                            |
| 滑块按钮大小(单位:像素) |                            |
| 进度条激活态颜色      | 设置激活进度的颜色                  |
| 进度条非激活态颜色     | 设置进度条底色                    |
| 开启双滑块模式       | 开启后展示两个滑块，可以选择一个范围         |
| 进度条反转         | 开启后反转进度条，进度条变为从右向左/从下向上滑动。 |
| 禁用            |                            |
| 只读            |                            |

***

#### V-步进器

**优劣对比**

与活字格内置单元格类型-数字对比

优势：

*   更现代的UI界面

*   支持设置最大/最小输入值

劣势

*   不支持添加进表格

*   不支持获得焦点时全选文本内容

*   不支持千分位

*   不支持设置单元格样式

*   不支持使用单元格格式

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_Ay7WTtbq28.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_J9UpRM5iSd.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_xfPbZiiEOo.png)

**单元格设置**

| 名称         | 说明                       |
| ---------- | ------------------------ |
| 编辑命令       | 值变更时触发命令                 |
| 数据验证       |                          |
| 单元格权限      |                          |
| 默认值        |                          |
| 最小值        |                          |
| 最大值        |                          |
| 步长         |                          |
| 小数位数       |                          |
| 占位文本       | 仅内容为空时显示                 |
| 风格样式       | 方形/圆形                    |
| 按钮大小       |                          |
| 只允许输入整数    |                          |
| 允许输入的值为空   |                          |
| 显示输入框      |                          |
| 显示增加按钮     |                          |
| 显示减少按钮     |                          |
| 禁用         |                          |
| 禁用输入框      |                          |
| 开启长按手势     | 设置是否允许长摁改变内容值            |
| 可用操作       | 直接拖拽可用操作到页面上，自动生成操作单元格命令 |
| 可用操作-设置最小值 |                          |
| 可用操作-设置最大值 |                          |
| 可用操作-设置步长  |                          |
| 可用操作-设置焦点  |                          |

***

#### V-步骤条

**使用场景**

*   引导用户按照流程完成任务，各个步骤可根据实际应用场景设置

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_XDLENinPeC.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_5iEMDG5R6e.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_xgeUQiGzGd.png)

**单元格设置**

| 名称                  | 说明                       |
| ------------------- | ------------------------ |
| 编辑值变更命令             |                          |
| 默认值                 |                          |
| 数据库生成步骤项目           |                          |
| 配置步骤项目              |                          |
| 绑定数据源               |                          |
| 步骤条方向               | 水平/竖直                    |
| 当前步骤图标              |                          |
| 已完成步骤图标             |                          |
| 当前步骤及已完成步骤颜色        |                          |
| 非当前步骤图标             |                          |
| 非当前步骤颜色             |                          |
| 可用操作                | 直接拖拽可用操作到页面上，自动生成操作单元格命令 |
| 可用操作-更改当前步骤图标       |                          |
| 可用操作-更改当前步骤及已完成步骤颜色 |                          |

***

#### V-轮播图

**使用场景**

*   可以替

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_sfZQOKdMMT.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_3ZM2Rzt_fe.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_104dWmPE5V.png)

**单元格设置**

| 名称            | 说明                                             |
| ------------- | ---------------------------------------------- |
| 默认点击进行预览      | 勾选时点击预览图片，且无法设置点击命令                            |
| 编辑点击命令        | 必须取消勾选默认点击进行预览。编辑点击轮播图时触发的命令                   |
| 选项来自数据库       |                                                |
| 配置图片项目        |                                                |
| 绑定数据源         |                                                |
| 滚动方向          | 横向/纵向，默认横向滚动                                   |
| 自动轮播间隔(单位:毫秒) | 默认设置为空，即不自动轮转                                  |
| 显示指示器         |                                                |
| 指示器颜色         |                                                |
| 开启循环播放        |                                                |
| 可以通过手势滑动      |                                                |
| 可用操作          | 直接拖拽可用操作到页面上，自动生成操作单元格命令                       |
| 可用操作-切换到上一项   |                                                |
| 可用操作-切换到下一项   |                                                |
| 可用操作-切换到指定项   | 此命令用于滑动到特定项，接受一个参数用于确定跳转到哪一项。其中参数为特定的项索引（从1开始） |

***

#### V-标签页头

**使用场景**

*   样式更为现代的标签页头

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_ZMqflwjynL.png)

*   通常，它与选项卡配合使用

    1.  添加V-标签页头

    2.  添加选项卡

    3.  隐藏选项卡的页签

    4.  配置V-标签页头的命令，使用操作单元格命令更改选项卡的生效索引

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_e7gtqL3Noi.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image__ppN8ldQyK.png)

**单元格设置**

| 名称           | 说明                                       |
| ------------ | ---------------------------------------- |
| 编辑标签点击命令     | 点击单元格时执行的命令                              |
| 默认值          |                                          |
| 选项来自数据库      |                                          |
| 编辑标签项目       |                                          |
| 绑定数据源        |                                          |
| 风格样式         | 下划线样式/卡片样式                               |
| 标签栏背景色       |                                          |
| 标题主题色        |                                          |
| 标签选中时的字体颜色   |                                          |
| 标题未选中时的字体颜色  |                                          |
| 下划线宽度(单位:像素) |                                          |
| 下划线高度(单位:像素) |                                          |
| 省略过长的标题文字    |                                          |
| 开启左侧收缩布局     |                                          |
| 可用操作         | 直接拖拽可用操作到页面上，自动生成操作单元格命令                 |
| 可用操作-设置徽标    | 设置标签页的徽标（提示红点）
参数：1.标签页的值；2.徽标值      |
| 可用操作-隐藏标签页   | 隐藏目标标签页，输入需要隐藏的标签页值（可以使用英文逗号分隔，输入一组标签页值） |

***

#### V-标签

**使用场景**

*   用于打标签

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_iN31wGOm8N.png)

*   标签值是一组用分隔符分割的标签名组成的字符串

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_sgjozZ4QGR.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_pfJTC6NYrS.png)

**单元格设置**

| 名称       | 说明                                                                   |
| -------- | -------------------------------------------------------------------- |
| 编辑标签点击命令 | 点击单元格时执行的命令                                                          |
| 单元格权限    |                                                                      |
| 配置颜色列表   | 设置颜色列表，从上到下依次生效，用完时会从第一个颜色项重新开始，不断循环。
如果希望所有标签使用相同颜色，则颜色列表保留一项即可 |
| 默认值      |                                                                      |
| 分隔符      | 三种可选： ","     "/"     ">"                                            |
| 尺寸       | 大/中/小                                                                |
| 标签样式     | 默认/空心/圆角/标记                                                          |
| 标签间距     | 默认10                                                                 |
| 允许添加标签   |                                                                      |
| 添加标签设置   | 设置添加标签按钮的宽度、文本、间距                                                    |
| 自动移除重复项  | 标签文本重复时，仅显示第一项                                                       |
| 只读       |                                                                      |

***

#### V-时间线

**使用场景**

*   创建时间线（时间轴图）

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_pZbIkDTgBz.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_L_JiRR_p08.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_0Rftq4duet.png)

**单元格设置**

| 名称                  | 说明                                                                                                                                                                                                                                                                                                                                                         |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 编辑值变更命令             | 点击单元格时执行的命令                                                                                                                                                                                                                                                                                                                                                |
| 数据库生成步骤项目           |                                                                                                                                                                                                                                                                                                                                                            |
| 配置节点项目              |                                                                                                                                                                                                                                                                                                                                                            |
| 绑定数据源               |                                                                                                                                                                                                                                                                                                                                                            |
| 默认值                 |                                                                                                                                                                                                                                                                                                                                                            |
| 当前节点图标              |                                                                                                                                                                                                                                                                                                                                                            |
| 已完成节点图标             |                                                                                                                                                                                                                                                                                                                                                            |
| 当前节点及已完成节点颜色        |                                                                                                                                                                                                                                                                                                                                                            |
| 非当前节点图标             |                                                                                                                                                                                                                                                                                                                                                            |
| 非当前节点颜色             |                                                                                                                                                                                                                                                                                                                                                            |
| 时间戳显示位置             | 文本上方/文本下方                                                                                                                                                                                                                                                                                                                                                  |
| 时间戳格式               |                                                                                                                                                                                                                                                                                                                                                            |
| 可用操作                | 直接拖拽可用操作到页面上，自动生成操作单元格命令                                                                                                                                                                                                                                                                                                                                   |
| 可用操作-设置数据源          | 使用动态 JSON 对象作为单元格的数据源，JSON 格式示例如下：
\[
{"value": "1", "title": "活动按期开始", "timestamp": "2018-04-15"},
{"value": "2", "title": "通过审核", "timestamp": "2018-04-13"},
{"value": "3", "title": "创建成功", "timestamp": "2018-04-11"}
]
上面的数据假设“值属性名”为value，“标题属性名”为title，“时间属性名”是timestamp
通常，JSON数据源可以通过 HTTP 请求命令从Web服务获取，也可以通过服务端命令获取 |
| 可用操作-更改当前节点图标       |                                                                                                                                                                                                                                                                                                                                                            |
| 可用操作-更改当前节点及已完成节点颜色 |                                                                                                                                                                                                                                                                                                                                                            |

***

#### V-文件上传

**优劣对比**

与活字格内置单元格类型-附件对比

优势：

*   更现代的UI界面

*   允许直接打开相机

劣势

*   不支持添加进表格

*   不支持使用单元格格式

*   不支持拖放上传文件

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_4QNSz_s664.png)

**设计时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_O4HNaSmaqd.png)

**运行时**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_IK8x8Sos7-.png)

**单元格设置**

| 名称                | 说明                                                  |
| ----------------- | --------------------------------------------------- |
| 单元格权限             |                                                     |
| 最大允许上传个数          | 默认为空，即不限制。设置为0会被置为1                                 |
| 上传的文件类型           | 允许上传的文件类型，默认为".jpg, .jpeg, .png"，无效文件会一直处于上传状态      |
| 最大文件大小(单位:MB)     | 默认为空，即不限制。设置为0会被置为空，即不限制。
用户尝试上传超过限制的文件时，会有警告弹出 |
| 图片选取模式            | 图片文件库/直接打开摄像头                                       |
| 显示上传区域的图标         |                                                     |
| 上传区域的提示文本         |                                                     |
| 配置图片压缩            | 配置是否需要自动压缩图片                                        |
| 预览图和上传区域尺寸(单位:像素) |                                                     |
| 预览图裁剪模式           | 完全填充/等比缩放/等比填充/原始尺寸/缩小填充                            |
| 点击预览图后展示全屏预览      |                                                     |
| 显示删除按钮            |                                                     |
| 支持上传图片多选          |                                                     |
| 禁用                |                                                     |
| 只读                |                                                     |

***

***

## Vant 命令

#### V-轻提示

**使用场景**

*   弹出一个黑色半透明的提示，适用于消息通知、加载提示、操作结果提示等场景

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_PyDCjngoN5.png)

**效果示例**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_VwjCDAkyhS.png)

**命令选项**

| 名称          | 说明                     |
| ----------- | ---------------------- |
| 内容          |                        |
| 提示类型        | 文本\|成功\|失败\|加载\|HTML   |
| 加载图标类型      | 必须提示类型为加载。             |
| 显示位置        | 中部\|顶部\|底部             |
| 显示时长(单位:毫秒) | 设置为空或0时，轻提示不会自动关闭      |
| 图标          | 必须类型非加载（加载图标由加载图标类型设置） |
| 图标大小(单位:像素) |                        |
| 禁止背景点击      |                        |
| 显示背景遮罩层     |                        |
| 在点击后关闭      |                        |

***

#### V-关闭轻提示

**使用场景**

*   关闭存在的V-轻提示弹窗

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_zoWjH3ec82.png)

***

#### V-弹窗

**使用场景**

*   常用于消息提示、消息确认，或完成当前页面内与用户交互的特定动作

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_Z8pmqmBU7S.png)

**效果示例**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_xGhbAlVpFj.png)

**命令选项**

| 名称               | 说明                                                                                                                                |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| 标题               |                                                                                                                                   |
| 正文内容             |                                                                                                                                   |
| 样式风格             | 默认\|圆角按钮                                                                                                                          |
| 显示确认按钮           |                                                                                                                                   |
| 确认按钮文本           |                                                                                                                                   |
| 确认按钮颜色           |                                                                                                                                   |
| 显示取消按钮           |                                                                                                                                   |
| 弹框结果至变量          | 定义一个变量。 当消息框关闭时，将结果值保存到变量中。
然后，其他命令可以基于消息框结果进行不同的执行。

单击确定返回结果为【confirm】
单击取消返回结果为【cancel】
单击关闭按钮返回结果为【close】 |
| 高级设置-内容对齐方式      |                                                                                                                                   |
| 高级设置-弹窗宽度(单位:像素) |                                                                                                                                   |
| 高级设置-显示遮罩层       |                                                                                                                                   |
| 高级设置-可通过点击遮罩关闭弹窗 |                                                                                                                                   |
| 高级设置-在页面回退时自动关闭  |                                                                                                                                   |
| 高级设置-将取消与关闭进行区分  | 未勾选时，取消（点击取消按钮）和关闭（点击遮罩层）的返回结果都是【cancel】。                                                                                         |

***

#### V-消息通知

**使用场景**

*   弹出一个黑色半透明的提示，适用于消息通知、加载提示、操作结果提示等场景

**使用方式**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_d6u756-OPC.png)

**效果示例**

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image__e-Fe6VP0O.png)

**命令选项**

| 名称          | 说明                            |
| ----------- | ----------------------------- |
| 内容          |                               |
| 主题样式        | 主要\|成功\|危险\|警告\|自定义颜色         |
| 文字颜色        |                               |
| 显示位置        | 顶部\|底部                        |
| 显示时长(单位:毫秒) | 显示时间，单位为毫秒。设置为 0 不会自动关闭。      |
| 上下文         | 用于保存在“点击通知命令”里可能用到的上下文信息(如ID) |
| 点击通知执行命令    |                               |

***

***

## Vant自定义

允许开发人员使用代码自定义组件UI

**策略**

*   支持使用html

*   支持使用vue模板

*   支持使用Element组件

**限制**

*   不支持使用虚拟节点

*   不支持使用自定义组件

***

#### 自定义V-日历

**说明**

*   允许用户自定义日期格内容

**使用指南**

*   在页面中设置一个【V-日历】类型的单元格

*   为该单元格赋一个CSS类名

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_Y2kkGqiXi0.png)

*   将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_sOkzHuc83T.png)

*   代码演示

*   “calendar-custom-render”是您为【V-日历】指定的 CSS 名称。

*   请设置变量“FgcVant”、“CalendarFeature”、“Formatter”的名称与演示代码相同，否则将不起作用

*   自定义函数接受一个参数，并且返回一个对象，它们都是日期类型。

```纯文本
Data structure of Day
{
  date: Date,
  type: string, // Type, can be set to selected、start、middle、end、disabled
   text: string,
   topInfo: string,
   bottomInfo: string,
  className: string
}
```

```纯文本
var FgcVant = FgcVant || {};
 
FgcVant.CalendarFeature = FgcVant.CalendarFeature || {};
 
FgcVant.CalendarFeature.Formatter = FgcVant.CalendarFeature.Formatter || {};
 
FgcVant.CalendarFeature.Formatter["calendar-custom-render"] = function(day){
    return {
        date: day.date,
        type: day.type,
        text: day.text,
        topInfo: "csharp",
        bottomInfo: "js"
    };
}
```

*   设置前

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_pGVhilf6oV.png)

*   设置后

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_ZHWgfns_ds.png)

*   项目附件：[见README\_DEMO中的 V-日历.fgcc](https://gitee.com/grape-city-software/hzg-vant-plugin/blob/master/README_DEMO/V-%E6%97%A5%E5%8E%86.fgcc)

***

#### 自定义V-级联选择器

**说明**

*   允许用户自定义级联节点UI

**使用指南**

*   在页面中设置一个【V-级联选择器】类型的单元格

*   为该单元格赋一个CSS类名

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_FgxG-hj8tq.png)

*   将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_Lah-sldpq8.png)

*   代码演示

*   “cascader-custom-render”是您为【V-级联选择器】指定的 CSS 名称。

*   请设置变量“FgcVant”、“PickerSlots”、“Option”的名称与演示代码相同，否则将不起作用

*   示例代码中的关键字“data”是用户定义的数据源中的每一项。

```纯文本
interface data {
  option: Option,
  children: Array<data>
}

interface Option {
  value: String,
  text: String
}
```

```纯文本
var FgcVant = FgcVant || {};
  
FgcVant.CascaderSlots = FgcVant.CascaderSlots || {};
  
FgcVant.CascaderSlots.Option = FgcVant.CascaderSlots.Option || {};
  
FgcVant.CascaderSlots.Option["cascader-custom-render"] = function(){
    return "<div style='color: red;'>{{ data.option.text }}</div>"
}
```

*   设置前

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_mWpmZ_Ditc.png)

*   设置后

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_2u0QS6syJ8.png)

*   项目附件：[见README\_DEMO中的 V-级联选择器.fgcc](https://gitee.com/grape-city-software/hzg-vant-plugin/blob/master/README_DEMO/V-%E7%BA%A7%E8%81%94%E9%80%89%E6%8B%A9%E5%99%A8.fgcc)

***

#### 自定义V-时间选择器

**说明**

*   允许用户自定义选项的UI

**使用指南**

*   在页面中设置一个【V-时间选择器】类型的单元格

*   为该单元格赋一个CSS类名

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_NmgVHWB-6_.png)

*   将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_4sq0BcD4aP.png)

*   代码演示

*   “datetime-picker-custom-render”是您为【V-日期选择器】指定的 CSS 名称。

*   请设置变量“FgcVant”、“DatetimePickerSlots”、“Option”的名称与演示代码相同，否则将不起作用

*   示例代码中的关键字“data”是时间值

```纯文本
data: string
```

```纯文本
var FgcVant = FgcVant || {};
  
FgcVant.DatetimePickerSlots = FgcVant.DatetimePickerSlots || {};
  
FgcVant.DatetimePickerSlots.Option = FgcVant.DatetimePickerSlots.Option || {};
  
FgcVant.DatetimePickerSlots.Option["datetime-picker-custom-render"] = function(){
    return "<div style='color: red;'>{{ data }}x</div>"
}
```

*   设置前

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_SVWbEWsgG2.png)

*   设置后

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_6pTjTD2bBJ.png)

*   项目附件：[见README\_DEMO中的 V-时间选择器.fgcc](https://gitee.com/grape-city-software/hzg-vant-plugin/blob/master/README_DEMO/V-%E6%97%B6%E9%97%B4%E9%80%89%E6%8B%A9%E5%99%A8.fgcc)

***

#### 自定义V-宫格

**说明**

*   允许用户定义【V-宫格】内的宫格项

**使用指南**

*   在页面中设置一个【V-宫格】类型的单元格

*   为该单元格赋一个CSS类名

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_RcCqSb7wvE.png)

*   将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_j0NN2yK9Z3.png)

*   代码演示

*   “grid-custom-render”是您为【V-宫格】指定的 CSS 名称。

*   请设置变量“FgcVant”、“PickerSlots”、“Option”的名称与演示代码相同，否则将不起作用

*   示例代码中的关键字“Option”是用户定义的数据源中的每一项

```纯文本
interface option {
  icon: String,
  text: String,
  badge: String,
  dot: Boolean
}
```

```纯文本
var FgcVant = FgcVant || {};
  
FgcVant.GridItemSlots = FgcVant.GridItemSlots || {};
  
FgcVant.GridItemSlots.Content = FgcVant.GridItemSlots.Content || {};
  
FgcVant.GridItemSlots.Content["grid-custom-render"] = function(){
    return "<div style='color: red;'>{{ option.text }}</div>"
}
```

*   设置前

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_ceev4Wq1F9.png)

*   设置后

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_vRMLnbrIJB.png)

*   项目附件：[见README\_DEMO中的V-宫格.fgcc](https://gitee.com/grape-city-software/hzg-vant-plugin/blob/master/README_DEMO/V-%E5%AE%AB%E6%A0%BC.fgcc)

***

#### 自定义V-选择器

**说明**

*   允许用户自定义选项

**使用指南**

*   在页面中设置一个【V-选择器】类型的单元格

*   为该单元格赋一个CSS类名

*   将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_f_oBhVXTQ_.png)

*   代码演示

*   “select-custom-render”是您为【V-选择器】指定的 CSS 名称。

*   请设置变量“FgcVant”、“PickerSlots”、“Option”的名称与演示代码相同，否则将不起作用

*   示例代码中的关键字“data”是用户定义的数据源中的每一项

```纯文本
var FgcVant = FgcVant || {};
 
FgcVant.PickerSlots = FgcVant.PickerSlots || {};
 
FgcVant.PickerSlots.Option = FgcVant.PickerSlots.Option || {};
 
FgcVant.PickerSlots.Option["select-custom-render"] = function(){
    return "<div style='color: red;'>{{ data }}</div>"
}
```

*   设置前

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_rF84KJeTFa.png)

*   设置后

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_c7LMMPMTrQ.png)

*   项目附件：[见README\_DEMO中的 V-选择器.fgcc](https://gitee.com/grape-city-software/hzg-vant-plugin/blob/master/README_DEMO/V-%E9%80%89%E6%8B%A9%E5%99%A8.fgcc)

***

#### 自定义V-轮播图

**说明**

*   最初的需求是支持显示和预览视频，但我们更推荐只显示和预览图像。

*   当前方案：

    1.  轮播图仍旧仅支持图像

    2.  我们提供了两个接口允许用户自定义滑动项和预览项

*   实现展示视频路径：

    1.  准备一段视频

    2.  通过接口向图片上添加一个视频播放按钮

    3.  添加事件监听，当视频播放按钮被点击时播放视频

**使用指南**

*   在页面中设置一个【V-轮播图】类型的单元格

*   为该单元格赋一个CSS类名

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_GRdfR0CYUU.png)

*   将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_MSeWggvmxU.png)

*   代码演示（本代码目的为在轮播图上实现播放视频能力）

*   “video-swipe”是您为【V-轮播图】指定的 CSS 名称。

*   请设置变量“FgcVant”、“SwipeFeature”、“Item”、“PreviewItem”的名称与演示代码相同，否则将不起作用

*   FgcVant.SwipeFeature.Item 是自定义滑动项，而 FgcVant.SwipeFeature.PreviewItem 是自定义预览项，它们都有两个参数，第一个表示 DOM 元素，第二个表示您从表中绑定的 ID。

```纯文本
// JavaScript source code

var FgcVant = FgcVant || {};
FgcVant.SwipeFeature = FgcVant.SwipeFeature || {};
FgcVant.SwipeFeature.Item = FgcVant.SwipeFeature.Item || {};

var FgcVant = FgcVant || {};
FgcVant.SwipeFeature = FgcVant.SwipeFeature || {};
FgcVant.SwipeFeature.PreviewItem = FgcVant.SwipeFeature.PreviewItem || {};

function insertTemplate(el, id){
    Forguncy.getTableData("table1", { "ID": id },(data) => {
        if (data.isVideo === 1) { // if it's video
            const image = document.createElement("img");
            // image.src = icon url
            image.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F21%2F86%2F5905bf7209bd5_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655021863&t=9879e403f701332958a60673878339b6";
            // alignment center
            image.width = 50;
            image.height = 50;
            image.style.position="absolute";
            image.style.top = "50%";
            image.style.left = "50%";
            image.style.transform = "translate(-50%, -50%)";
            image.style.zIndex = 1;
            // add click listener
            const onClick = function(event) {
                window.open("https://jvod.300hu.com/vod/product/5072c573-90d2-452a-87cc-bc02a37d9e1c/5eca1efefd254ea7b776d2d5556a20f0.mp4?source=2&h265=h265/18799/4feda46c03284403b765911010e62e97.mp4", "_self");
                event.stopPropagation();
            }
            image.addEventListener("click", onClick);
            // when preview, the touchend event handler on 'el' will prevent triggering click event on 'image', so it needs to be stopped when touchend ocurs on 'image' to avoid triggering touchend handler of 'el'.
            const stop = function(event) {
                event.stopPropagation();
            }
            image.addEventListener("touchstart", stop);
            image.addEventListener("touchend", stop);
            // append 'image' to dom
            el.appendChild(image);
        }  
    })
}

FgcVant.SwipeFeature.Item["video-swipe"] = FgcVant.SwipeFeature.PreviewItem["video-swipe"] = insertTemplate;
```

*   设置前

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_ZTW12A5GHc.png)

*   设置后

![](https://gitee.com/grape-city-software/hzg-vant-plugin/raw/master/README_image/image_shGB_wMxNT.png)