专栏首页日常记录vue弹出层 +内容手风琴 简单实现

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue render jsx 事件绑定 条件渲染 slots 插槽

    yangdongnan
  • 防抖函数与节流函数

    原文 https://www.cnblogs.com/chenqf/p/7986725.html

    yangdongnan
  • mpx 中手写一个关联组件 relations 使用

    yangdongnan
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    柳醉梦声
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • HTML5选择器

    czjwarrior
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study

扫码关注云+社区

领取腾讯云代金券