一聚教程网:一个值得你收藏的教程网站

热门教程

vue.js实现简易折叠面板代码示例

时间:2022-06-29 02:06:32 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下vue.js实现简易折叠面板代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

代码如下:

主文件:app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
  <div id="app">
    <img alt="Vue logo" src="https://img.111cn.net./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>

子组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
 <div class="collapse">
  <slot>
 </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="<a href=" http:="" www.111com.net="" cssdiv="" css.html"="" target="_blank">css</a>" scoped>
 .collapse {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
 }
</style>

子组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<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>
        <a href="https://img.111cn.net/uploads/20220926/img_63318e050f31732.png" class="js-smartPhoto-pc" target="_blank"><img :class="{ 'active': isOpen, 'active-animation': showAnimation === true }" class="title-arrow" src="https://img.111cn.net/uploads/20220926/img_63318e050f31732.png"></a>
      </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>
        </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-
 }
 .collapse-cell--open {
  background-color: #fff;
 }
 .collapse-disabled {
  cursor: not-allowed !important;
 }
 .collapse-cell--hide {
   
 }
 .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;
   
  line-
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
 }
 .collapse-cell__title-img {
  margin-right: 10px;
 }
 .title-arrow {
   
   
 }
 .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 {
   
  line-
 }
</style>

热门栏目