vite 使用飞行器仪表示例

环境

• 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>

效果图