添加vue.config.js配置文件

whychdw

2020-04-13 7a60b70470330efc84b88125a7a293d138fc843b

添加vue.config.js配置文件

 src/App.vue

@@ -8,7 +8,8 @@
                    <div class="page-content-left">
                        <content-box
                        title="站点管理">
                            <my-tree></my-tree>
                            <my-tree
                            @tree-click="treeClick"></my-tree>
                        </content-box>
                    </div>
                    <div class="page-content-right">
@@ -36,6 +37,11 @@
        PageNav,
        ContentBox,
        MyTree
    },
    methods: {
        treeClick: function(res) {
            console.log(res);
        }
    }
}
</script>

 src/assets/js/common.js

New file
@@ -0,0 +1,16 @@
/**
 * 如果target(也就是FirstOBJ[key])存在，
 * 且是对象的话再去调用deepObjectMerge，
 * 否则就是FirstOBJ[key]里面没这个对象，需要与SecondOBJ[key]合并
 */
function deepObjMerge(FirstOBJ, SecondOBJ) { // 深度合并对象
    for (var key in SecondOBJ) {
        FirstOBJ[key] = FirstOBJ[key] && FirstOBJ[key].toString() === "[object Object]" ?
            deepObjMerge(FirstOBJ[key], SecondOBJ[key]) : FirstOBJ[key] = SecondOBJ[key];
    }
    return FirstOBJ;
}

export {
    deepObjMerge
}

 src/components/PageNav.vue

@@ -32,7 +32,12 @@
</template>
<script>
export default {
    name: 'PageNav'
    name: 'PageNav',
    data() {
        return  {
            
        }
    }
}
</script>
<style scoped>

 src/components/tree/Index.vue

@@ -3,7 +3,8 @@
        <tree-item 
        v-for="(data, key) in treeData" :key="key"
        :tree-data="data"
        :level=0></tree-item>
        :level=0
        @tree-click="treeClick"></tree-item>
    </div>
</template>

@@ -62,6 +63,11 @@
                }
            ]
        }
    },
    methods: {
        treeClick: function(data) {
            this.$emit('tree-click', data);
        }
    }
}
</script>

 src/components/tree/TreeItem.vue

@@ -1,20 +1,22 @@
<template>
    <div class="tree-item">
        <div class="tree-title" :style="getPadding">
        <div class="tree-title" :style="getPadding" @click="treeClick">
            <span class="iconfont" v-if="getChildren" :class="getOpen"></span>
            <span class="iconfont icon-lingxing home-state" :class="getHomeState"></span>
            <span class="tree-title-txt">{{treeData.txt}}</span>
        </div>
        <div class="tree-child" v-if="getChildren">
        <div class="tree-child" v-if="getChildren" :class="isShow">
            <tree-item
            v-for="(data, key) in treeData.children" :key="key"
            :tree-data='data'
            :level='getLevel'></tree-item>
            :level='getLevel'
            @tree-click="childTreeClick"></tree-item>
        </div>
    </div>
</template>

<script>

export default {
    name: 'TreeItem',
    props: {
@@ -29,7 +31,18 @@
        }
    },
    data() {
        return {}
        return {
            tree: {},
        }
    },
    methods: {
        treeClick: function() {
            this.treeData.open = this.treeData.open?false:true;
            this.$emit('tree-click', this.treeData);
        },
        childTreeClick: function(data) {
            this.$emit('tree-click', data);
        }
    },
    computed: {
        getOpen: function() {
@@ -70,12 +83,21 @@
                rs = true;
            }
            return rs;
        },
        isShow: function() {
            return this.treeData.open?'child-show': 'child-hide';
        }
    }
}
</script>

<style scoped>
.tree-item {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.tree-title {
    line-height: 0.3rem;
}
@@ -83,6 +105,12 @@
    margin-right: 0.06rem;
    margin-right: 0.06rem;
}
.chld-show {
    
}
.child-hide {
    display: none;
}
</style>



 vue.config.js

New file
@@ -0,0 +1,4 @@
// vue.config.js
module.exports = {
    publicPath: './'
}