<template>
    <div class="setting">
        <div class="leftCol">
            <div class="settingsMainHeader">设置</div>
            <ul class="setting-aside">
                <li v-for="(item,index) in settingList" :key="index" :class="{activeColor: activeName==item.name}"
                    @click="handleClick(item)">
                    {{item.name}}
                </li>
            </ul>
        </div>
        <div class="contentCol">
            <component :is="componentSrc"></component>
        </div>
    </div>
</template>
<script>
import Info from '../components/Info';
import Upload from '../components/Upload';

export default {
    name: 'setting',
    components:{
        Info,
        Upload
    },
    data(){
        return {
            settingList:[
                {name: '个人信息',path: 'Info'},
                {name: '修改头像',path: 'Upload'}
            ],
            activeName: '个人信息',
            componentSrc: 'Info'
        }
    },
    methods:{
        handleClick(item){
            this.activeName = item.name;
            this.componentSrc = item.path;
        }
    }
}
</script>


<style lang="scss" scoped>
@import '../assets/css/setting.scss';
</style>