vue 如何实现点击复制?

简介: vue 如何实现点击复制?

js用 copy


vue呢?


使用navigator.clipboard.writeText()。如果用户授予了相应的权限,就能提供系统的读写访问。在 Web 应用程序中,Clipboard API 可用于实现剪切、复制和粘贴功能。Clipboard API方法是异步的,返回一个promise对象。


这里需要给一个元素绑定事件

2.使用document.execCommand('copy')方法

使用document。execcmmand(copy)


这样的一个方法


通过创建一个textarea元素,将要复制的文本设置成textarea的value,然后将其添加到文档中,选中文本使用document.execCommand('copy')方法进行复制,最后将textarea元素移除

export default {
  data() {
    return {
      textToCopy: '要复制的文本'
    }
  },
  methods: {
    copyToClipboard() {
      // 创建一个textarea元素
      const textarea = document.createElement('textarea');
      // 设置textarea的值为要复制的文本
      textarea.value = this.textToCopy;
      // 将textarea添加到文档中
      document.body.appendChild(textarea);
      // 选中textarea中的文本
      textarea.select();
      try {
        // 尝试复制选中的文本
        const successful = document.execCommand('copy');
        const msg = successful ? '复制成功' : '复制失败';
        console.log(msg);
      } catch (err) {
        console.log('不能使用这种方法复制', err);
      }
      // 将textarea从文档中移除
      document.body.removeChild(textarea);
    }
  }
}
}

document.execCommand('copy')方法

相关文章
|
3天前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
3天前
|
JavaScript
|
1天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
2天前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
5 1
|
3天前
|
JavaScript
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
|
2天前
|
JavaScript 前端开发
一个好看的vue admin模板
这是一个关于Vue管理模板的引用,提到了[PanJiaChen](https://github.com/PanJiaChen/vue-admin-template)在GitHub上的`vue-admin-template`项目。该项目是一个前端管理模板,链接指向了详细的资源。页面中还包含了一张图片,但markdown格式中无法直接显示。简而言之,这是关于一个基于Vue的后台管理界面模板的参考信息。
|
2天前
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
6 0
|
2天前
|
JavaScript
vue知识点
vue知识点
5 0
|
3天前
|
JavaScript
|
3天前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法