阿里云首页 智能媒体管理

定制元素

定制元素

定制元素对象,即 CommandBars.Controls,是指我们自定义元素的总开关(Controls 可理解为复数形式的控制列表)。

下面我们将以【开始 Tab】为例,讲解如何在其中添加【自定义按钮】以及【自定义下拉组件】。

添加前:

定制元素-添加前

添加后:

定制元素-添加后

当然,在这之前,我们需要了解下 CommandBarId

CommandBarId

位置

StartTab

工具栏-开始 Tab

InsertTab

工具栏-插入 Tab

ReviewTab

工具栏-审阅 Tab

PageTab

工具栏-页面 Tab

更多的可见可定制列表。

语法:

表达式.CommandBars(CommandBarId).Controls

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;
  
  // 通过 CommandBar 的 Controls 对象,可获取到对应类型的内容集合,从而做新增操作或者获取到具体内容进行操作
  // 定制元素对象:【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 新增按钮型定制元素
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';

  // 新增下拉框型定制元素
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
}

新增定制元素

通过 Controls.Add() 方法,可以在对应的 Tab 中添加【自定义按钮】以及【自定义下拉组件】。

添加前:

定制元素-添加前

添加后:

定制元素-添加后

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type)

表达式:文档类型应用对象

参数:

属性

数据类型

必填

说明

Type

Enum

新增的定制元素类型,为 1 是可控按钮,为 10 是可控的下拉框,详细可见:Enum.MsoControlType

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 新增按钮型定制元素
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';

  // 新增下拉框型定制元素
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
}

单个定制元素

单个定制元素

单个定制元素,即具体到对应的自定义元素,我们可以获取该元素,从而控制该元素的标题、点击该元素等等。

以【开始 Tab】的按钮为例,我们了解下这个按钮的新增到删除的操作。

新增自定义元素:

单个定制元素-新增自定义元素

6秒后删除元素:

单个定制元素-6秒后删除元素

语法:

表达式.CommandBars(CommandBarId).Controls.Item(Index)

表达式:文档类型应用对象

参数:

属性

数据类型

必填

说明

Index

Number

第 Index 个定制元素

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 新增按钮型定制元素
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';

  // 6 秒后删除这个定制元素
  setTimeout(() => {
    controlButton.Delete();
  }, 6000);
}

设置标题

通过 Caption 属性,我们可以设置定制元素的标题:

单个定制元素-设置标题

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).Caption

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并设置标题
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  
  // 添加 1 个定制元素:下拉框,并设置标题
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
}

删除定制元素

通过 Delete() 方法,可以删除定制元素:

新增自定义元素:

单个定制元素-新增自定义元素

6秒后删除元素:

单个定制元素-6秒后删除元素

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).Delete()

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并设置标题
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  
  // 添加 1 个定制元素:下拉框,并设置标题
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';

  // 6 秒后删除这 2 个定制元素
  setTimeout(() => {
    controlButton.Delete();
    controlPopup.Delete();
  }, 6000);
}

禁用定制元素

通过 Enabled 属性的设置,可以禁用定制元素:

单个定制元素-禁用定制元素

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).Enabled

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并进行操作
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.Enabled = false;
  
  // 添加 1 个定制元素:下拉框,并进行操作
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.Enabled = false;
}

点击定制元素

通过 Execute() 方法,可以点击定制元素。

当然,配合 OnAction() 这个监听事件,可以得知按钮是否被点击了。

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).Execute()

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并进行操作
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.OnAction = () => console.log('按钮点击了');
  
  // 添加 1 个定制元素:下拉框,并进行操作
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.OnAction = () => console.log('下拉框点击了');

  // 6 秒后执行点击操作
  setTimeout( async () => {
    await controlButton.Execute();
    await controlPopup.Execute();
  }, 6000);
}

监听定制元素点击事件

监听定制元素点击事件,设置之后,只要按钮被点击,就可以通过控制台查看到对应的信息,从而制定相关的业务。

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).OnAction() = Function

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并进行操作
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.OnAction = () => console.log('按钮点击了');
  
  // 添加 1 个定制元素:下拉框,并进行操作
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.OnAction = () => console.log('下拉框点击了');
}

定制元素图标

通过 Picture,我们可以定制元素图标,这里以 Base64 为例,讲解如何设置对应的元素图标:

