vue复制一个完整的div

vue复制一个完整的div

img

怎么才能执行方法的时候复制出一个和这个一样的div呢

https://blog.csdn.net/zhouhouyong_web/article/details/121404345 参考下。

可以使用Vue的模板引擎来复制页面标签

<template>
  <div>
    <!-- 要复制的元素 -->
    <div ref="myElement">这是要复制的元素</div>
    
    <!-- 复制元素的按钮 -->
    <button @click="copyElement">复制元素</button>
  </div>
</template>

<script>
export default {
  methods: {
    copyElement() {
      // 选择要复制的元素
      const elementToCopy = this.$refs.myElement;

      // 创建文本范围并选择要复制的元素
      const range = document.createRange();
      range.selectNode(elementToCopy);

      // 获取复制的内容
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);

      // 复制到剪贴板
      document.execCommand('copy');

      // 取消选中内容
      selection.removeAllRanges();
    }
  }
}
</script>

先创建一个 ref,以便在JavaScript中引用要复制的元素。例子中有一个按钮,当用户单击它时,会调用 copyElement 方法来复制元素。
在 copyElement 方法中选择要复制的元素并将其添加到文本范围中。然后获取用户选择的内容,并将其添加到复制文本范围中。再使用 document.execCommand('copy') 命令将所选内容复制到剪贴板中。最后取消选中的内容,这样用户不会感觉到这个操作。

  • 给你找了一篇非常好的博客,你可以看看是否有帮助,链接:Vue中移动div