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>

Vue 折叠面板Collapse在标题上添加组件后，阻止面板冒泡的用法的相关教程结束。