클립 보드와 V-클립 보드 클립 보드에 복사

프로젝트가 필요하기 때문에, 장소는 거의 사본에 사용하고, 일부는 일부는 VUE 프로젝트이며, 순수 HTML 페이지이며,이 두 가지 방법으로 요약하는 것입니다

사용 클립 보드

당신은 프레임을 사용 할 필요가 없습니다

먼저 클립 보드를 소개합니다

1 <script의 SRC = "https://code.jquery.com/jquery-2.2.4.min.js"> </ script>
 2 <script의 SRC = "https://cdn.jsdelivr.net/clipboard.js /1.5.12/clipboard.min.js "> </ script>

　　코드 섹션

1  < 본체 > 
2      < DIV > 
3          < 스팬 클래스 = "kf_num_title" >客服微信号: </ 스팬 > 
4          < 입력 유형 = "텍스트" 클래스 = "kf_num_tel" 값 = "微信客服(12345678)" ID = " 이 target1 " 읽기 전용 =" "  /> 
5      </ DIV > 
6      < 버튼 클래스 ="kf_num_btn " 데이터 보드 액션 ="복사 "데이터를 클립 보드 대상 = "#이 target1" ID= "copy_btn1" > 복사 </ 버튼 > 
7.      < 스크립트 > 
8.          // 마이크로 편지 사본 
(9).          송출 targetText1 = $ ( " #이 target1 " )는 .text ();    // 내용을 취득 복사 할 
(10)에게          송출의 clipboard1 =  새 새 (A 클립 보드를 ' copy_btn1 번호 ' );    // 객체에 새로운 새로운 복사 버튼을 클릭 
. (11)          clipboard1.on ( ' 성공 ' , 기능 (E)는 {        // 복사 성공 
(12)             e.clearSelection는 ();                 // 선택된 텍스트의 선택을 취소 상태 
(13)              (경고 ' 복사 완료 ' )
 (14)          })
 15      </ 스크립트 > 
16  </ 바디 >

브이 - 클립 보드를 사용하여

　　효과 VUE에서 프로젝트 복사를 사용하여

　　1, 설치 참조

1  @ 1 설치 : 
2   NPM은 V- --save 설치 클립 보드
 . 3  // main.js에 통합 2 
. 4   수입을 클립 보드 "클립 보드-V '에서
 . 5   Vue.use (클립 보드)을

　　하여 2

1 <템플릿>
 2    <div>
 4      <div>
 5        <div>链接</ div>
 6        <div 클래스 = "쇼트 링크"> {{regurl}} </ div>
 7      </ div>
 8      <div >
 9        <버튼 V-클립 : 복사 = "regurl"V-클립 : 성공 = "onCopy"V-보드 오류 = "의 OnError">复制</ 버튼>
 10      </ div>
 11    </ div>
 12 </ 템플릿>
 (13) <스크립트>
 (14)  
(15) 수출 기본 {
 16    이름 : "복사" ,  
17 개    데이터 () {
 18      창 {
. 19        regurl는 " https://www.cnblogs.com/sevenflower은 /"
 20이다      };
 21이다    }
 (22) 인    방법 : {
 23은      () {oncopy
 24        ( "복사 완료"경고 ),
 (25)      }
 (26)이다      의 OnError () {
 27        ( "복사 실패"경고 ),
 28      }
 29    }
 30  }
 (31)는 </ SCRIPT>

클립 보드와 V-클립 보드 클립 보드에 복사

추천