在这里简单记录一下,在uniapp和vue中如何实现角度选择器,以防之后需要使用
实现原理:主要是通过对容器绑定鼠标按下,离开,移动,移出容器事件,通过获取容器的原点坐标,用户在容器内按下移动时获取鼠标的偏移量,通过计算转化角度问题,最后实现功能。话不多说直接上代码:
注意:目前uniapp应该只能在H5使用,因为手机端没有鼠标事件,需要做对应更改
<template>
//在uniapp中将div替换成view
<div>
<!-- 鼠标按下@mousedown 鼠标松开@mouseup 鼠标离开容器@mouseleave 鼠标移动@mousemove-->
<div class="box" ref="box" @mousedown="mousedown = true" @mouseup="mousedown = false"
@mouseleave="mousedown = false" @mousemove="mousemove">
<div class="container" :style="{transform:'rotate('+angle+'deg)'}">
<div class="point"></div>
</div>
<div class="content">
{
{ angle+'°' }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
angle: 0, //旋转角度
mousedown: false, // 判断鼠标是否按下
}
},
methods: {
// 鼠标移动事件
mousemove() {
// 判断用户是否在容器内按下后移动鼠标
if (this.mousedown) {
let box = this.$refs.box
//let box = this.$refs.box.$el 如果在uniapp中使用则需要提换成这个
let centerX = -~(box.offsetHeight || box.height) / 2;
let centerY = -~(box.offsetWidth || box.width) / 2;
let angle = this.calculate(event.offsetX, event.offsetY, centerX, centerY);
this.angle = -~angle
//如果需要封装成组件则
// this.$emit('方法名', '数据')
}
},
// 计算
calculate(x, y, centerX, centerY) { //根据当前坐标和中心坐标计算角度
const radians = Math.atan2(x - centerX, y - centerY);
return (radians * (180 / Math.PI) * -1) + 180;
},
}
}
</script>
<style lang="scss" scoped>
.box {
border-radius: 50%;
background-color: pink;
width: 200px;
height: 200px;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
// 标点
.container {
height: 100%;
padding: 1px 0;
box-sizing: border-box;
pointer-events: none; //必须要加
.point {
height: 15px;
width: 15px;
border-radius: 50%;
background-color: red;
}
}
// 文字提示
.content {
position: absolute;
font-size: 16px;
color: #5b748e;
font-weight: bold;
pointer-events: none;
}
}
</style>
如果需要封装成组件的形式则需要添加this.$emit('angele',this.angle)使用,在父组件进行监听
<template>
<div>
<angle @angle="angle"></angle>
</div>
</template>
<script>
import angle from '你的地址'
export default {
data() {
return {
}
},
components: {
angle
},
methods: {
angle(val) {
console.log(val)
},
}
}
</script>
<style lang="scss" scoped>
</style>