王明 / Recruitment

  <template>
  	<view class="u-collapse">

  		<slot />
  	</view>
  </template>
  
  <script>

  	/**

  	 * collapse 手风琴

  	 * @description 通过折叠面板收纳内容区域
  	 * @tutorial https://www.uviewui.com/components/collapse.html

  	 * @property {Boolean} accordion 是否手风琴模式（默认true）
  	 * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
  	 * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
  	 * @property {Object} head-style 标题自定义样式，对象形式
  	 * @property {Object} body-style 主体自定义样式，对象形式
  	 * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
  	 * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)

  	 * @example <u-collapse></u-collapse>
  	 */
  	export default {

  		name:"u-collapse",
  		props: {
  			// 是否手风琴模式
  			accordion: {
  				type: Boolean,
  				default: true
  			},
  			// 头部的样式
  			headStyle: {
  				type: Object,
  				default () {
  					return {}
  				}
  			},
  			// 主体的样式
  			bodyStyle: {
  				type: Object,
  				default () {
  					return {}
  				}
  			},
  			// 每一个item的样式
  			itemStyle: {
  				type: Object,
  				default () {
  					return {}
  				}
  			},
  			// 是否显示右侧的箭头
  			arrow: {
  				type: Boolean,
  				default: true
  			},
  			// 箭头的颜色
  			arrowColor: {
  				type: String,
  				default: '#909399'
  			},
  			// 标题部分按压时的样式类，"none"为无效果
  			hoverClass: {
  				type: String,
  				default: 'u-hover-class'

  			}
  		},
  		created() {

  			this.childrens = []

  		},

  		data() {
  			return {
  

  			}
  		},

  		methods: {

  			// 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况

  			init() {

  				this.childrens.forEach((vm, index) => {
  					vm.init();

  				})
  			},

  			// collapse item被点击，由collapse item调用父组件方法
  			onChange() {
  				let activeItem = [];
  				this.childrens.forEach((vm, index) => {
  					if (vm.isShow) {
  						activeItem.push(vm.nameSync);

  					}

  				})

  				// 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串
  				if (this.accordion) activeItem = activeItem.join('');
  				this.$emit('change', activeItem);

  			}
  		}
  	}
  </script>
  
  <style lang="scss" scoped>

  	@import "../../libs/css/style.components.scss";

  </style>