Skip to content

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和 全局挂载和配置文件什么的都不需要!