vue 使用clipboard实现移动端一键复制

最新推荐文章于 2024-04-16 14:19:44 发布

郅菇凉

最新推荐文章于 2024-04-16 14:19:44 发布

阅读量706

点赞数

分类专栏： vue前端文章标签：一键复制 clipboard

本文链接：https://blog.youkuaiyun.com/qq_24612793/article/details/103781254

版权

本文介绍了如何在Vue项目中利用clipboard API实现移动端的文字一键复制功能，包括执行npm命令安装依赖，配置main.js，以及在具体的.vue组件中应用的步骤。同时，文章指出即使不使用特定UI框架，也能直接使用该函数来实现复制功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1)执行命令,我是镜像npm

 cnpm install clipboard --save

(2) main.js中加

import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;

(3) .vue文件

      <yd-cell-group>
        <yd-cell-item>
          <yd-textarea slot="right" placeholder="此处生成API链接"  v-model="link"></yd-textarea>//要输入框的内容
        </yd-cell-item>
        <div class="buy_btn2">
          <yd-button
            size="small"
            type="primary"
            shape="circle"
            @click.native="copyRes" //触发函数
            class="api_btn1" //获取dom
            data-clipboard-action="copy" //必加
            :data-clipboard-text="link(复制的