uView Collapse折叠面板

2022年01月12日1 min read
uView

快速上手

<template>  
  <u-collapse  
    @change="change"  
    @close="close"  
    @open="open"  
  >  
    <u-collapse-item  
      title="第一个折叠面板"  
      name="first"  
    >  
      <text class="u-collapse-content">第一条内容</text>  
    </u-collapse-item>  
    <u-collapse-item  
      title="第二个折叠面板"  
      name="second"  
    >  
      <text class="u-collapse-content">第二条内容</text>  
    </u-collapse-item>  
    <u-collapse-item  
      title="第三个折叠面板"  
      name="third"  
    >  
      <text class="u-collapse-content">第三条内容</text>  
    </u-collapse-item>  
  </u-collapse>  
</template>  
  
<script>  
	export default {  
		methods: {  
            open(e) {  
              console.log('open', e)  
            },  
            close(e) {  
              console.log('close', e)  
            },  
            change(e) {  
              console.log('change', e)  
            }  
        }  
	}  
</script>

Collapse Item Props

Collapse Event