malihu-custom-scrollbar-plugin,包含vue动态内容

时间:2017-12-13 02:59:38

标签: jquery css vue.js mcustomscrollbar

我正在尝试将此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 个答案:

答案 0 :(得分:1)

发现它,我应该把bind放在updated()上,而不是mount(),因为我动态加载数据......不需要注意它......

decoded_sample_data_1:0