使用vue3實現(xiàn)簡單的滑塊組件

更新時間：2023年08月01日 10:58:26 作者：bigFace

這篇文章主要給大家介紹一下如何使用vue3實現(xiàn)簡單的滑塊組件,文中有詳細的代碼示例講解,具有一定的參考價值,感興趣的小伙伴跟著小編一起來看看吧

滑塊組件主要是利用鼠標事件，讓滑塊跟著鼠標跟著x軸動，效果如下。

創(chuàng)建了一個名為 CustomSlider 的自定義滑塊組件。它接受 min、max 和 step 作為 props，用于設置滑塊的取值范圍和步長。使用 emits 屬性聲明了一個名為 update:modelValue 的自定義事件，用于向父組件發(fā)送滑塊值的更新。

name: 'CustomSlider',
props: { min: { type: Number, default: 0 }, 
    max: { type: Number, default: 100 }, 
    step: { type: Number, default: 1 } },
emits: ['update:modelValue'],

在 setup 函數(shù)中，我們使用了 Vue 3 的組合式 API 來定義滑塊組件的邏輯。我們使用了 ref 來創(chuàng)建了 thumbPosition 和 isDragging 兩個響應式變量。thumbPosition 用于控制滑塊的位置，isDragging 用于標記是否正在拖動滑塊。

通過計算屬性 trackWidth，我們根據(jù)最小值和最大值計算出滑塊軌道的寬度，用于動態(tài)設置樣式。

   const thumbPosition = ref('0%');
    const isDragging = ref(false);
    const trackWidth = computed(() => {
      const range = props.max - props.min;
      return `${(100 * range) / (props.max - props.min)}%`;
    });

在 startDrag 方法中，我們監(jiān)聽了滑塊的鼠標按下事件，并在按下時開始拖動操作。在 handleDrag 方法中，我們根據(jù)鼠標位置計算出滑塊的值，并通過 emit 方法觸發(fā) update:modelValue 事件，將滑塊的值發(fā)送給父組件。

 const startDrag = (event) => {
      isDragging.value = true;
      document.addEventListener('mousemove', handleDrag);
      document.addEventListener('mouseup', stopDrag);
    };
    const handleDrag = (event) => {
      if (isDragging.value) {
        const sliderWidth = event.target.parentNode.offsetWidth;
        const offsetX = event.pageX - event.target.parentNode.offsetLeft;
        const percentage = (offsetX / sliderWidth) * 100;
        const value = (percentage * (props.max - props.min)) / 100 + props.min;
        const snappedValue = Math.round(value / props.step) * props.step;
        const clampedValue = Math.max(props.min, Math.min(props.max, snappedValue));
        thumbPosition.value = `${((clampedValue - props.min) / (props.max - props.min)) * 100}%`;
        emit('update:modelValue', clampedValue);
      }
    };
    const stopDrag = () => {
      isDragging.value = false;
      document.removeEventListener('mousemove', handleDrag);
      document.removeEventListener('mouseup', stopDrag);
    };

在 onMounted 和 onUnmounted 鉤子中，我們分別添加和移除了監(jiān)聽鼠標抬起事件的事件處理函數(shù)，以確保在組件銷毀時正確清理事件監(jiān)聽器。

  onMounted(() => {
      document.addEventListener('mouseup', stopDrag);
    });
    onUnmounted(() => {
      document.removeEventListener('mouseup', stopDrag);
    });

完整代碼如下：

<template>
  <div class="slider">
    <div class="track" :style="{ width: trackWidth }"></div>
    <div class="thumb" :style="{ left: thumbPosition }" @mousedown="startDrag"></div>
  </div>
</template>
<script>
import { ref, computed, onMounted, onUnmounted } from 'vue';
export default {
  name: 'CustomSlider',
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const thumbPosition = ref('0%');
    const isDragging = ref(false);
    const trackWidth = computed(() => {
      const range = props.max - props.min;
      return `${(100 * range) / (props.max - props.min)}%`;
    });
    const startDrag = (event) => {
      isDragging.value = true;
      document.addEventListener('mousemove', handleDrag);
      document.addEventListener('mouseup', stopDrag);
    };
    const handleDrag = (event) => {
      if (isDragging.value) {
        const sliderWidth = event.target.parentNode.offsetWidth;
        const offsetX = event.pageX - event.target.parentNode.offsetLeft;
        const percentage = (offsetX / sliderWidth) * 100;
        const value = (percentage * (props.max - props.min)) / 100 + props.min;
        const snappedValue = Math.round(value / props.step) * props.step;
        const clampedValue = Math.max(props.min, Math.min(props.max, snappedValue));
        thumbPosition.value = `${((clampedValue - props.min) / (props.max - props.min)) * 100}%`;
        emit('update:modelValue', clampedValue);
      }
    };
    const stopDrag = () => {
      isDragging.value = false;
      document.removeEventListener('mousemove', handleDrag);
      document.removeEventListener('mouseup', stopDrag);
    };
    onMounted(() => {
      document.addEventListener('mouseup', stopDrag);
    });
    onUnmounted(() => {
      document.removeEventListener('mouseup', stopDrag);
    });
    return {
      thumbPosition,
      trackWidth,
      startDrag
    };
  }
};
</script>
<style>
.slider {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: #ccc;
}
.track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #409eff;
}
.thumb {
  position: absolute;
  top: -5px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #409eff;
  cursor: pointer;
}
</style>

到此這篇關于使用vue3實現(xiàn)簡單的滑塊組件的文章就介紹到這了,更多相關vue3實現(xiàn)滑塊組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: