Vue는 마우스 드래그 컨트롤 너비를 구현합니다.

Vue.js는 인기 있는 JavaScript 프레임워크일 뿐만 아니라 매우 유연하고 강력한 라이브러리입니다. 이 프레임워크를 통해 개발자는 프런트엔드 애플리케이션을 효율적으로 구현할 수 있습니다. 이번 글에서는 Vue.js를 사용하여 너비에 대한 마우스 드래그 제어를 구현하는 방법을 소개하겠습니다.

너비를 제어하기 위해 마우스 드래그를 구현하는 것은 많은 웹 애플리케이션에서 일반적인 상호 작용입니다. 예를 들어 테두리 막대나 슬라이더를 드래그하여 컨테이너 크기를 조정하거나 이미지 크기를 조정합니다. 이 상호작용의 가장 기본적인 UI 부분은 드래그 가능한 요소와 대상 요소인 컨테이너입니다. Vue.js에서는 지시문과 이벤트 핸들러를 사용하여 드래그 앤 드롭을 구현합니다.

첫 번째 단계는 Vue 인스턴스에서 드래그를 트리거하는 명령을 정의하는 것입니다. "v-draggable" 지시어는 드래그 요소에 바인딩되어야 합니다. 이 지시어는 Vue 사용자 정의 지시어 API를 사용하여 전역 또는 로컬 구성 요소로 등록됩니다.

Vue.directive('draggable', {
바인딩(el, 바인딩, vnode) {

  let xOffset = 0;
  let yOffset = 0;

  const handleMouseDown = (event) => {
      if (!event.target.classList.contains('drag-handle')) {
          return;
      }

      xOffset = event.clientX;
      yOffset = event.clientY;

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (event) => {
      const currentX = event.clientX;
      const currentY = event.clientY;

      const dx = currentX - xOffset;
      const dy = currentY - yOffset;

      const newWidth = el.offsetWidth + dx;

      vnode.context[binding.expression] = newWidth;
  };

  const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
  };

  el.querySelector('.drag-handle').addEventListener('mousedown', handleMouseDown);

}
});

지시문에서는 마우스 다운 이벤트(mousedown)를 정의합니다. 이벤트를 지시문의 바인딩 요소(el)에 바인딩합니다. 이벤트가 발생한 후 요소를 기준으로 마우스 오프셋을 기록하여 드래그하는 동안 요소의 새 위치를 계산할 수 있습니다. 그런 다음 mousemove 이벤트에서 오프셋을 계산하고 새 너비를 파악하여 Vue 인스턴스에 바인딩합니다.

마지막으로 사용자가 드래그 영역을 떠난 후에도 mouseup 이벤트가 감지될 수 있도록 mouseup 이벤트(mouseup)를 문서 객체에 바인딩하고 mousemove 및 mouseup 이벤트에 대한 리스너를 지웁니다.

다음으로 "v-draggable" 지시어를 사용하여 드래그 요소를 Vue 구성 요소의 데이터 속성에 바인딩합니다.

4883ec0eb33c31828b7c767c806e14c7
d1e062c00b82b4850bb5e4d5394a595f드래그 미16b28748ea4df4d9c2150843fecfba68
059ea7b311f73addd7e379ec6a41cc5b16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Vue.comComponent('크기 조정 가능', {
템플릿: `

<div class="resizable">
  <div class="wrapper">
    <div class="panel-a">
      <div v-draggable="width" class="drag-area">
        <div class="drag-handle"></div>
      </div>
    </div>
    <div class="panel-b" :style="{ width: width + 'px' }"></div>
  </div>
</div>

`,
data() {

return {
  width: 400,
};

},
}) ;

이 예에서는 React 구성 요소 "크기 조정 가능"을 만듭니다. 드래그 가능한 영역과 컨테이너로 구성됩니다. v-draggable 지시문을 사용하여 드래그 요소를 너비 값에 바인딩하고 해당 요소는 "drag-area" 클래스의 컨테이너에 추가됩니다.

마지막으로 구성 요소를 DOM에 렌더링합니다.

new Vue({
el: '#app',
});

이러한 방식으로 Vue.js를 사용하여 드래그 앤 드롭을 구현하여 드래그된 요소의 너비를 제어하는 ​​데 성공했습니다. Vue.js는 많은 유연성과 확장성을 제공하므로 이러한 종류의 상호 작용을 매우 쉽게 개발할 수 있습니다.

위 내용은 Vue는 마우스 드래그 컨트롤 너비를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!