Vue 커스텀 인쇄 기능 드래그 앤 드롭 예제

아래에서 vue 사용자 지시 드래그 기능 코드를 공유하겠습니다. 구체적인 코드는 다음과 같습니다：

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>예제 메서드</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <script src="../js/vue1.0.js"></script>
 <script src="../js/vue-resource.js"></script>
 <script>
  //사용자 지시
  Vue.directive('drag',function(){
   var oDiv = this.el;
   oDiv.onmousedown = function(ev){
    var disX = ev.clientX -oDiv.offsetLeft;
    var disY = ev.clientY - oDiv.offsetTop;
    document.onmousemove = function(ev){
     var l = ev.clientX-disX;
     var t = ev.clientY-disY;
     oDiv.style.left = l+'px';
     oDiv.style.top = t+'px';
    };
    document.onmouseup = function(){
     document.onmousemove=null;
     document.onmouseup=null;
    };
   };
  });
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{}
   });
  }
 </script>
</head>
<body>
<div id="box">
 <div v-drag :style="{width:'100px', height:'100px', background:'aqua', position:'absolute', right:0, top:0}>
 </div>
</div>
</body>
</html>

아래에서 Vue 자동화 키보드 정보를 보겠습니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>자동화 키보드 정보</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/vue1.0.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    Vue.directive('on').keyCodes.ctrl=17;
    Vue.directive('on').keyCodes.myenter=13;
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{},
        methods:{
          show:function(){
            alert(111);
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keydown.ctrl="show">
  <hr>
  <input type="text" @keydown.myenter="show | debounce 2000">
</div>
</body>
</html>

위에 설명된 것은 편집자가 여러분에게 소개한 Vue自定义指令拖拽功能及键盘信息입니다. 여러분에게 도움이 되길 바랍니다. 어떤 질문이나 의문이 있으면 댓글을 남겨 주시면, 편집자가 즉시 답변 드리겠습니다. 또한, 양해주시는 모든 분들께 감사드립니다.呐喊教程网站에 대한 지원에 감사합니다!

고지사항: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자가 모두 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 자체적으로 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권에 의심스러운 내용을 발견하면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보고할 때, #을 @으로 변경하십시오.）를 통해 신고하시고 관련 증거를 제공하시면, 사실이 확인되면 이 사이트는 즉시 의심스러운 저작권 내용을 삭제할 것입니다.

기본 가이드

좋아하는 것