桌面端展示类组件

展示类组件用于在页面上展示内容，包括文本、标签、统计数值、图标、图片、按钮、图表、进度条、日历等组件。

信息展示页面，通过行列、卡片、图表、表格、列表、进度条等组件，展示重要信息，如下面几幅图所示

文本

文本组件用来显示一个文本。支持静态文本、数据组件当前行的数据、表格当前行的数据、列表当前行的数据、表达式。例如：数值后面加%，设计时界面如下图所示

运行效果见下图中表格的周涨幅列中的数据

文本复制

文本组件提供可复制的交互能力。支持定义拷贝图标、提示文案、拷贝到剪切板里的文本，运行效果如下图所示

1735116075581

react 文本组件通过属性控制，设计界面如下图所示

1735116601838

vue 文本组件通过定制实现，设计界面如下图所示

1735116404787

复制后 copied 为 true

  • 拷贝图标：需要放两个图标，分别用动态隐藏控制
  • 提示文案：通过表达式控制

w 文件中的代码如下

<antdv:Typography.Text content="自定义复制图标" copyFlag="true" copyable="{{"text":"Hello, Ant Design!"}}" id="typographyText2" style="display:block;">
    <attr:copyableIcon class="copyableIcon" d_canAddChild="true" designer_label="拷贝图标" id="default0">
        <antdv:Icon bind:hidden="{copied}" icon="smile,outlined" id="icon0">
        </antdv:Icon>
        <antdv:Icon bind:hidden="{!copied}" icon="smile,filled" id="icon1">
        </antdv:Icon>
    </attr:copyableIcon>
    <attr:copyableTooltip class="copyableTooltip" d_canAddChild="false" designer_child_type="expression" designer_label="拷贝提示文案" id="default1">
        <Fragment id="fragment0">{wx.Util.iif(copied==true,"复制smile成功","复制smile")}</Fragment>
    </attr:copyableTooltip>
</antdv:Typography.Text>

文本编辑

文本组件提供可编辑的交互能力，运行效果如下图所示

1735117231201

文本组件编辑后触发“改变”事件，设计界面如下图所示

1735117296384

在改变事件中，将文本值写入数据组件，代码如下

react 代码

onTypographyText7Change = ({value}) => {
    this.comp("pageData").setValue("text",value);
}

vue 代码

let pageData = useData("pageData");
let onTypographyText4Change = ({value}) => {
    pageData.setValue("text",value);
}

文本省略

文本组件提供单行或多行文本省略、是否可展开等功能，运行效果如下图所示

1735117534923

文本组件通过属性控制溢出省略，设计界面如下图所示

1735117614176

标签

标签组件用于进行标记和分类的小标签，运行效果如下图所示

1733190394770

提供多种预设色彩和五种状态颜色

1733191396250

1733208018527

支持显示图标

1733208049738

支持会转动的图标

  • react 做法：在标签中添加图标组件，设置 spin="true"，源码如下
    <antdpro:Tag color="processing" id="tag6" text="处理中">
        <antdpro:Icon icon="sync,outlined" id="icon0" spin="true">
        </antdpro:Icon>
        <span>处理中</span>
    </antdpro:Tag>
  • vue 做法：图标属性使用大括号引用在 js 中定义的方法，设计界面如下图所示

1733208079511

js 代码如下

import {SyncOutlined} from "@ant-design/icons-vue";
let $page = usePage();

function closeIcon(){
    return <SyncOutlined spin="true" />
}

支持显示无边框标签

1733211983228

提供可关闭样式，通过“动态隐藏”属性控制标签是否显示，在“关闭”事件中，修改变量值

1733191856375

支持自定义标签颜色（自定义时文本颜色为白色）

1733191505313

可选择标签

可选择标签组件用于实现类似 Checkbox 的效果，通过点击切换选中效果，运行效果如下图所示

1733214876541

在列表组件中添加可选择标签组件，设置文本和选中属性，设计界面如下图所示，如果数据集没有选中列，可添加计算列用作选中列

1733214730238

在改变事件中，通过上下文变量获取选中状态，设计界面如下图所示

1733214963520

统计数值

将一个数值，显示为带有千分位、精度、前缀、后缀、标题的样式，如下图所示，不设置标题，则不显示标题。

组件源码如下

<antdpro:Statistic id="statistic0" precision="2" prefix="￥" suffix="元" title="标题" value="123456.789">[/antdpro:Statistic](/antdpro:Statistic)

默认显示大字体，在“数值区域样式”中设置字体大小，如下图所示

运行效果见第二幅图中门店销售额排名列表第三列中的数据

图标

图标组件用来显示一个图标，可以设置大小、颜色。第一幅和第三幅图中的红绿箭头使用的就是图标组件。

图标组件支持单色图标和双色图标，注意它们的颜色设置方法不同

  • 单色图标：在“图标”属性中选择一个线框风格或实底风格的图标，在样式中用 color 设置颜色，用 font-size 设置大小，如下图所示

  • 双色图标：在“图标”属性中选择一个双色风格的图标，在图标颜色中设置一个颜色，在样式中用 font-size 设置大小，如下图所示

图片

图片组件显示一个图片，支持预览。

  • 宽度和高度属性：设置其一，保持图片纵横比；都设置，图片产生拉伸
  • 显示本地的图片：显示 UI2 目录下的图片

1720408169052

  • 显示附件上传的图片：例如商品表的图片列使用“附件”组件上传图片，用“图片”组件展示时，选择商品表的图片列即可，如下图所示

1720408309491

头像

头像组件用来代表用户或事物，支持图片、图标或字符展示。头像组组件用来显示一组头像，运行效果如下图所示

1733276988671

组件属性说明如下

  • 图片地址：设置显示的图片
  • 字符：设置显示的文本
  • 图标：设置显示的图标
  • 形状：支持圆形和方向两种形状

1733279811403

显示文本和图标时，通过样式定义颜色，设计界面如下图所示

1733279751967

头像组中只显示头像，这种简单情况使用绑定数据集，设置图片地址列和字符列。两列都设置时，优先显示图片，没有图片时显示字符列内容，运行效果如运行效果图中的第一行头像组，设计界面如下图所示

1733282755181

头像组中除了显示头像，还显示文字提示，这种复杂情况使用自定义子元素，头像组组件不设置绑定数据集，而是在头像组中添加列表，列表绑定数据集，设计界面如下图所示

1733282797570

在列表中添加文字提示和头像组件，绑定列表当前行数据。头像组件设置图片地址和字符属性。两列都设置时，优先显示图片，没有图片时显示字符列内容，运行效果如运行效果图中的第二行头像组，设计界面如下图所示

1733283146527

按钮

按钮组件用来显示一个按钮。按钮上的文字使用“文本”属性设置，设置方法同文本组件的“文本”属性。按钮支持设置为主按钮、链接按钮、文本按钮、危险按钮等样式。

第三幅图表格“搜索关键词”列中的数据，使用按钮组件显示，设计界面如下图所示

按钮有边距，放在表格中有个空白，可通过设置样式去掉边距，css 代码如下

.pcx-page .ant-table .ant-btn.ant-btn-link{
    padding-left: 0;
}

悬浮按钮

悬浮按钮组件用于显示悬浮于页面上方的按钮。悬浮按钮组组件用于显示多个悬浮按钮，有两种效果：一种是悬浮按钮默认显示，另一种是默认不显示悬浮按钮，只显示一个图标，当鼠标点击或悬停于图标上时，才显示悬浮按钮，运行效果如下图所示

1733219176463 1733217121273

悬浮按钮组件属性说明如下

  • 提示：设置文字提示内容
  • 徽标：设置徽标
  • 图标：设置图标
  • 文字描述：设置图标下的文字描述
  • 气泡卡片：设置气泡卡片内容
  • 按钮类型：支持默认按钮和主按钮两种类型
  • 形状：支持圆形和方形两种形状

1733217986298

悬浮按钮组组件属性说明如下

  • 触发行为：为空表示悬浮按钮组中的悬浮按钮默认显示；设置为点击或悬停则表示默认显示一个图标，其中的悬浮按钮默认隐藏，当鼠标点击或悬停于图标时，悬浮按钮显示
  • 展开：当触发行为是点击或悬停时，悬浮按钮是显示还是隐藏

1733218235773

在悬浮按钮组中定制图标，设置触发行为属性，添加悬浮按钮，实现折叠效果，设计界面如下图所示

1733220044613

徽标数

徽标数组件用于显示图标右上角的圆形徽标数字，运行效果如下图所示

1733215456938

组件属性说明如下

  • 展示数字：支持数字、文字、用大括号引用 js 渲染方法
  • 封顶数值：数值超过此值时，会自动显示为 {值}+
  • 小红点：是否显示为小红点
  • 显示0：徽标内容为0时，是否显示

支持显示一个图标

  • react 做法：在展示数字属性中，使用大括号引用 js 渲染方法

1733215814319

js 代码如下

