uni-app:点击按钮复制文本内容(uni.setClipboardData)

博客涉及uni-app和Java在前端开发方面的内容,但具体内容缺失。uni-app是前端开发工具,Java常用于后端开发,二者结合或能为前端开发带来更多可能。
<template>
  <view>
    <button @click="copyText">复制文本</button>
  </view>
</template>

<script>
export default {
  methods: {
    copyText() {
      const text = '要复制的文本内容';
      uni.setClipboardData({
        data: text,
        success() {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        }
      });
    }
  }
};
</script>

<template> <view class="container"> <!-- 顶部图片 --> <image src="/static/E-mailForComplaint.png" class="header-image" mode="widthFix" ></image> <!-- 投诉邮箱板块 --> <view class="complaint-card"> <text class="card-title">其亚投诉邮箱</text> <!-- 邮箱信息 -点击复制 --> <view class="info-item" @tap="copyEmail"> <view class="icon-container"> <text class="icon">✉️</text> </view> <view class="info-content"> <text class="info-label">邮箱:</text> <text class="info-value">2412077392@qq.com</text> </view> </view> <!-- 地址信息 -点击复制 --> <view class="info-item" @tap="copyAddress"> <view class="icon-container"> <text class="icon">📍</text> </view> <view class="info-content"> <text class="info-label">地址:</text> <text class="info-value">新疆维吾尔自治区昌吉回族自治州吉木萨尔县环城西路451号</text> </view> </view> <!-- 操作提示 --> <view class="action-tip"> <text class="tip-icon">💡</text> <text class="tip-text">点击上方信息可直接复制内容</text> </view> </view> <!-- 底部说明 --> <view class="footer"> <text class="footer-text">我们将在收到邮件并核实后及时回复您</text> <text class="footer-text">工作日9:00-19:00</text> </view> </view> </template> <script setup> import { ref } from 'vue'; // 复制邮箱功能 const copyEmail = () => { uni.setClipboardData({ data: '2412077392@qq.com', success: () => { uni.showToast({ title: '邮箱已复制', icon: 'success', duration: 1500 }); }, fail: () => { uni.showToast({ title: '复制失败', icon: 'error', duration: 1500 }); } }); }; // 复制地址功能 const copyAddress = () => { uni.setClipboardData({ data: '上海市浦东新区世纪大道1777号东方希望大厦16楼', success: () => { uni.showToast({ title: '地址已复制', icon: 'success', duration: 1500 }); }, fail: () => { uni.showToast({ title: '复制失败', icon: 'error', duration: 1500 }); } }); }; </script> <style lang="scss"> .container { display: flex; flex-direction: column; min-height: 100vh; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 20rpx; } .header-image { width: 100%; border-radius: 20rpx; box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1); margin-bottom: 40rpx; } .complaint-card { background-color: #fff; border-radius: 25rpx; padding: 40rpx; box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08); margin-bottom: 40rpx; position: relative; } .card-title { display: block; text-align: center; font-size: 40rpx; font-weight: bold; color: #2c3e50; margin-bottom: 50rpx; padding-bottom: 25rpx; border-bottom: 4rpx solid #3498db; position: relative; &::after { content: ''; position: absolute; bottom: -4rpx; left: 50%; transform: translateX(-50%); width: 120rpx; height: 6rpx; background: #3498db; border-radius: 3rpx; } } .info-item { display: flex; align-items: center; padding: 30rpx 20rpx; margin-bottom: 30rpx; background-color: #f8fafc; border-radius: 20rpx; border-left: 6rpx solid #3498db; transition: all 0.3s ease; position: relative; &:last-child { border-left-color: #e74c3c; } &:active { transform: scale(0.98); background-color: #e3f2fd; } } .icon-container { width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #e3f2fd; display: flex; align-items: center; justify-content: center; margin-right: 25rpx; transition: all 0.3s ease; } .info-item:active .icon-container { background-color: #bbdefb; transform: scale(1.1); } .icon { font-size: 40rpx; } .info-content { flex: 1; } .info-label { font-size: 32rpx; color: #7f8c8d; font-weight: 500; display: block; margin-bottom: 10rpx; } .info-value { font-size: 34rpx; color: #2c3e50; display: block; font-weight: 500; } .copy-indicator { display: flex; align-items: center; background: rgba(52, 152, 219, 0.1); border-radius: 30rpx; padding: 8rpx 20rpx; margin-left: 15rpx; transition: all 0.3s ease; } /* 操作提示 */ .action-tip { display: flex; align-items: center; justify-content: center; background: #e3f2fd; border-radius: 20rpx; padding: 20rpx; margin-top: 40rpx; } .tip-icon { font-size: 38rpx; margin-right: 15rpx; color: #3498db; } .tip-text { font-size: 28rpx; color: #3498db; font-weight: 500; } .footer { margin-top: auto; text-align: center; padding: 30rpx; } .footer-text { display: block; font-size: 28rpx; color: #7f8c8d; margin-bottom: 15rpx; } /* 响应式调整 */ @media (min-width: 768px) { .container { max-width: 750px; margin: 0 auto; padding: 40rpx; } .complaint-card { padding: 60rpx; } } </style> 帮我修改代顶部图片、标题、邮箱、地址都通过接口:http://172.26.26.34:8080/incorruptFront/complaintInfo获得,接口响应数据:{ "msg": "操作成功", "code": 200, "data": { "title": "其亚投诉渠道", "imageUrl": "http://172.26.26.34:9300/statics/2025/08/20/E-mailForComplaint_20250820181935A010.png", "email": "792049846@qq.com", "address": "新疆昌吉回族自治州准东经济技术开发区环城西路451号附5号901室(五彩湾)" } }
最新发布
08-22
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

25号底片~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值