頁面結構
<el-dropdown @command="handleCommand" >
<span class="el-dropdown-link" >
<el-avatar class="user_avatar" :src="this.$store.state.user_avatar"></el-avatar>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="musicLove">喜歡列表</el-dropdown-item>
<el-dropdown-item command="massage">消息中心</el-dropdown-item>
<el-dropdown-item command="history">播放歷史</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
JS結構
methods:{
//通過傳入參數形式，回調函數判斷下拉菜單item
handleCommand(command){
if (command=="musicLove"){
this.userLove()
}
if (command=="massage"){
this.userMassage()
}
if (command=="history"){
this. userHistory()
}
},
userLove(){
console.log('喜歡列表')
},
userMassage(){
console.log("消息記錄")
},
userHistory(){
console.log("歷史記錄")
},