各大网站平台发布信息,怎么做简单的视频网站,宣传软文怎么写,国内三大oa系统这里写自定义目录标题 环境vue代码效果图 环境
jquery npm install -S jqueryjQuery-Flight-Indicators 将img、css、js拷贝到vite工程目录中 打开 jquery.flightindicators.js#xff0c;在文件开头加上import jQuery from jquery;
vue代码
template在文件开头加上import jQuery from jquery;
vue代码
templatediv classcontainerdiv idheading/divdiv idvariometer/divdiv idturn_coordinator/divdiv idairspeed/divdiv idaltimeter/divdiv idattitude/div/div
/templatescript setup langts
import { onMounted } from vue;
import $ from jquery;
import ../js/jquery.flightindicators.js;
import ../css/flightindicators.cssfunction 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();
})/scriptstyle 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
效果图
