vue弹出层 +内容手风琴 简单实现

<!--固定样式弹层-->
<template>
	<div class="e-popup">
		<div class="e-popup-container">
			<!--手风琴-->
			<div>
				<div class="e-accordion-title" @click="showIndex(0)">套餐1</div>
				<aside class="e-accordion-box"
							 :class="{'e-accordion-ctn-active':active === 0}">
					<div class="e-accordion-ctn">
						<div>1</div>
						<div>2</div>
						<div>3</div>
						<div>4</div>
					</div>
				</aside>
			</div>
			<div>
				<div class="e-accordion-title" @click="showIndex(1)">套餐2</div>
				<aside class="e-accordion-box"
							 :class="{'e-accordion-ctn-active':active === 1}">
					<div class="e-accordion-ctn">
						<div>1</div>
						<div>2</div>
						<div>3</div>
						<div>4</div>
						<div>5</div>
						<div>6</div>
						<div>7</div>
						<div>8</div>
						<div>9</div>
					</div>
				</aside>
			</div>
		</div>
	</div>
</template>
<style scoped lang="less">
	.e-popup {
		position: fixed;
		z-index: 1001;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .6);
	}

	.e-popup-container {
		position: absolute;
		z-index: 1002;
		bottom: 0;
		width: 100%;
		height: calc(100vh - 30vh);
		background-color: #fff;
	}

	.e-accordion-box {
		overflow: hidden;
		height: 0;
		box-sizing: border-box;
		transition: all .3s;
	}

	.e-accordion-title{
		background-color: #000;
		color: #fff;
	}

	.e-accordion-ctn-active {
		/*height: 200px;*/
	}
</style>
<script>
  export default {
    components : {},
    mixins : [],
    name : "",
    data () {
      return {
        active : 0,
      }
    },
    props : {},
    computed : {},
    watch : {},
    methods : {
      showIndex ( index ) {
        this.active = index;
        let elBox = document.getElementsByClassName('e-accordion-box');
        let elList = document.getElementsByClassName('e-accordion-ctn');
        for ( let i = 0 ; i < elBox.length ; i++ ) {
          const elListElement = elBox[ i ];
          if(this.active == i){
            elListElement.style.height =  elList[i].offsetHeight + 'px'
          }else {
            elListElement.style.height = 0
					}
        }
      }
    },
    mounted () {
      //设定高度
			this.$nextTick(_=>{
        let elBox = document.getElementsByClassName('e-accordion-box');
        let elList = document.getElementsByClassName('e-accordion-ctn');
        for ( let i = 0 ; i < elBox.length ; i++ ) {
          const elListElement = elBox[ i ];
          if(this.active == i){
            elListElement.style.height =  elList[i].offsetHeight + 'px'
          }else {
            elListElement.style.height = 0
          }
        }
			})
    },
    created () {
    },
    filters : {},
    directives : {},
    beforeDestroy () {
    },
    destroyed () {
    }
  }
</script>