Xiao Bai simply record the requirements encountered in the work: how to implement the replication function in VUE (note: rely on the third-party plug-in Clipboard)

Install plug-ins

NPM install clipboard --save <script SRC ="js/clipboard.min.js"</script> (download address: https://clipboardjs.com/)Copy the code

Global injection (main.js)

    import VueClipboard from 'vue-clipboard2'

    Vue.use(VueClipboard)
Copy the code

Three. Packaging method is convenient for multiple use

Create an index.js file that holds methods that your project will use multiple times

exportDefault {install(Vue,opstion){// Write the method in Vue prototype convenient call Vue. Prototype. copy =function (value) {
        this.$copyText(`${value}'). Then (res => {// This is Element's Message prompt component this.$message({
              message: "Copy successful".type: "success"
            });
          },
          err => {
            this.$message.error("Replication failed"); }); }}},Copy the code

4. Call copy on the page that needs to be copied

        <template>
          <el-tooltip class="item" effect="dark" content="Copy" placement="bottom">
              <i class="icon copy iconfont" @click.stop="copyCode()"> &#xe603; </el-tooltip> </template> <script> // call copy method copyCode(scope) {// pass value this.copy(scope.row.date); }, </script>Copy the code

Just start to write the work record the nuggets are very lenient, if there is a mistake please inform.