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

Logo

前往低代码交流专区

更多推荐