PmFold

基础用法

<template>
  <pm-fold ref="fold">
    <template slot="title">
      <span class="fs-16 font-bold">主标题</span>
    </template>
    <div class="p-10">content</div>
  </pm-fold>
</template>
<script>
export default {
  provide() {
    return {
      closeOthers: this.closeOthers
    }
  },
  data() {
    return {
      model: {
        name: 'zzr'
      }
    }
  },
  methods: {
    closeOthers(uid) {
      console.log(uid)
    }
  }
}
</script>

checkbox

<template>
  <pm-fold ref="fold" title="fold-title" contrlType="checkbox">
    <div class="p-10">content</div>
  </pm-fold>
</template>
<script>
export default {
  provide() {
    return {
      closeOthers: this.closeOthers
    }
  },
  data() {
    return {
      model: {
        name: 'zzr'
      }
    }
  },
  methods: {
    closeOthers(uid) {
      console.log(uid)
    }
  }
}
</script>

group

<template>
  <pm-fold-group>
    <pm-fold ref="pm-fold" title="fold-title">
      <div class="p-10">content1</div>
    </pm-fold>
    <pm-fold ref="pm-fold" title="fold-title">
      <div class="p-10">content2</div>
    </pm-fold>
  </pm-fold-group>
  
</template>
<script>
export default {
}
</script>

group 保持展开一项

<template>
  <pm-fold-group :accordion="true">
    <pm-fold ref="pm-fold" title="fold-title">
      <div class="p-10">content1</div>
    </pm-fold>
    <pm-fold ref="pm-fold" title="fold-title">
      <div class="p-10">content2</div>
    </pm-fold>
  </pm-fold-group>
  
</template>
<script>
export default {
}
</script>

Attributes

参数	说明	类型	可选值	默认值
title	标题	string	-	-
subTitle	子标题	string	-	-
contrlType	控件类型	arrow 、 checkbox	-	arrow
arrowPosition	icon位置	left、right	-	right
isFold	是否展开	boolean	-	true
bodyBorder	边框	boolean	-	false

slot

Name	Description
title	标题
-	content

pm-fold-group Attributes

参数	说明	类型	可选值	默认值
accordion	只展开一项	boolean	-	false
subTitle	子标题	string	-	-