Question

我正在尝试使用SVG实现范围滑块。我用标签构建了SVG格式。现在我正在尝试点击操作数。如果最终用户点击栏上的任何位置，则栏需要移动到那里。

SVG格式：

<svg xmlns="http://www.w3.org/2000/svg" :viewBox="'0 0 '+side+' 15'" ref="_svg" @click="handleClick">
    <line x1="250" y1="7" x2="0" y2="7" stroke="#334860" stroke-width="3"></line>
    <path :d="'M 0 7 l '+position+' 0'" stroke="#00be7e" stroke-width="3" fill="none"></path>
    <text :x="(position)-1.5" y="3" font-size="3" style="fill:red;">99</text>
    <circle :cx="position" cy="7" r="1.5" stroke="#00be7e" stroke-width="3" fill="#00be7e"></circle>
</svg>

从上面可以看出，SVG文件包含一个viewBox属性。我在组件的数据功能上设置它。此外，还有一个位置变量处理条位置。

组件脚本：

export default {
    data () {
        return {
            side:250,
            position: 125
        };
    },
    methods: {
        handleClick (e) {
            this.position = e.x/this.$refs._svg.getBoundingClientRect().width;
        },
    }
}

当用户点击栏上的某个位置时，手柄点击功能会触发。但是，问题是没有设置点击区域的正确位置。关于它的最佳做法是什么？

Answer 1

我猜问题是擦洗X位置的计算。我用这种方式改变了代码，看起来很有效：

view

另外，不允许用户点击栏，可能在计算中添加Min / Max可以这样改进：

this.position = e.clientX - this.$refs._svg.getBoundingClientRect().left;

我还准备了一个你可以测试的小提琴：

https://jsfiddle.net/ahmadm/qqvj08b5/

希望有所帮助

带VueJS的基于SVG的滑块

1 个答案: