环境
- jquery
npm install -S jquery - jQuery-Flight-Indicators
将img、css、js拷贝到vite工程目录中
打开 jquery.flightindicators.js，在文件开头加上import jQuery from "jquery";
vue代码
<template><div class="container"><div id="heading"></div><div id="variometer"></div><div id="turn_coordinator"></div><div id="airspeed"></div><div id="altimeter"></div><div id="attitude"></div></div>
</template><script setup lang="ts">
import { onMounted } from "vue";
import $ from 'jquery';
import '../js/jquery.flightindicators.js';
import "../css/flightindicators.css"function setHeading(){const heading = $.flightIndicator('#heading', 'heading', {size: 200,showBox: false,img_directory: '/src/assets/img/'});heading.setHeading(30);//航向角
}function setVariometer(){const variometer = $.flightIndicator('#variometer', 'variometer', {size: 200,showBox: false,img_directory: '/src/assets/img/'});variometer.setVario(30);//垂直速度
}function setTurnCoor(){const turnCoor = $.flightIndicator('#turn_coordinator', 'turn_coordinator', {size: 200,showBox: false,img_directory: '/src/assets/img/'});turnCoor.setTurn(30);
}function setAirspeed() {const airspeed = $.flightIndicator('#airspeed', 'airspeed', {size: 200,showBox: false,img_directory: '/src/assets/img/'});airspeed.setAirSpeed(30);//空速
}function setAltimeter(){const altimeter = $.flightIndicator('#altimeter', 'altimeter', {size: 200,showBox: false,img_directory: '/src/assets/img/'});altimeter.setAltitude(30);//高度altimeter.setPressure(30)//气压
}function setAttitude() {const attitude = $.flightIndicator('#attitude', 'attitude', {size: 200,showBox: false,img_directory: '/src/assets/img/'});attitude.setRoll(30);//侧倾角attitude.setPitch(30);//俯仰角
}onMounted(() => {setHeading();setVariometer();setTurnCoor();setAirspeed();setAltimeter();setAttitude();
})</script><style scoped>
.container {display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;height: 100vh;width: 700px;
}#heading,
#variometer,
#turn_coordinator,
#airspeed,
#altimeter,
#attitude {width: 200px;height: 200px;margin: 10px;
}
</style>
效果图
