前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue弹出层 +内容手风琴 简单实现

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

作者头像
yangdongnan
发布2019-03-28 16:11:30
2.1K0
发布2019-03-28 16:11:30
举报
文章被收录于专栏:日常记录

效果草图

在这里插入图片描述
在这里插入图片描述

代码:

代码语言:javascript
复制
<!--固定样式弹层-->
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年02月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档