import React from 'react';
import {CloseCircleOutlined} from "@ant-design/icons";

export default class IndexPage extends Page {
    constructor(props, context) {
        super(props, context);
    }

    closeIcon(){
        return <CloseCircleOutlined style={{color:"red"}}/>
    }
}
  • vue 做法：在展示数字属性中，使用大括号引用 js 渲染方法

1733215711919

js 代码如下

import {CloseCircleOutlined} from "@ant-design/icons-vue";
let $page = usePage();

function closeIcon(){
    return <CloseCircleOutlined style="color:red" />
}

显示为状态点，支持五种颜色

1733216211970

显示为彩色点，支持任意颜色

1733216264918

缎带徽标

缎带徽标组件用于显示缎带型的徽标，运行效果如下图所示

1733216538644

组件属性说明如下

  • 内容：文字可通过表达式直接设置，支持插入组件
  • 位置：支持开始和结束两种位置
  • 颜色：设置缎带的颜色

1733216582673

通过表达式设置缎带徽标内容，设计界面如下图所示

1733216712522

文字提示

文字提示组件显示一个气泡框，鼠标移入则显示提示，移出则消失。用来代替系统默认的 title 提示，运行效果如下图所示

上图中鼠标移入图标，显示文字提示，就把图标组件放在文字提示内部，并设置“提示文字”属性为提示信息，设计界面如下图所示

分割线

分割线组件用来显示一条水平线或垂直线，可带文字。设计界面如下图所示

运行效果见第一幅图中的水平线

图表

图表组件用来显示一个图表，支持柱状图、折线图、面积图、饼图、圆环图、漏斗图、雷达图、散点图、仪表盘等

进度条

进度条组件展示进度，支持线型、圆形、仪表盘、步骤条等样式

第一幅图中“运营活动效果”使用了进度条组件，设置进度条组件的百分比和类型（线）属性，设计界面如下图所示

第四幅图中“转化率”使用了进度条组件，设置进度条组件的百分比、类型（圆）、进度条颜色、进度条线宽、圆形进度条画布宽（圆的直径）等属性，设计界面如下图所示

特别说明

  • 暂不支持进度条渐变色

下拉菜单

下拉菜单组件显示一个按钮，鼠标悬停、点击、右键点击按钮时，显示一个菜单，运行时效果如下图所示

1720405756938

下拉菜单组件通过“展开/隐藏”在设计时显示或隐藏菜单，支持添加菜单组、子菜单、项、分隔线，如下图所示

1720406429337

其中菜单组和子菜单，区别说明如下，运行效果如下图所示

  • 菜单组：用于展示有缩进的菜单，如下图的上半部分
  • 子菜单：用于展示弹出式的下级菜单，如下图的下半部分

1720406976305

同类型的下拉菜单组件，还有一个按钮菜单组件，它比下拉组件多显示一个按钮，如下图所示

1720407259192

日历组件

日历组件是按照日历形式展示数据的容器，可用于显示日程、价格日历等，支持年/月切换。有两种风格

  • 日历：全屏显示
  • 日历卡片：局部显示

日历

全屏显示一个日历，在日历的单元格中显示信息，如下图所示

1720593924385

日历支持两种显示风格

  • 全屏显示：“是”表示整个页面显示一个大日历，“否”表示在页面的局部显示一个小日历

日历中的单元格提供两个渲染事件

  • 单元格内容（追加）：显示日历中的“日期”，自定义的内容显示在“日期”的下面
  • 单元格内容（覆盖）：不显示日历中的“日期”，自定义的内容占满整个单元格

1720596505852

本例使用单元格内容（追加）渲染方法，示例代码如下

react 代码

    calendar0CellRenderRender = (current,{ originNode,today,range,type,locale,subType}) => {
        const listData = this.getListData(current);
        return (
            <ul className="events">
                {listData.map((item) => (
                    <li key={item.content}>
                        <Badge status={item.type} text={item.content} />
                    </li>
                ))}
            </ul>
        );
    }

其中：

  • current：是渲染单元格的日期，每一个日期的单元格都会执行一次渲染方法
  • getListData：自定义获取日期显示内容的方法，示例代码如下
  • ul：使用 ul li 显示多行内容，自定义了样式，样式代码如下
  • Badge：使用 Badge 组件显示内容，组件需要引用才能使用，引用代码如下
    getListData = (value) => {
        let calendarData = this.comp("calendarData");
        let date = value.format("YYYY-MM-DD");
        let rows = calendarData.find(["date"],[date]);
        return rows;
    }

系统组件对有些基础组件进行了扩展，按需引用

  • 引用基础组件 Badge 的写法如下
import { Badge } from 'antd';
  • 引用系统组件 Badge 的写法如下
import Badge from "$UI/comp/antdpro/components/Badge/Badge.react";

还需要引用 React，引用代码如下

import React from 'react';

样式代码如下

:global {
    .events {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .events .ant-badge-status {
        width: 100%;
        overflow: hidden;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

vue 代码

let calendar0DateCellRenderRender = (date) => {
    const listData = getListData(date);
    return (
        <ul className="events">
            {listData.map((item) => (
                <li key={item.content}>
                    <Badge status={item.type} text={item.content} />
                </li>
            ))}
        </ul>
    );
}

其中：

  • date：是渲染单元格的日期，每一个日期的单元格都会执行一次渲染方法
  • getListData：自定义获取日期显示内容的方法，示例代码如下
  • ul：使用 ul li 显示多行内容，自定义了样式，样式代码如下
  • Badge：使用 Badge 组件显示内容，组件需要引用才能使用，引用代码如下
let $page = usePage();
let calendarData = useData("calendarData");
let getListData = (value) => {
    let date = value.current.format("YYYY-MM-DD");
    let rows = calendarData.find(["date"],[date]);
    return rows;
}

系统组件对有些基础组件进行了扩展，按需引用

  • 引用基础组件 Badge 的写法如下
import { Badge } from 'ant-design-vue';
  • 引用系统组件 Badge 的写法如下
import Badge from "$UI/comp/antdv/components/Badge/Badge.vue";

样式代码如下

:deep {
    .events {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .events .ant-badge-status {
        width: 100%;
        overflow: hidden;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

日历卡片

页面的局部显示一个日历，日历的单元格整个重绘，如下图所示

1720594494182

日历支持两种显示风格

  • 全屏显示：“是”表示整个页面显示一个大日历，“否”表示在页面的局部显示一个小日历

日历中的单元格提供两个渲染事件

  • 单元格内容（追加）：显示日历中的“日期”，自定义的内容显示在“日期”的下面
  • 单元格内容（覆盖）：不显示日历中的“日期”，自定义的内容占满整个单元格

1720596582254

本例使用单元格内容（覆盖）渲染方法，示例代码如下

react 代码

    calendar0FullCellRenderRender = (current,{ originNode,today,range,type,locale,subType}) => {
    let date = current;
        let now = new Date();
        let row = this.getRow(date);
        let caption = row ? "已写" : "未写"; // 在日期下面显示的文字
        // 外层容器样式
        let containerStyle = {
            display: date.isSame(this.state.selectedDate, "month") ? "" : "none", // 不是当前月的日期不显示
            height: "35px",
            width: "35px",
            margin: "0 auto",
            borderRadius: "50%",
            fontSize: "12px",
            border: date.isAfter(now) ? "1px #eee solid" : row ? "1px blue solid" : "1px red solid", // 边框   
            color: date.isSame(this.state.selectedDate, "day") ? "white" : "",
            backgroundColor: date.isSame(this.state.selectedDate, "day") ? "dodgerblue" : date.isAfter(now) ? "#eee" : date.isSame(now, "day") ? "yellow" : "" // 背景色
        };
        // 今天以后的日期居中样式
        let dateMiddle = !date.isAfter(now) ? {
            color: date.weekday()==6 ? "blue" : date.weekday()==0 ? "red":"",
        } : {
            color: date.weekday()==6 ? "blue" : date.weekday()==0 ? "red":"",
            position: "relative",
            top: "8px"
        }
        // 文本样式
        let textStyle = {
            color: date.isSame(this.state.selectedDate, "day") ? "white" : "#999",
            display: date.isAfter(now) ? "none" : "" // 今天以后不显示文字
        };
        // 返回单元格内容
        return (
            <div style={containerStyle}>
                <div style={dateMiddle}>{date.date()}</div>
                <div style={textStyle}>{caption}</div>
            </div>
        );
    }

其中：

  • current：是渲染单元格的日期，每一个日期的单元格都会执行一次渲染方法
  • getRow：自定义获取日期显示内容的方法，示例代码如下
  • style：定义了3个样式
  • selectedDate：用 state 存储选择的日期，在构造函数中设置默认值，在日期变化事件中存储选择的日期，示例代码如下
  • div：使用 div 显示单元格中的日期和内容，使用上面定义的样式
    // 按日期查找对应的数据行
    getRow(value) {
        let calendarData = this.comp("calendarData"); 
        let date = value.format("YYYY-MM-DD");
        let rows = calendarData.find(["date"], [date]);
        return rows.length == 0 ? null : rows[0];
    }

在构造函数中，设置选择日期为今天，使用的 moment 需要引用才能使用，引用代码如下

    constructor(props, context) {
        super(props, context);
        this.state = {
            selectedDate: moment(new Date())    // 当前选中日期
        }
    }

在日期变化事件中存储选择的日期

    onCalendar0Change = ({date}) => {
        this.setState({
            selectedDate: date
        });
    }

还需要引用 React，引用代码如下

import React from 'react';
import moment from 'moment';

vue 代码

let calendar0DateFullCellRenderRender = (date) => {
    date = date.current;
    let now = new Date();
    let row = getRow(date);
    let caption = row ? "已写" : "未写"; // 在日期下面显示的文字
    // 外层容器样式
    let containerStyle = {
        display: date.isSame(state.selectedDate, "month") ? "" : "none", // 不是当前月的日期不显示
        height: "35px",
        width: "35px",
        margin: "0 auto",
        borderRadius: "50%",
        fontSize: "12px",
        border: date.isAfter(now) ? "1px #eee solid" : row ? "1px blue solid" : "1px red solid", // 边框   
        color: date.isSame(state.selectedDate, "day") ? "white" : "",
        backgroundColor: date.isSame(state.selectedDate, "day") ? "dodgerblue" : date.isAfter(now) ? "#eee" : date.isSame(now, "day") ? "yellow" : "" // 背景色
    };
    // 今天以后的日期居中样式
    let dateMiddle = !date.isAfter(now) ? {
        color: date.weekday()==5 ? "blue" : date.weekday()==6 ? "red":"",
    } : {
        color: date.weekday()==5 ? "blue" : date.weekday()==6 ? "red":"",
        position: "relative",
        top: "8px"
    }
    // 文本样式
    let textStyle = {
        color: date.isSame(state.selectedDate, "day") ? "white" : "#999",
        display: date.isAfter(now) ? "none" : "" // 今天以后不显示文字
    };
    // 返回单元格内容
    return (
        <div style={containerStyle}>
            <div style={dateMiddle}>{date.date()}</div>
            <div style={textStyle}>{caption}</div>
        </div>
    );
}

其中：

  • date：是渲染单元格的日期，每一个日期的单元格都会执行一次渲染方法
  • getRow：自定义获取日期显示内容的方法，示例代码如下
  • style：定义了3个样式
  • selectedDate：用 state 存储选择的日期，页面加载时存入当前日期，在日期变化事件中存储选择的日期，示例代码如下
  • div：使用 div 显示单元格中的日期和内容，使用上面定义的样式
// 按日期查找对应的数据行
let getRow = (value) => {
    let date = value.format("YYYY-MM-DD");
    let rows = calendarData.find(["date"], [date]);
    return rows.length == 0 ? null : rows[0];
}

在页面加载时，设置选择日期为今天，代码如下

let state = reactive({selectedDate:wx.Date.toString(wx.Date.now(),wx.Date.STANDART_FORMAT_SHOT)});

在日期变化事件中存储选择的日期

let onCalendar0Change = ({date}) => {
    state.selectedDate = date.format("YYYY-MM-DD");
}

展示类组件

展示类组件提供很多属性用于界面展现和用户交互，鉴于官网介绍的比较详细，本文不再赘述。

组件 用途 Antd 官网 Antd Vue 官网
文本 显示文本，支持复制、省略、编辑 文本 文本
标签 进行标记和分类的小标签 标签 标签
统计数值 显示带有千分位、前缀、后缀的数字 统计数值 统计数值
图标 显示语义化的矢量图形 图标 图标
图片 显示图片，支持预览 图片 图片
头像 用来代表用户或事物，支持图片、图标或字符展示 头像 头像
按钮 显示按钮，支持主按钮、链接按钮、文本按钮等 按钮 按钮
悬浮按钮 悬浮于页面上方的按钮 悬浮按钮 悬浮按钮
徽标数 图标右上角的圆形徽标数字 徽标数 徽标数
文字提示 文字提示气泡框，代替系统默认的 title 文字提示 文字提示
分割线 显示一条线，可带文字 分割线 分割线
进度条 展示进度，支持线型、圆形、仪表盘、步骤条等样式 进度条 进度条
下拉菜单 向下弹出菜单 下拉菜单 下拉菜单
日历 按照日历形式展示数据的容器 日历 日历

案例位置

桌面-页面-面板展示组件-*.w

results matching ""

    No results matching ""