malihu-custom-scrollbar-plugin 开箱即用 vue 动态内容

Posted 2023-02-22

【中文标题】malihu-custom-scrollbar-plugin 开箱即用 vue 动态内容

【英文标题】：malihu-custom-scrollbar-plugin with vue dynamic contents outside the box

【发布时间】：2018-05-26 20:39:08

【问题描述】：

我正在尝试将这个jquery plugin 与 vue 一起使用，我读到将 jquery 包含在 vue 中是不好的，但我无能为力，因为客户特别要求使用这个插件...

所以我这样做了

import jquery from "@/assets/js/jquery.js";
import malihu from "@/assets/js/mCustomScrollbar.js";

export default 
    name: 'messages',
    methods:
        bindScrollbar()

    $("#content").mCustomScrollbar(
          theme:"kb",
        );

        
    ,
    mounted()
      this.bindScrollbar();
    ,

如果内容是静态的，这将正常工作。但是，如果我使用 v-for 动态加载内容，则内容是在可滚动框之外创建的……顺便说一句，我使用的是 webpack 和单个文件组件。需要帮助

到目前为止我尝试过的解决方案：

在更改时使用这样的手表将生成的内容重新附加到容器，但它也不起作用：

watch: 
    'contentValue': function(val,oldVal)
        console.log($("#content")); //<-- log shows that dynamic contents are generated outside the mCSB_container...
        var el = $(".contents").detach();
        $(".mCSB_container").append(el); 


        
    

【参考方案1】：

找到了，我应该把绑定放在updated()上，而不是mounted()上，因为我是动态加载数据的……不需要看它……

updated()
  this.bindScrollbar();
,

【讨论】：

不要为我工作，您有其他解决方案或有关此问题的更多信息吗？