vue.js下bootstarp的modal滚动条问题

前言

在使用vue.js开发项目中，使用了bootstrap.但是直接使用bootstrap的modal时，一些事件失效，滚动条依然是背景滚动条．

原因

vue.js针对页面的渲染有自己的逻辑和时间点．在使用之前的js插件等要根据vue.js的渲染时间点来使用．

解决方式

mounted: function(){
        //模态框滚动条调整
        $('#myModal').on('show.bs.modal', function () {
          console.log('modal hide');
          $(document.body).css({
            "overflow-x":"hidden",
            "overflow-y":"hidden"
          });
          
          $('#myModal').css({
            "overflow-x":"auto",
            "overflow-y":"auto"
          });
        });
        
        //模态框滚动条恢复
        $('#myModal').on('hide.bs.modal', function () {
          console.log('modal hide');
          $(document.body).css({
            "overflow-x":"auto",
            "overflow-y":"auto"
          });
            
          $('#myModal').css({
            "overflow-x":"hidden",
            "overflow-y":"hidden"
          });
        });
    },

在vue.js挂载后，针对modal做滚动条设置