vue安装/ztree/jq/vue-happy-scroll(滚动条)

最新推荐文章于 2024-08-16 08:21:42 发布

tianmeng1999

最新推荐文章于 2024-08-16 08:21:42 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery vue

本文链接：https://blog.youkuaiyun.com/weixin_42448623/article/details/99300930

vue 同时被 2 个专栏收录

58 篇文章

订阅专栏

jquery

19 篇文章

订阅专栏

本文介绍如何在Vue.js项目中集成ZTree和HappyScroll，实现自定义滚动条的树形菜单。首先通过npm安装jQuery、ZTree和HappyScroll，然后在main.js中配置Webpack提供jQuery。创建ZTree组件并引用HappyScroll，调整样式和属性以适应项目需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装jq

npm install jquery --save

webpack.base.conf.js

module.exports = {
	...
	plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ]
}

main.js

import $ from 'jquery'

ztree

安装ztree

npm install ztree --save

main.js

import 'ztree'
import '../node_modules/ztree/css/zTreeStyle/zTreeStyle.css'

创建 compoments/ztree.vue组件

<template>
    <div id="areaTree">
        <ul id="treeDemo" class="ztree"></ul>          
    </div>
</template>

<script>
    export default {
        name: "zTree",
        data:function(){
            return{
                setting:{
                    data:{
                        simpleData:{
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0
                        }
                    }
                },
                zNodes:[
                    // {id:1, pId:0, name: "父节点1"},
                    // {id:11, pId:1, name: "子节点1"},
                    // {id:12, pId:1, name: "子节点2"}
                    // 或
                    {
                        id:1,
                        name:"父节点1",
                        children:[
                            {   
                                id:11,
                                name:"子节点1",
                            },
                            {   
                                id:12,
                                name:"子节点2",
                            }
                        ]
                    }
                ]
            }
        },
        methods:{
            freshArea:function(){
                $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
            }
        },
        mounted(){
            $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        }
    }
</script>

<style>

   
</style>

引用 ztree组件 holleworld.vue

<template>
  <div class="hello">
    <div class="title">
      <div>{{ msg }}</div>
      <div>Essential Links</div>

      <router-link to="./cesiumViewer">cesium</router-link>
    </div>
    
    <div class="cesCont">
      <cesiumViewer></cesiumViewer>
    </div>   

    <ztree></ztree>

  </div>
</template>

<script>
import cesiumViewer from './cesiumViewer'
import ztree from './ztree'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    cesiumViewer,ztree
  }
}
</script>

<style scoped>
  .hello{
    height:100%;
  }
  .cesCont{
    height:800px;
  }
  .title{
    padding:15px 0;
    font-size:20px;
  }
</style>

效果图
在这里插入图片描述

vue-happy-scroll（滚动条）

npm install vue-happy-scroll --save-dev

或者

<!-- 引入css，该链接始终为最新版的资源 -->
<link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css">
<!-- 引入vue -->
<!-- 引入组件，该链接始终为最新版的资源 -->
<script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>

main.js

import { HappyScroll } from 'vue-happy-scroll'
//自定义组件名
Vue.component('happy-scroll', HappyScroll)
// 引入css
import 'vue-happy-scroll/docs/happy-scroll.css'

ztree.vue 用

<template>
    <div id="areaTrees">
        <!-- resize 监听容器大小 -->
        <!-- size   滚动条粗细 -->
        <!-- color  滚动条颜色-->
        <happy-scroll color="rgba(0,0,0,0.5)" size="5" resize>
            <ul id="treeDemo" class="ztree"></ul>    
        </happy-scroll>      
    </div>
</template>

<script>
    export default {
        name: "zTree",
        data:function(){
            return{
                setting:{
                    data:{
                        simpleData:{
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0
                        }
                    }
                },
                zNodes:[
                    {id:1, pId:0, name: "父节点1"},
                    {id:11, pId:1, name: "子节点1"},
                    {id:12, pId:1, name: "子节点2"},
                    {id:2, pId:0, name: "父节点2"},
                    {id:21, pId:2, name: "子节点456661ghjjjjjjjjjjjjjj"},
                    {id:22, pId:2, name: "子节点245666"},
                    {id:3, pId:0, name: "父节点3"},
                    {id:31, pId:3, name: "子节点1"},
                    {id:32, pId:3, name: "子节点2"},
                    {id:4, pId:0, name: "父节点4"},
                    {id:41, pId:4, name: "子节点1"},
                    {id:42, pId:4, name: "子节点2"},
                    {id:5, pId:0, name: "父节点5"},
                    {id:51, pId:5, name: "子节点1"},
                    {id:52, pId:5, name: "子节点2"},
                    {id:6, pId:0, name: "父节点6"},
                    {id:61, pId:6, name: "子节点1"},
                    {id:62, pId:6, name: "子节点2"},
                    {id:7, pId:0, name: "父节点7"},
                    {id:71, pId:7, name: "子节点1"},
                    {id:72, pId:7, name: "子节点2"},
                    {id:8, pId:0, name: "父节点8"},
                    {id:81, pId:8, name: "子节点1"},
                    {id:82, pId:8, name: "子节点2"},
                    {id:9, pId:0, name: "父节点9"},
                    {id:91, pId:9, name: "子节点1"},
                    {id:92, pId:9, name: "子节点2"},
                    // 或
                    // {
                    //     id:1,
                    //     name:"父节点1",
                    //     children:[
                    //         {   
                    //             id:11,
                    //             name:"子节点1",
                    //         },
                    //         {   
                    //             id:12,
                    //             name:"子节点2",
                    //         }
                    //     ]
                    // }
                ]
            }
        },
        mounted(){
            $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        }
    }
</script>

<style scoped>
    #areaTrees{
        height: 100px;
        margin: 10px;
	    background-color:rgba(0, 0, 0, .2);
	    width: 138px;
	    border:1px solid #2d90f3;
    }
   
</style>