当前位置: 首页 > news >正文

vite 使用飞行器仪表示例

这里写自定义目录标题

  • 环境
  • vue代码
  • 效果图

环境

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

效果图

在这里插入图片描述


http://www.mrgr.cn/news/32827.html

相关文章:

  • 用Python语言,将一个整数进行因式分解,打印出所有的因数。比如90=2*3*3*5, 90, 1, 2, 45,
  • 实习冲刺练习 第二十二天
  • Vue前端开发,组件及组件的使用
  • Window下PHP安装最新sg11(php5.3-php8.3)
  • 【Unity Bug 随记】unity version control 报 xx is not in a workspace.
  • 【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV5人脸目标检测
  • 1. stm32创建工程并下载
  • 初识模版!!
  • python - 子类为什么调用父类的方法
  • 【JavaEE】——线程的安全问题和解决方式
  • 如何使用IIC外设(硬件IIC)
  • Clip studio paint百度云下载:附安装包+教程
  • 最好的教育是言传身教,爸爸的一句话改变孩子的一生
  • 简单多状态dp第一弹 leetcode -面试题17.16.按摩师 -213.打家劫舍II
  • C++——初步认识C++和namespace的用法
  • 文本预处理_by《李沐:动手学深度学习v2》pytorch版
  • 技术周总结 09.16~09.22 周日
  • linux 基础(一)mkdir、ls、vi、ifconfig
  • OpenGL编程思想第九版环境搭建(Glfw+gl3w)-静态库方式
  • frp内网穿透部署
  • 网易雷火xx
  • Ubuntu实现SSH免密登录教程
  • 输电线路绝缘子红外检测数据集
  • 基于协同过滤推荐算法的食品推荐系统
  • 【艾思科蓝】Spring全家桶使用深度教程:从入门到精通
  • Linux 文件 IO 管理(第二讲)(重定向和缓冲区)