vue2 角度选择器组件，鼠标拖动旋转选择角度

vue角度选择器组件实现代码

实现一个超简单的角度选择器组件

<template>
    <div 
        ref="setup_angle"
        class="setup_angle"
        @mousedown="mousedown = true"
        @mouseup="mousedown = false"
        @mousemove="on_mousemove"
        @mouseleave="mousedown=false">
        <div 
            class="container"
            :style="{
                transform:'rotate('+angle_data+'deg)',
            }">
            <div class="point"></div>
        </div>
        <div class="content">
            {{ angle_data+'°' }}
        </div>
    </div>
</template>

<script>
组件的所有代码，有点vue基础的都能懂
export default { 
    name: 'setup_angle',
    data(){
        return{
            angle_data:0,
            mousedown:false, //鼠标是否按下
        };
    },
    methods:{
        calculate_degree(x, y, centerX, centerY) { //根据当前坐标和中心坐标计算角度
            const radians = Math.atan2(x - centerX, y - centerY);
            return (radians * (180 / Math.PI) * -1) + 180;
        },
        on_mousemove(event){ //鼠标移动事件(按下移动就算拖拽，在元素里移动才算，元素外移动监听)
            if(this.mousedown){ //表示是按下移动的
                const setup_angle = this.$refs.setup_angle;
                let centerX = -~(setup_angle.offsetHeight || setup_angle.height)/2;
                let centerY = -~(setup_angle.offsetWidth || setup_angle.width)/2;
                let angle = this.calculate_degree(event.offsetX,event.offsetY,centerX,centerY);
                this.angle_data = -~angle;
                this.$emit('angle',angle); //发送事件
            }
        },
    },
}
</script>

<style scoped lang="scss">
.setup_angle{
    width: 100%;
    height: 100%;
    border: 5px solid #e8454571;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    >.container{
        pointer-events: none;
        height: 100%;
        width: fit-content;
        padding: 5px 0;
        box-sizing: border-box;
        >.point{
            width: 15px;
            height: 15px;
            background-color: #e84545;
            border-radius: 50px;
        }
    }
    >.content{
        position:absolute;
        font-size: 16px;
        color: #5b748e;
        font-weight: bold;
        pointer-events: none;
    }
}
</style>

在你需要用到该组件的地方调用组件

// 1：引入组件 import Setup_angle from './components/setup_angle.vue'
// 2：注册组件 
components: {
    Setup_angle,
}
// 3：调用组件
<Setup_angle
    @angle="on_angle">
</Setup_angle>
// 4：on_angle为角度发生变化时的回调函数，参数为角度值
methods:{
    on_angle(angle){
        console.log(angle);    
    },
},

这样一个角度选择器就做好啦

最后附上个人小站地址
一篇文字