infoTemplate

描述

可选。允许为 Booking 对话框中的信息块应用模板

用法

infoTemplate?: ({item: obj, slot: number}) => string;

参数

infoTemplate 接收 card 条目对象和选定的 slot 时间戳作为输入，并返回一个 HTML 字符串。

示例

在下面的示例中，我们定义了 cardInfoTemplate 函数，用于为信息块生成自定义 HTML。该函数接收 item（卡片对象）和 slot（时间槽时间戳）作为输入参数。函数返回 div 容器，表示所选预订条目的信息块，包括图片、分类、标题和格式化日期。您还需要导入 template 辅助函数，并将自定义函数赋值给 infoTemplate。

<style>
	.custom-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.info-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 34px;
		background: rgba(128, 128, 155, 0.12);
		border-radius: 8px;
	}
    /* 其他样式 */
</style>

<script>
    const { Booking, template } = booking; // 导入 template 辅助函数

    function cardInfoTemplate({
        item,
        slot,
    }) {
            return `
                <div class="custom-info">
                    <div class="info-wrapper">
                        <div class="photo-wrapper">
                            ${getPhotoElement(item.preview, "info")}
                        </div>
                        <span class="info-title">${item.title}</span>
                        <span class="info-category">${item.category}</span>
                        <div class="date" data-action="reset-slot">
                            <i class="icon wxi-calendar"></i>
                            <span>${formatDate(slot, { dateFormat, timeFormat })}</span>
                        </div>
                    </div>
                </div>
            `;
        }

    const widget = new Booking("#root", {
	    data,
	    infoTemplate: template(cardInfoTemplate), // 将函数传入 widget 配置
    });
</script>

以下代码片段展示了如何为 Booking 对话框的信息块应用模板，该对话框会在用户点击时间槽按钮时出现：

信息

您也可以使用 infoShape 属性控制 Booking 对话框信息块中显示的字段。但如果两个属性同时使用，infoTemplate 将覆盖 infoShape 的设置。

相关文章：

• 配置 Booking 对话框
• infoShape