zoukankan      html  css  js  c++  java
  • vue项目如何实现剪切板功能--vue-clipboard2

    看了几篇文章,但是只感觉这个比较言简意赅

    1。

    先安装

    npm install --save vue-clipboard2 or use dist/vue-clipboard.min.js 

    2。

    如果是npm,检查package.json是否安装成功

    3。

    npm run dev  启动一下。

    4。

    main.js添加

    import Vue

    import VueClipboard from 'vue-clipboard2'

    Vue.use(VueClipboard)

    5。

    <template id="t">
      <div class="container">
        <input type="textv-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',
      datafunction ({
        return {
          message'Copy These Text'
        }
      },
      methods{
        onCopyfunction (e{
          alert('You just copied: e.text)
        },
        onErrorfunction (e{
          alert('Failed to copy texts')
        }
      }
    })
    </script>
  • 相关阅读:
    牛儿
    Tarjan算法
    There&nbsp;is&nbsp;no&nbsp;resul…
    Struts2+JQuery+Json登陆实例
    struts2+jquery+easyui+datagrid+j…
    Spring:JdbcTemplate使用指南
    使用Spring的jdbcTemplate进一步简…
    JDBC连接MySQL数据库及示例
    PLSQL导入/导出数据方法
    PLSQ创建用户L
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/9933094.html
Copyright © 2011-2022 走看看