github地址
GitHub - yoannmoinet/nipplejs: A virtual joystick for touch capable interfaces.
演示地址
1.安装nipple
npm install nipplejs --save
下面是完整的VUE代码
<el-row> <el-col :span="5">
<div id="joystick_zone"></div>
</el-col>
</el-row>
<script setup lang="ts" name="Camera3DScan">
import { ref, reactive, onMounted, watch } from 'vue'
import axios from 'axios'
import * as echarts from 'echarts';
import "echarts-gl"; //3D地图插件
import nipplejs from 'nipplejs';
onMounted(() => {
setTimeout(function () {
var options = {
zone: document.getElementById('joystick_zone') as HTMLElement,
mode: 'static',
position: {left: '50%', top: '50%'},
color: 'gray',
} as const
var manager = nipplejs.create(options);
manager.on('dir', function (evt, data) {
console.log(data)
// Do something.
});
}, 1000)
})
</script>
页面效果