欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue复制功能,点击复制input内容

程序员文章站 2022-05-14 22:57:00
...

首先要安装:cnpm install clipboard --save

然后再main.js中:

import Clipboard from ‘clipboard’;
Vue.prototype.Clipboard=Clipboard;

html:

<input v-show="shsw" v-model="center2" type="password" />
      <input v-show="shaw" v-model="center2" type="text" />
 
      <ul @click="copy1" id="copy_text1" :data-clipboard-text="this.center2">            :data-clipboard-text=" xxx "     为需要复制的内容                     
        <img src="@/assets/grzxzb/fz.png" alt="" />
      </ul>

然后在methods中:

 copy1() {
      var _this = this;
      var clipboard = new Clipboard("#copy_text1");
      console.log(111);
      clipboard.on("success", (e) => {
        alert("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Message({
          message: "该浏览器不支持自动复制",
          type: "warning",
        });
        // 释放内存
        clipboard.destroy();
      });
},
相关标签: vue vue js