uniapp复制功能的两种实现方式-开发总结（小程序和h5适用）

在uinapp项目应用如下：

第一种形式，适用h5移动端的复制方式
安装vue-clipboard
npm install --save vue-clipboard2
或者 yarn add vue-clipboard2 --save

全局注册使用：main.js入口文件

import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

如果是已经在使用中的项目请卸载node_modules重新安装一下依赖，免得出现文件路径找不到的问题

安装依赖：npm i 或者 yarn install

以上步骤完成之后就可以在页面直接使用了，以下是clipboard.vue页面，这样使用

template部分
dataMessge是要复制的数据

 		<view
           class="main-content-right"
            v-clipboard:copy="dataMessge"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            >复制</view
          >
        </view>

javascript部分

export default {
  methods: {
    //复制-h5
    onCopy(e) {
      uni.showToast({
        title: "复制成功",
      });
      console.log("复制成功！");
    },
    onError（e）{
      uni.showToast({
        title: "复制失败",
      });
      console.log("复制失败！");
    }
  },
};

第二种方式 使用uniapp提供的api 适用小程序开发
template部分
dataMessge是要复制的数据

  <view
  	   class="main-content-right"
       @click="copyMessage(dataMessge)"
   >复制</view>
       

javascript部分

 //复制
    copyMessage(value) {
      uni.setClipboardData({
        data: value,
        success: function (res) {
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: "复制成功",
              });
            },
          });
        },
      });
    },