Vue 折疊面板Collapse在標題上添加組件后，阻止面板冒泡的用法

iView組件中，折疊面板Collapse點擊面板標題部分，會出現面板收起或展開的效果。那么在面板標題后面再添加下拉框之類的組件時，會出現跟面板點擊一樣的效果，這時候就需要阻止冒泡的用法了。具體代碼：

<!-- 折疊面板組件on-change事件即可獲得當前展開面板的值，value即為默認面板的值，可綁定變量值，accordion選項即一次只能展開一個面板 -->
<Collapse @on-change="panelChange" :value="list[0].code" accordion>
    <!-- 折疊面板組件需要給每個Panel一個特定的name值，防止展開收起時操作有誤 -->
    <Panel v-for="(item, index) in list" :key="item.code" :name="item.code">
　　　　{{ item.name }}

        <!-- 以下div的click事件即為阻止冒泡,div的內容即為在標題上添加的組件 -->
        <div @click.stop.prevent="() => {}">
            
        </div>
        <div p="slot">
            <!-- 面板內部內容 -->
        </div>
    </Panel>
</Collapse>        

<script>
    export default {
        data() {
            return {
                list: [{
                    code: '1',
                    name: '折疊面板1'
                }, {
                    code: '2',
                    name: '折疊面板2'
                }, {
                    code: '3',
                    name: '折疊面板3'
                }];
            }
        },
        methods: {
            panelChange(keyList) {    //獲取當前展開面板的值
                console.log(keyList);
            }
　　　　 }
    }
</script>