uni-app怎么编写uts组件 实现类似全局粘贴板全局悬浮窗这种组件？

在uni-app中编写一个UTS（Uni-app Tool Set）组件，实现类似全局粘贴板和全局悬浮窗的功能，可以通过使用uni-app提供的全局API和组件功能来完成。以下是一个简单的示例代码，展示如何实现这两个功能。

1. 全局粘贴板组件

首先，我们需要一个用于管理粘贴板内容的组件。由于JavaScript本身不支持直接访问系统粘贴板，我们可以借助uni-app提供的uni.setClipboardData和uni.getClipboardData API。

// utils/clipboard.js
export function setClipboardData(data) {
    return new Promise((resolve, reject) => {
        uni.setClipboardData({
            data: data,
            success: () => resolve(),
            fail: (err) => reject(err)
        });
    });
}

export function getClipboardData() {
    return new Promise((resolve, reject) => {
        uni.getClipboardData({
            success: (res) => resolve(res.data),
            fail: (err) => reject(err)
        });
    });
}

2. 全局悬浮窗组件

悬浮窗组件可以通过创建一个自定义组件，并使用uni.createSelectorQuery来获取页面元素的位置，以实现悬浮效果。以下是一个简单的悬浮窗组件示例：

<!-- components/FloatingWindow.vue -->
<template>
    <view class="floating-window" v-if="visible">
        <button @click="copyToClipboard">Copy to Clipboard</button>
        <!-- 其他内容 -->
    </view>
</template>

<script>
import { setClipboardData, getClipboardData } from '@/utils/clipboard.js';

export default {
    data() {
        return {
            visible: true
        };
    },
    methods: {
        async copyToClipboard() {
            try {
                const text = 'Hello, World!';
                await setClipboardData(text);
                uni.showToast({ title: 'Copied!', icon: 'success' });
            } catch (err) {
                console.error('Failed to copy text:', err);
            }
        }
    }
};
</script>

<style>
.floating-window {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>

3. 使用组件

在你的页面中使用这个悬浮窗组件，并确保它在全局范围内可见：

<template>
    <view>
        <FloatingWindow />
        <!-- 页面其他内容 -->
    </view>
</template>

<script>
import FloatingWindow from '@/components/FloatingWindow.vue';

export default {
    components: {
        FloatingWindow
    }
};
</script>

上述代码提供了一个基本的框架，你可以根据实际需求进一步扩展功能，比如添加更多交互、样式调整等。注意，由于uni-app在不同平台上的表现可能有所不同，你可能需要根据目标平台做一些适配工作。