摘要：
iView组件中，折叠面板Collapse点击面板标题部分，会出现面板收起或展开的效果。那么在面板标题后面再添加下拉框之类的组件时，会出现跟面板点击一样的效果，这时候就需要阻止冒泡的用法了。--以下div的click事件即为阻止冒泡,div的内容即为在标题上添加的组件--˃{}"˃exportdefault{data(){return{list:[{code:'1',name:'折叠面板1'},{code:'2',name:'折叠面板2'},{code:'3',name:'折叠面板3'}];}},methods:{panelChange{//获取当前展开面板的值console.log;}}}
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>