taipy 复制文本到剪切板

前言

同学想要一个提取验证码的工具，于是就用 taipy 帮他做了一个。 但有一个功能很难搞定，点击复制文本到剪切板。 查了很多资料都没有搞定。 一直都知道用 copy-to-clipboard 就能搞定。 而 taipy 必须通过插件才能执行 javascript 代码。

复制文本UI插件

taipy 的 UI 是基于 React 的。 所以我们通过 useEffect 订阅属性的变化，然后将收到的属性复制到剪切板就可以。

import { useEffect } from "react";

import { useDynamicProperty } from "taipy-gui";
import copy from "copy-to-clipboard";

interface CopyProps {
  text?: string;
}

export default function Copy({ text }: CopyProps) {
  // Dynamic string property
  const textProperty = useDynamicProperty(text, "", "");

  useEffect(function() {
    if (textProperty) {
      copy(textProperty);
    }
  }, [textProperty]);

  return <span />
}

我们通过 webpack 将 Copy 组件进行编译，导出名为 Exts, 并生成文件 dist/library.js。

taipy 插件

在上一步 Copy 的组件我们已经制作好了。 我们需要给 taipy 进行调用，需要声明为 taipy 插件，如下：

from taipy.gui.extension import ElementLibrary, Element, ElementProperty, PropertyType


class Exts(ElementLibrary):

    def get_name(self) -> str:
        return "exts"

    def get_elements(self) -> dict:
        return {
            "copy": Element(
                "text",
                {
                    "text": ElementProperty(PropertyType.dynamic_string)
                },
                react_component="Copy"
            )
        }

    def get_scripts(self) -> list[str]:
        return ["dist/library.js"]

我们告诉 taipy 插件的名字为 exts, 组件为 copy, 并指明编译后的 js 文件。

调用复制插件

通过传入 Gui 参数 libraries, 使得 taipy 知道我们的插件。 并在插件中调用 exts.copy 组件。

from taipy.gui import Gui
from exts import Exts

copy_text = ''

def do_copy(state):
    state.copy_text = 'This is the Copy text'

page = '''
<|复制|button|on_action=do_copy|>

<|{copy_text}|exts.copy|>
'''

Gui(page=page, libraries=[Exts()]).run(title="复制到剪切板")

将代码保存成 main.py 然后执行 python main.py。 打开页面后点击复制按钮，然后看看剪切板的内容。

后记

通过一个 Copy 的插件实现 taipy 复制文本到剪切板的功能。