首页 > 软件开发 > 编程语言 >

vue项目如何实现剪切板功能--vue-clipboard2

来源:互联网 2023-03-17 00:18:01 229

vue项目利用vue-clipboard2实现剪切板的功能,具体的步骤如下介绍所示:gYV办公区 - 实用经验教程分享!

工具/原料

  • npm

方法/步骤

  • 1

    安装vue-clipboard2插件gYV办公区 - 实用经验教程分享!

    npm install --save vue-clipboard2gYV办公区 - 实用经验教程分享!

    vue项目如何实现剪切板功能--vue-clipboard2gYV办公区 - 实用经验教程分享!

  • 2

    查看配置文件package.jsongYV办公区 - 实用经验教程分享!

    检查vue-clipboard2是否安装成功gYV办公区 - 实用经验教程分享!

    vue项目如何实现剪切板功能--vue-clipboard2gYV办公区 - 实用经验教程分享!

  • 2相关内容未经授权抓取自百度经验
  • 3

    启动服务gYV办公区 - 实用经验教程分享!

    npm run devgYV办公区 - 实用经验教程分享!

    vue项目如何实现剪切板功能--vue-clipboard2gYV办公区 - 实用经验教程分享!

  • 4

    main.js添加gYV办公区 - 实用经验教程分享!

    importVuegYV办公区 - 实用经验教程分享!

    importVueClipboardfrom'vue-clipboard2'gYV办公区 - 实用经验教程分享!

    Vue.use(VueClipboard)gYV办公区 - 实用经验教程分享!

    vue项目如何实现剪切板功能--vue-clipboard2gYV办公区 - 实用经验教程分享!

  • 5

    copy组件gYV办公区 - 实用经验教程分享!

    v-clipboard:copy="message"gYV办公区 - 实用经验教程分享!

    v-clipboard:success="onCopy"gYV办公区 - 实用经验教程分享!

    v-clipboard:error="onError"gYV办公区 - 实用经验教程分享!

    vue项目如何实现剪切板功能--vue-clipboard2gYV办公区 - 实用经验教程分享!

  • 6

    查看效果gYV办公区 - 实用经验教程分享!

    点击按钮,弹框显示了copy的内容gYV办公区 - 实用经验教程分享!

    后两张图是在微信的输入框中测验刚刚的copy是否真的复制到了剪切板中。gYV办公区 - 实用经验教程分享!

    vue项目如何实现剪切板功能--vue-clipboard2gYV办公区 - 实用经验教程分享!

    vue项目如何实现剪切板功能--vue-clipboard2gYV办公区 - 实用经验教程分享!

    vue项目如何实现剪切板功能--vue-clipboard2gYV办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!gYV办公区 - 实用经验教程分享!


    标签: 编程语言

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码