使用vue3实现简单的滑块组件
更新时间：2023年08月01日 10:58:26 作者：bigFace
这篇文章主要给大家介绍一下如何使用vue3实现简单的滑块组件,文中有详细的代码示例讲解,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧
滑块组件主要是利用鼠标事件，让滑块跟着鼠标跟着x轴动，效果如下。
创建了一个名为 CustomSlider 的自定义滑块组件。它接受 min、max 和 step 作为 props，用于设置滑块的取值范围和步长。使用 emits 属性声明了一个名为 update:modelValue 的自定义事件，用于向父组件发送滑块值的更新。
name: 'CustomSlider',
props: { min: { type: Number, default: 0 },
max: { type: Number, default: 100 },
step: { type: Number, default: 1 } },
emits: ['update:modelValue'],在 setup 函数中，我们使用了 Vue 3 的组合式 API 来定义滑块组件的逻辑。我们使用了 ref 来创建了 thumbPosition 和 isDragging 两个响应式变量。thumbPosition 用于控制滑块的位置，isDragging 用于标记是否正在拖动滑块。
通过计算属性 trackWidth，我们根据最小值和最大值计算出滑块轨道的宽度，用于动态设置样式。
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 方法中，我们监听了滑块的鼠标按下事件，并在按下时开始拖动操作。在 handleDrag 方法中，我们根据鼠标位置计算出滑块的值，并通过 emit 方法触发 update:modelValue 事件，将滑块的值发送给父组件。
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 钩子中，我们分别添加和移除了监听鼠标抬起事件的事件处理函数，以确保在组件销毁时正确清理事件监听器。
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实现简单的滑块组件的文章就介绍到这了,更多相关vue3实现滑块组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VuePress是一个基于Vue的轻量级静态网站生成器以及为编写技术文档而优化的默认主题。这么文章给大家详细介绍了vuepress 静态网站生成器的方法，需要的朋友参考下吧2018-04-04
vue2项目如何将webpack迁移为vite并使用svg解决所有bug问题
这篇文章主要介绍了vue2项目如何将webpack迁移为vite并使用svg解决所有bug问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍了关于axios不能使用Vue.use()的相关资料，文中通过示例代码介绍的非常详细，对大家的理解和学习具有一定的参考学习价值，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要为大家介绍了vitejs预构建理解及流程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了Vue如何设置el-table背景透明样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue代码分割的实现(codesplit)，做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，需要的朋友可以参考下2018-11-11
今天小编就为大家分享一篇vue中动态添加class类名的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
通过配置多页面应用，从而将给子模块依赖分隔开各自加载，可以减少初始资源的请求，加快页面的访问速度，这篇文章主要介绍了vue3+vite配置多页面的详细过程,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue中component标签解决项目组件化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue中的img src 动态加载本地json的图片路径写法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
最新评论