Collapse 折叠面板

当信息较多时，可通过折叠面板收纳内容区域

com-collapse-item

折叠面板的内容区域

基本使用

<com-collapse title="公司介绍">
    <com-collapse-item>
        <view class="pd-20">
            湖南云迈科技专注提供app开发,
            小程序开发,软件开发,微信公众号开发,
            系统开发等,长沙app开发,长沙软件开发,
            长沙小程序开发,软件开发公司,小程序开发公司,
            APP开发公司首选湖南云迈科技
        </view>
    </com-collapse-item>
</com-collapse>

异步内容

<com-collapse title="异步内容">
    <com-collapse-item ref="content">
        <view class="pd-20">
            {{ content }}
        </view>
    </com-collapse-item>
</com-collapse>

<com-button :loading="loading" @click="getContent" class="mgt-30">
    {{ loading ? '正在获取' : '获取异步内容' }}
</com-button>

<script>
	export default {
		data() {
			return {
				loading: false,
				content: '',
			}
		},
		
		methods: {
			
			getContent(){
				this.loading = true
				setTimeout(()=>{
					this.content = `
						湖南云迈科技专注提供app开发,
						APP开发公司首选湖南云迈科技`
						
					this.$refs['content'].init()
					this.loading = false
				}, 1500)
			},
		}
	}
</script>

API

com-collapse Props

属性名	说明	类型	必填	默认值
title	标题	String	false	-
open	默认是否展开	Boolean	false	true
titleStyle	标题样式	Object	false	{}
iconColor	图标颜色	String	false	#999

com-collapse Slots

插槽名称	说明	默认内容
title	标题栏	-
default	折叠面板内容区域；需使用com-collapse-item	-

com-collapse-item Slots

插槽名称	说明	默认内容
default	内容	-

com-collapse-item Methods

方法名称	说明	参数
init	重新初始化内部高度计算，用于异步获取内容的情形，请结合this.$nextTick()使用	-