鸿蒙类web开发中剪贴板功能实现问题

发布时间 2023-10-12 09:49:50作者: 1025445583
鸿蒙的类web开发范式是采用JS开发的,其中实现剪贴板功能需引入@ohos.pasteboard功能。

一、导包

import pasteboard from '@ohos.pasteboard';

二、创建两个button用于调用剪贴板

hml

<div class="container">
    <text>copy :{{title2}}</text>
    <text>vi:{{status}}</text>
    <button class="btn" value="复制" @click="handleClick"></button>
    <button class="btn" value="粘贴" @click="handlectrlv"></button>
</div>

js

import pasteboard from '@ohos.pasteboard';

export default {
    data: {
        status1:"复制内容",
        status2:"粘贴内容",
    },
    onInit() {
    },
    handleClick() {
        let s1 = pasteboard.getSystemPasteboard()
        let pasteData = pasteboard.createUriData(this.urlpath);
        s1.setPasteData(pasteData, (err, data) => {
            if (err) {
                console.error('Failed to set PasteData. Cause: ' + err.message);
                return;
            }
            this.status1 = pasteData.getPrimaryText()
            console.info('Succeeded in setting PasteData:');
        });
    },
    handlectrlv(){
        let s2 = pasteboard.getSystemPasteboard()
        s2.getPasteData((error, pasteData) => {
            if (error) {
                console.error('Failed to getPasteData. Cause: ' + error.message);
                return;
            }
            this.status2 = pasteData.getPrimaryText();
        });
    }
}

注意:

目前Deveco Studio提供的模拟器和预览器均不支持剪贴板功能,只可在真机上查看复制粘贴的效果。