Html5 클립보드 기능 구현 코드

최근 Vue는 Line(중국의 WeChat과 유사한 일본 및 한국 플랫폼)의 임베디드 H5를 개발하는 데 사용되었습니다. 요구 사항 중 하나는 현재 링크를 붙여넣은 다음 PC로 보내고 컴퓨터에서 여는 것입니다. 모든 컬렉션에서 다음과 같은 상황이 발견되었습니다.

이 상황은 입력 상자가 아닌 텍스트를 클립보드에 복사하는 경우에 적용됩니다.

 <h1 id=content>복사된 콘텐츠</h1> <button id=button>복사하려면 클릭하세요.</button> <script> (function(){ 버튼.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //선택한 범위 생성 var range = document.createRange(); //클립보드에서 콘텐츠 제거 window.getSelection().removeAllRanges(); //클립보드에 새 콘텐츠 추가 window.getSelection().addRange(range) //복사 var 성공적인 = document.execCommand( 'copy') ; try{ var msg = 성공 ? 성공 : 실패; 경고('복사 명령: ' + msg) } catch(err); 복사!'); } }) })() </script>

입력, 텍스트 영역의 텍스트를 복사하는 데 사용됩니다.

 <input type=text id=input value=17373383> <br> <button type=button id=button>입력 상자의 내용 복사</button> <script> (function(){button.addEventListener('click' , function (){ input.select(); document.execCommand('복사'); Alert('복사 성공') })() </script>

이 방법은 확장될 수도 있으며 방법 1과 동일한 목적으로 사용됩니다. 입력 상자를 동적으로 생성하고 해당 내용을 복사하려는 내용으로 설정한 다음 마지막으로 제거하거나 숨깁니다.

3.js 클립보드 플러그인(clipboard.js)에 콘텐츠 복사

clipsboard.js 공식 홈페이지

clipsboard.js CDN 주소

인용하다:

NPM npm install --save clipboard

CDN <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></script>

 <!--기본값은 .btn에서 data-clipboard-text의 속성 값을 가로채는 것입니다.--> <!-- <button class=btn data-clipboard-text=3>복사</button> --> < !- -입력 입력 상자의 값을 가로채기--> <input id=foo value=https://github.com/zenorocha/clipboard.js.git> <!-- Trigger --> <button class=btn data-clipboard-target=#foo> <img src=assets/clippy.svg </button> <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></ script> <script> var 클립보드 = new ClipboardJS('.btn'); console.log(e); });

여기에는 많은 고급 사용법이 있습니다. 자세한 내용은 공식 웹사이트 로직을 참조하세요.

4. Vue 프레임워크에서 제공하는 클립보드 플러그인 vue-clipboard2

 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // 이 줄 추가 Vue.use(VueClipboard)

샘플1

 <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>복사!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: '이 텍스트를 복사하세요' } }, method: { onCopy: function (e) { Alert('방금 복사했습니다: ' + e.text) }, onError: function (e) { Alert('텍스트 복사에 실패했습니다') } } }) </script>

샘플2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>복사!</button> < /div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy This Text' } }, 메소드: { doCopy: function () { this.$copyText(this.message).then(function (e) { Alert('복사됨') console.log(e) }, function (e) { Alert('복사할 수 없음') console.log(e) }) } } }) </script>

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.