美文网首页前端技术
使用vue-clipboard2

使用vue-clipboard2

作者: 剑有偏锋 | 来源:发表于2019-06-21 18:15 被阅读7次

    一安装

    npm install --save vue-clipboard2
    

    二 main.js注册VueClipboard插件

    import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2'
     
    Vue.use(VueClipboard)
    

    三实例

    <div id="app"></div>
     
    <template id="t">
      <div class="container">
        <input type="text" v-model="message">
        <button type="button"
          v-clipboard:copy="message"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError">Copy!</button>
      </div>
    </template>
     
    <script>
    new Vue({
      el: '#app',
      template: '#t',
      data: function () {
        return {
          message: 'Copy These Text'
        }
      },
      methods: {
        onCopy: function (e) {
          alert('You just copied: ' + e.text)
        },
        onError: function (e) {
          alert('Failed to copy texts')
        }
      }
    })
    </script> 
    

    四 运行实例

    image.png

    五 引用

    https://www.npmjs.com/package/vue-clipboard2

    相关文章

      网友评论

        本文标题:使用vue-clipboard2

        本文链接:https://www.haomeiwen.com/subject/yspuqctx.html