vue自定义指令实现复制功能

88 阅读1分钟

思路:

  • 使用浏览器自带的execCommand使用Copy,但此方法只能是被选中的值才能进行复制粘贴
  • 动态创建一个文本域,将拿到的文字放在文本域中,然后自动选中,再调用浏览器方法即可
  • 为了方便我们操作同一个方法或者value值,可以将一些方法或者属性绑定在el上

提示:想要选中文本框的内容,有如下两个方法可以

方法一:通过聚焦 然后设置光标的方法

textarea.focus()
textarea.setSelectionRange(0, textarea.value.length)

方法二:通过输入框的select方法 选中全部即可

textarea.select()

全部代码代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue自定义指令复制</title>
  <!-- 引入VUE -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <p v-copy:foo="message + '今天去环球影城扮演威震天' + current">
      <a href="javascript:;" @click="current++;">点击复制A{{current}}</a>
    </p>
    <p v-copy:foo="message + '我是为中华崛起而读书的抗日分子'">
      点击复制B
    </p>
    <input v-focus type="text" placeholder="自定义聚焦指令">
  </div>
  <script>
    window.onload = function() {
      var app = new Vue({
        el: '#app',
        data() {
          return {
            current: 0,
            message: '大家好!'
          }
        },
        directives: {
        focus: {
          // 指令的定义
          inserted: function (el) {
            el.focus()
          }
        },
        copy: {
          bind: (el, binding, vnode) => {
            el.$text = binding.value //防止内容没有更新情况下第一次点击弹窗
            el.handel = () => {
            if(!el.$text) {
              alert('无复制的内容')
            }
            const textarea = document.createElement('textarea')
            textarea.readOnly = 'readonly'
            textarea.style.position = 'absolute'
            textarea.style.left = '-9999px'
            textarea.value = el.$text
            document.body.appendChild(textarea)
 
            // 被选中即可 方法一
            textarea.focus()
            textarea.setSelectionRange(0, textarea.value.length)
            
            //方法二 textarea.select() //选中所有
            
 
            const result = document.execCommand('Copy') //只有被选中的时候才能进行粘贴
            if(result) {
              console.warn(`复制成功: ${el.$text}`)
            }
            document.body.removeChild(textarea)
            }
            el.addEventListener('click', el.handel)
          },
          inserted: (el, binding, vnode) => {
            console.log('2')
          },
          update: (el, {value}) => {
            console.log('3')
          },
          componentUpdated:(el, { value }) => {
            console.log('4')
            el.$text = value
          },
          unbind: (el) => {
            el.removeEventListener('click', el.handel)
          }
        }
      }
      })
    }
  </script>
</body>
</html>