单个定制元素-定制元素图标

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).Picture

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并进行操作
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.Picture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik04LjIxMyAxM0g2LjhsNi42MzYtNi42MzYtNC4yNDMtNC4yNDMtNy4wNyA3LjA3MUw1LjkyOCAxM0g0LjUxNUwxLjA2IDkuNTQ2YS41LjUgMCAwIDEgMC0uNzA3TDguODM5IDEuMDZhLjUuNSAwIDAgMSAuNzA3IDBsNC45NSA0Ljk1YS41LjUgMCAwIDEgMCAuNzA3TDguMjEzIDEzeiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTQuNTM2IDYuMzY0bDQuOTUgNC45NS0uNzA3LjcwNy00Ljk1LTQuOTV6TTQuNTIxIDEzaDEwLjAzdjFINS40OTZ6Ii8+PC9nPjwvc3ZnPg==';
  
  // 添加 1 个定制元素:下拉框,并进行操作
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.Picture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik03LjUgMnYyLjVINGEuNS41IDAgMCAwLS41LjV2MmEuNS41IDAgMCAwIC41LjVoOWEuNS41IDAgMCAwIC41LS41VjVhLjUuNSAwIDAgMC0uNS0uNUg5LjVWMmEuNS41IDAgMCAwLS41LS41SDhhLjUuNSAwIDAgMC0uNS41eiIgc3Ryb2tlPSIjM0Q0NzU3Ii8+PHBhdGggZmlsbD0iIzNENDc1NyIgZD0iTTEzIDdoMXY0aC0xeiIvPjxwYXRoIGQ9Ik0xMSAxM2EyIDIgMCAwIDAgMi0yVjguNzY0QTMgMyAwIDEgMSA4Ljc2NCAxM0gxMXoiIGZpbGw9IiMzRDQ3NTciLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMSAxM2gxMHYxSDF6Ii8+PHBhdGggZD0iTTEgMTNhMiAyIDAgMCAwIDItMlY4Ljc2NEEzIDMgMCAwIDEgMSAxNHYtMXoiIGZpbGw9IiMzRDQ3NTciLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMyA3aDF2NEgzeiIvPjwvZz48L3N2Zz4=';
}

聚焦定制元素

聚焦定制元素,即通过 SetFocus 将光标聚集到对应位置:

单个定制元素-聚焦定制元素

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).SetFocus()

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并进行操作
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  await controlButton.SetFocus();
  
  // 添加 1 个定制元素:下拉框,并进行操作
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  await controlPopup.SetFocus();
}

隐藏定制元素

显示/隐藏定制元素。

新增自定义元素:

单个定制元素-隐藏显示-新增

6 秒后隐藏元素:

单个定制元素-隐藏显示-隐藏

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).Visible

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并进行操作
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';

  // 添加 1 个定制元素:下拉框,并进行操作
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';

  // 6 秒后隐藏定制元素
  setTimeout(() => {
    controlButton.Visible = false;
    controlPopup.Visible = false;
  }, 6000);
}

定制元素悬浮提示

通过 TooltipText,可以设置定制元素的悬浮提示:

给自定义按钮设置悬浮提示:

单个定制元素-悬浮-按钮

给自定义下拉框设置悬浮提示:

单个定制元素-悬浮-下拉框

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).TooltipText

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并进行操作
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.TooltipText = '悬浮提示-按钮';

  // 添加 1 个定制元素:下拉框,并进行操作
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.TooltipText = '悬浮提示-下拉框';
}

批量定制可控元素属性

可以通过 With(),从而批量设置定制元素属性,具体的各个属性的使用,可以参考单个属性的设置。

语法:

表达式.CommandBars(CommandBarId).Controls.Add(Type).With(Properties)

表达式:文档类型应用对象

参数:

属性

数据类型

必填

说明

Caption

String

标题

Enabled

Boolean

是否禁用

Picture

String

图标

Visible

Boolean

显示/隐藏

TooltipText

String

悬浮提示

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;
  
  // 添加 1 个定制元素:按钮,并进行操作
  const controlButton = await controls.Add(1);
  controlButton.With({
    Caption: 按钮,
    Enabled: false,
  });

  // 添加 1 个定制元素:下拉框,并进行操作
  const controlPopup = await controls.Add(10);
  controlPopup.With({
    Caption: '下拉框',
    Enabled: false,
  });
}

下拉框内定制元素

下拉框内定制元素

在 CommandBars(CommandBarId).Controls.Add() 中,如果 Enum 值为 10,则可以添加一个下拉框定制元素。

但是,如果需要操作它,那么就需要进一步设置。

例如:给下拉框添加一个按钮

定制元素-下拉框定制元素-添加按钮

而给这个按钮进行更多设置(例如标题、图表等),就可以参照 单个定制元素。

语法:

表达式.CommandBars(CommandBarId).Controls.Add(10).Controls

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;
  
  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;

  // 添加 1 个定制元素:下拉框
  const control = await controls.Add(10);
  control.Caption = '下拉框';
  
  // 获取下拉框
  const popupControls = await control.Controls;

  // 新增下拉框内定制元素
  const button = await popupControls.Add(1);
  button.Caption = '下拉按钮 1';
}

新增下拉框内定制元素

通过 Add() 方法,可以为下拉框内添加新的定制元素。

给下拉框添加一个按钮:

定制元素-下拉框定制元素-添加按钮

而给这个按钮进行更多设置(例如标题、图表等),就可以参照 单个定制元素。

语法:

表达式.CommandBars(CommandBarId).Controls.Add(10).Controls.Add()

表达式:文档类型应用对象

示例:

async function example() {
  await instance.ready();

  const app = instance.Application;
  
  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls;

  // 添加 1 个定制元素:下拉框
  const control = await controls.Add(10);
  control.Caption = '下拉框';
  
  // 获取下拉框
  const popupControls = await control.Controls;

  // 新增下拉框内定制元素
  const button = await popupControls.Add(1);
  button.Caption = '下拉按钮 1';
}