跳到主要内容

实用工具 - 钉钉链接拼接

1. 使用场景

钉钉有一套现成的跳转协议,借助这些协议我们可以实现跳转链接在钉钉的不同形态打开,如:工作台,侧边栏,独立窗口等,借助此例我们可以实现一个生成这样链接的小工具。

2. 实现功能

2.1 创建自定义页面

2.2 将下述代码拷贝至页面JS中

注意根据自身情况修改下述代码中的唯一标识。

// 链接生成
export function onCreateLink() {
this.$('textField_lahvtndr').validate();
this.$('numberField_lahvtnej').validate();
this.$('numberField_lahvtneo').validate();
const link = this.$('textField_lahvtndr').getValue();
const width = this.$('numberField_lahvtnej').getValue();
const height = this.$('numberField_lahvtneo').getValue();
if (!link || !width || !height) { return };
this.$('div_lahvtnef').set('behavior', 'NORMAL');
this.$('textField_lahvtneg').setValue(`dingtalk://dingtalkclient/page/link?url=${encodeURIComponent(link)}&pc_slide=true`);
this.$('textField_lahvtneh').setValue(`dingtalk://dingtalkclient/page/link?url=${encodeURIComponent(link + "?ddtab=true")}`);
this.$('textField_lahvtnei').setValue(`dingtalk://dingtalkclient/page/link?url=${encodeURIComponent(link)}&popup_wnd=true&height=${height}&width=${width}`);
}

export function onChange({ value }) {
if (!value) {
this.$('div_lahvtnef').set('behavior', 'HIDDEN');
this.$('textField_lahvtneg').reset();
this.$('textField_lahvtneh').reset();
this.$('textField_lahvtnei').reset();
};
}

// 复制PC侧边栏链接
export function onCopyPcSlide() {
this.onCopy(this.$('textField_lahvtneg').getValue());
}

// 复制PC工作台链接
export function onCopyDdtab() {
this.onCopy(this.$('textField_lahvtneh').getValue());
}

// 复制PC独立窗口链接
export function onCopyAlone() {
this.onCopy(this.$('textField_lahvtnei').getValue());
}

// 文本复制
export function onCopy(value) {
// 创建元素用于复制
const copyDom = document.createElement('input');
// 设置元素内容
copyDom.setAttribute('value', value);
// 将元素插入页面进行调用
document.body.appendChild(copyDom);
// 复制内容
copyDom.select();
// 将内容复制到剪贴板
document.execCommand('copy');
// 删除创建元素
document.body.removeChild(copyDom);
this.utils.toast({
title: '复制成功!',
type: 'success',
});
}

2.3 组件绑定事件

3. 实现效果

4. 在线试玩

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4