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" > < 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 > |
相关文章
- 《1号会员店》关闭自动续费方法 01-29
- 《排球少年:新的征程》社团每日福利领取方法 01-29
- 《椿之歌》新手风属性队伍推荐 01-29
- 《最终幻想14:水晶世界》小小阿托莫斯宠物获得方法 01-29
- 《燕云十六声》醉拳客打法攻略 01-29
- 《异人之下》全货币获取方法汇总 01-29