1.在index.html中
html
<div id="app"></div>
<!-- 这里的引入也要改成ts -->
<script type="module" src="/src/main.ts"></script>
<!-- 这里引入jquery即可 -->
<script src="static/vendors/jquery/jquery-3.6.0.min.js"></script>
2.在组件的script标签中
vue
<script lang="ts">
//@ts-ignore
(function ($) {
$(document).ready(function () {
$(".search-toggler").click(function () {
$(".search-popup").css("transform", "translateY(0%)");
});
$(".search-popup").click(function (e) {
//e.target = e.target[0] = document.getElementsByClassName("search-popup__content")[0] //普通dom对象
//$(e.target) = $(e.target)[0] //jquery对象
//获得class的方式为.className
if (e.target.className === "search-popup__overlay search-toggler") {
//@ts-ignore
$(this).css("transform", "translateY(-110%)");
}
});
});
//@ts-ignore
})(jQuery);
</script>
基本结构:
js
//@ts-ignore
(function ($) {
$(document).ready(function () {
//code
});
//@ts-ignore
})(jQuery);
注意:除了以上这两步之外,别的什么都不用做!npm i和 全局挂载和配置文件什么的都不需要!