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>

 

转载于:https://www.cnblogs.com/minozMin/p/9789666.html