Vue第三方插件

1.滚动条 vuescroll

• 引入插件 - 官网

<script src="https://unpkg.com/vuescroll"></script>

• 常用配置项

var ops = {
            vuescroll: {
                    
            },
            scrollPanel: {
                scrollingX: true,//横向滚动开关
                scrollingX: true,//纵向滚动开关
            },
            rail: {
                size: '4px',//滚动条容器宽度
            },
            bar: {
                onlyShowBarOnScroll:false,//始终展示滚动条
                background:"rgba(120,120,120,0.4)",
                size: '4px',//滚动条宽度
            }
        } // 在这里设置全局默认配置

• 全局配置：适合模块化的js场景

    Vue.use(vuescroll,{
        ops: ops
    })

• 组件配置：适合html页面

<vue-scroll :ops="ops">
        内容
</vue-scroll>

• 纵向滚动使用方式：给父容易固定高度即可

<div style="height:500px;">
    <vue-scroll :ops="ops">
        内容
    </vue-scroll>
</div>

• 恒向滚动使用方式：给父容易固定宽度，同时设置超出隐藏，防止出现双重滚动条

//crollingX: true,//是否启用 x 或者 y 方向上的滚动
<div style="width: 100%;height: 58px;overflow: hidden;">
    <vue-scroll :ops="ops">
        内容
    </vue-scroll>
</div>

• 滚动到目标位置：scrollIntoView("#id")

this.$refs["scroll"].scrollIntoView("#id",100)

2.httpVueLoader

• 以往的组件文件在通过脚手架项目中进行引入，httpVueLoader支持在非脚手架项目中引入组件文件，只支持vue2.x
• 引入插件

<script src="https://unpkg.com/http-vue-loader"></script>

• 模版编写

<template>
    <div></div>
</template>

<script>
module.exports = {
    data(){
        return {}
    }
}
</script>

<style scoped>

</style>

• 使用httpVueLoader注册组件

components:{
   'ep-test': httpVueLoader('/assets/test.vue?time='+new Date().getTime()),//高度100%的容器组件
},