文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue.js实现简易折叠面板

2024-04-02 19:55

关注

本文实例为大家分享了vue.js实现简易折叠面板的具体代码,供大家参考,具体内容如下

代码如下:

主文件:app.vue


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <collpase>
      <collpase-item
        :title="item.name"
        :showAnimation="true"
        v-for="(item, i) in chapterList"
        :key="i"
      >
        <div class="list" v-for="(it, index) in item.list" :key="index">
          {{it.name}}
        </div>
      </collpase-item>
    </collpase>
  </div>
</template>

<script>
import Collpase from './components/Collpase.vue';
import CollpaseItem from './components/CollpaseItem.vue'

export default {
  name: 'App',
  data() {
    return {
      chapterList: [
        {
          name: '一',
          list: [
            {
              name: '是是是是是是所'
            },
            {
              name: '啊啊啊啊'
            }
          ]
        },
        {
          name: '二',
          list: [
            {
              name: '是是是是是是所'
            },
            {
              name: '啊啊啊啊'
            },
            {
              name: '啊啊啊啊'
            }
          ]
        }
      ]
    }
  },
  components: {
    Collpase,
    CollpaseItem,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件:


<template>
 <div class="collapse">
  <slot />
 </div>
</template>
<script>
 export default {
  name: 'Collapse',
  props: {
   accordion: {
    type: [Boolean, String],
    default: false
   }
  },
  provide() {
   return {
    collapse: this
   }
  },
  created() {
   this.childrens = []
  },
  methods: {
   onChange() {
    let activeItem = []
    this.childrens.forEach((vm) => {
     if (vm.isOpen) {
      activeItem.push(vm.nameSync)
     }
    })
    this.$emit('change', activeItem)
   }
  }
 }
</script>
<style lang="css" scoped>
 .collapse {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
 }
</style>

子组件:


<template>
 <div>
    <div :class="{ 'collapse-disabled': disabled,'collapse-cell--notdisabled': !disabled, 'collapse-cell--open': isOpen,'collapse-cell--hide':!isOpen }" class="collapse-cell">
      <div :class="{ 'collapse-disabled': disabled}" class="collapse-cell__title"  @click="onClick">
        <span class="collapse-cell__title-text">{{ title }}</span>
        <img :class="{ 'active': isOpen, 'active-animation': showAnimation === true }" class="title-arrow" src="https://static-mumway.oss-cn-zhangjiakou.aliyuncs.com/NetworkFrontEnd/wsj/yslbq/btn_dropdown.png"/>
      </div>
      <div :class="{'collapse-cell__content--hide':!isOpen}" class="collapse-cell__content">
        <div :class="{ 'active-animation': showAnimation === true }" class="collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
  name: 'UniCollapseItem',
  props: {
   title: {
    // 列表
    type: String,
    default: ''
   },
   name: {
    // 唯一标识符
    type: [Number, String],
    default: 0
   },
   disabled: {
    // 是否禁用
    type: Boolean,
    default: false
   },
   showAnimation: {
    // 是否显示动画
    type: Boolean,
    default: false
   },
   open: {
    // 是否展开
    type: Boolean,
    default: false
   },
   thumb: {
    // 缩略图
    type: String,
    default: ''
   }
  },
  data() {
   return {
    isOpen: false
   }
  },
  watch: {
   open(val) {
    this.isOpen = val
   }
  },
  inject: ['collapse'],
  created() {
   this.isOpen = this.open
   this.nameSync = this.name ? this.name : this.collapse.childrens.length
   this.collapse.childrens.push(this)
   if (String(this.collapse.accordion) === 'true') {
    if (this.isOpen) {
     let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
     if (lastEl) {
      this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
     }
    }
   }
  },
  methods: {
   onClick() {
    if (this.disabled) {
     return
    }
    if (String(this.collapse.accordion) === 'true') {
     this.collapse.childrens.forEach(vm => {
      if (vm === this) {
       return
      }
      vm.isOpen = false
     })
    }
    this.isOpen = !this.isOpen
    this.collapse.onChange && this.collapse.onChange()
    this.$forceUpdate()
   }
  }
 }
</script>

<style lang="css" scoped>
 .collapse-cell {
  flex-direction: column;
  border-color: #f0f0f0;
  border-bottom-width: 1px;
 }
 .collapse-cell--open {
  background-color: #fff;
 }
 .collapse-disabled {
  cursor: not-allowed !important;
 }
 .collapse-cell--hide {
  height: 48px;
 }
 .active-animation {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
 }

 .collapse-cell__title {
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 20px;
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  line-height: 44px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
 }
 .collapse-cell__title-img {
  margin-right: 10px;
 }
 .title-arrow {
  width: 22px;
  height: 14px;
 }
 .active {
  transform: rotate(180deg);
 }
 .collapse-cell__title-text {
  flex: 1;
  font-size: 16px;
  margin-right: 16px;
  white-space: nowrap;
  color: #333333;
    font-weight: bold;
  lines: 1;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .collapse-cell__content {
  overflow-x: hidden;
 }
 .collapse-cell__wrapper {
  display: flex;
  flex-direction: column;
 }
 .collapse-cell__content--hide {
  height: 0px;
  line-height: 0px;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