更新记录

1.0.2（2025-05-08） 下载此版本

优化组件

1.0.1（2025-05-08） 下载此版本

调整说明文挡错误

1.0.0（2025-05-08） 下载此版本

新增组件

平台兼容性

hbxw-copy 复制组件

介绍

hbxw-copy 是一个简单易用的文本复制组件，用于快速实现文本内容复制到剪贴板的功能，支持自定义样式、插槽内容和复制事件回调

特性

• 一键复制文本到剪贴板
• 支持自定义复制成功提示内容
• 支持自定义按钮样式和文本
• 支持通过插槽自定义复制按钮
• 支持复制事件回调

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="container">
        <view class="title">hbxw-copy 复制组件</view>

        <view class="demo-section">
            <view class="section-title">基础用法</view>
            <view class="demo-item">
                <text class="demo-label">文本复制：</text>
                <view class="demo-content">
                    <text class="copy-text">这是一段可以复制的文本</text>
                    <hbxw-copy content="这是一段可以复制的文本" @copy="onCopy"></hbxw-copy>
                </view>
            </view>
        </view>

        <view class="demo-section">
            <view class="section-title">自定义按钮文本</view>
            <view class="demo-item">
                <text class="demo-label">自定义按钮文本：</text>
                <view class="demo-content">
                    <text class="copy-text">这是一段可以复制的文本</text>
                    <hbxw-copy 
                        content="这是一段可以复制的文本" 
                        text="点我复制" 
                        @copy="onCopy">
                    </hbxw-copy>
                </view>
            </view>
        </view>

        <view class="demo-section">
            <view class="section-title">自定义样式</view>
            <view class="demo-item">
                <text class="demo-label">自定义按钮样式：</text>
                <view class="demo-content">
                    <text class="copy-text">自定义样式的复制按钮</text>
                    <hbxw-copy 
                        content="自定义样式的复制按钮" 
                        :coustomStyle="{
                            backgroundColor: '#007AFF',
                            color: '#ffffff',
                            borderRadius: '6rpx',
                            padding: '6rpx 20rpx',
                            fontSize: '24rpx',
                            border: 'none'
                        }"
                        @copy="onCopy">
                    </hbxw-copy>
                </view>
            </view>
        </view>

        <view class="demo-section">
            <view class="section-title">使用插槽自定义内容</view>
            <view class="demo-item">
                <text class="demo-label">使用插槽：</text>
                <view class="demo-content">
                    <text class="copy-text">使用插槽自定义复制按钮</text>
                    <hbxw-copy content="使用插槽自定义复制按钮" @copy="onCopy">
                        <template #trigger="{status, content}">
                            <view class="custom-copy-btn">
                                <text class="copy-icon">📋</text>
                                <text>点击复制</text>
                            </view>
                        </template>
                    </hbxw-copy>
                </view>
            </view>
        </view>

        <view class="demo-section">
            <view class="section-title">自定义提示内容</view>
            <view class="demo-item">
                <text class="demo-label">自定义提示文字：</text>
                <view class="demo-content">
                    <text class="copy-text">复制时显示自定义提示</text>
                    <hbxw-copy 
                        content="复制时显示自定义提示" 
                        tipsContent="内容已复制到剪贴板"
                        @copy="customTips">
                    </hbxw-copy>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    data() {
        return {}
    },
    methods: {
        onCopy(result) {
            if (result.status) {
                console.log('复制成功:', result.content);
            } else {
                console.log('复制失败');
                uni.showToast({ 
                    title: '复制失败', 
                    icon: 'none' 
                });
            }
        },
        customTips(result) {
            if (result.status) {
                console.log('复制成功:', result.content);
            } else {
                console.log('复制失败');
            }
        }
    }
}
</script>

<style lang="scss">
.container {
    padding: 30rpx;
}

.title {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
}

.demo-section {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
    padding-bottom: 16rpx;
    border-bottom: 1px solid #eee;
}

.demo-item {
    margin-bottom: 20rpx;
}

.demo-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
    display: block;
}

.demo-content {
    display: flex;
    align-items: center;
    padding: 16rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
}

.copy-text {
    flex: 1;
    font-size: 28rpx;
    color: #333;
}

.custom-copy-btn {
    display: flex;
    align-items: center;
    background-color: #f0f7ff;
    padding: 6rpx 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #007AFF;
}

.copy-icon {
    margin-right: 8rpx;
}

.silent-copy-btn {
    background-color: #f5f5f5;
    padding: 6rpx 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #666;
}

.long-text {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    line-height: 1.6;
    padding: 16rpx;
    background-color: #f0f7ff;
    border-radius: 6rpx;
}
</style> 

API

Props

Events

Slots

注意事项

1. 如果不传递任何插槽内容，组件会显示默认的复制按钮，可通过 text 属性设置按钮文本
2. 复制功能依赖于 uni.setClipboardData API，请确保运行环境支持该 API
3. 组件源码很小的，显示大是因为有示例图片，真正打包到项目中的是很小的，请放心使用