vue实现折叠组件-collapse

相信大家对于下面的列表形式应该不陌生吧，至少我个人在后台OA系统的时候就用到了，那么我来聊下这样形式的列表，应该怎么封装成为一个公共的组件。（代码参考了iview用于个人学习之用）

一.列表组件参数设置
每一个公共组件都应该约定好参数，定义好回调函数所传递参数。不应该与业务组件和业务逻辑相互耦合。
这个组件的约定参数和使用方法如下：

 <Collapse v-model="value1" @on-change="changFun"><Panel name="1"><span>标题1</span><p slot="content">标题1的内容</p></Panel><Panel name="2"><span>标题2</span><p slot="content">标题2的内容</p></Panel><Panel name="3"><span>标题3</span><p slot="content">标题3的内容</p></Panel><Panel name="4"><span>标题4</span><p slot="content">标题4的内容</p></Panel></Collapse>

Collapse参数

属性	说明
value	激活面板的name
accordion	是否开启手风琴模式

Collaspe事件

事件名	说明
on-change	返回面板的key,格式为数组

Panel参数

属性	说明
name	对应面板的name

二.建立文件夹存放Collapse和Panel组件

在src/components下分别建立collaspse.vue,panel.vue和index.js
index.js

import Panel from './panel.vue'
import Collapse from './collapse'
Collapse.Panel = Panel
export default Collapse

在main.js中

这里在main.js中导入，全局注册组件，那么我们就不需要在某个vue文件中单独引入。
Collapse.vue

<template><div :class="classes"><slot></slot></div>
</template><script>
const prefixCls = "ka-collapse";
export default {name: "collapse",props: {// 是否是手风琴模式accordion: {type: Boolean,default: false},// 传递进来的值value: [Array, String]},computed: {classes() {// `${prefixCls-simple}` 是变量需要添加[]return [`${prefixCls}`];}},data() {return {currentValue: this.value // 传递进来当前的值};},mounted() {this.setActive();},methods: {setActive() {// 为它下面的子元素都设置一个index值// console.log("setActive");const activeKey = this.getActiveKey();this.$children.forEach((child, index) => {const name = child.name || index.toString(); // toString 1=>"1"整数转换成为字符串child.isActive = activeKey.indexOf(name) > -1; // 给选中的元素赋值活跃状态// console.log(child);child.index = index;});},toggle(data) {// console.log("toggle");const name = data.name.toString(); // 强行转换成为字符串let newActivekey = [];if (this.accordion) {// 如果是手风琴模式if (!data.isActive) {newActivekey.push(name);}} else {let activeKey = this.getActiveKey();const nameIndex = activeKey.indexOf(name);if (data.isActive) {// 如果当前是展开状态if (nameIndex > -1) {activeKey.splice(nameIndex, 1);}} else {if (nameIndex < 0) {activeKey.push(name);}}newActivekey = activeKey;}this.currentValue = newActivekey;// console.log(data);this.$emit("input", newActivekey);this.$emit("on-change", newActivekey);},getActiveKey() {// 获取当前展开的元素，并且做成数组的形式 1 => ["1"]let activeKey = this.currentValue || [];const accordion = this.accordion;if (!Array.isArray(activeKey)) {// 判断 activeKey 是不是数组activeKey = [activeKey]; // 不是数组则让它变成数组}if (accordion && activeKey.length > 1) {// 如果是手风琴模式，必定是只会有一个元素activeKey = [activeKey[0]];}for (let i = 0; i < activeKey.length; i++) {activeKey[i] = activeKey[i].toString();}return activeKey;}},watch: {value(val) {console.log(val);this.currentValue = val;},currentValue() {console.log("currentValue");this.setActive();}}
};
</script><style lang="scss" scoped>
// border-top: 1px solid #dcdee2;
</style>

panel.vue

<template><div :class="itemClasses"><div :class="headerClasses" @click="toggle"><Icon type="icon-right" v-if="!hideArrow"></Icon><slot></slot></div><div :class="contentClass" v-show="isActive"><div :class="boxClasses"><slot name="content"></slot></div></div></div>
</template><script>
const prefixCls = "ka-collapse";
export default {name: "Panel",data() {return {index: 0,isActive: false};},props: {name: {type: String},hideArrow: {type: Boolean,default: false}},computed: {itemClasses() {return [`${prefixCls}-item`,{[`${prefixCls}-item-active`]: this.isActive}];},// 定义header样式headerClasses() {return `${prefixCls}-header`;},contentClass() {return `${prefixCls}-content`;},boxClasses() {return `${prefixCls}-content-box`;}},methods: {toggle() {// console.log(this);this.$parent.toggle({name: this.name || this.index,isActive: this.isActive});}}
};
</script><style lang="scss" scoped>
.ka-collapse-header {color: red;
}
</style>

这个组件大概的思路为，在panel子组件直接触发父组件的tooggle,这样做的好处就是可以把当前点击panel对象的状态传递到父组件，有父组件去完成切换的逻辑。
最后给上github地址:
https://github.com/whenTheMorningDark/workinteresting/tree/master/src/components/collapse

vue实现折叠组件-collapse相关推荐

Bootstrap 折叠插件Collapse 事件
事件 Bootstrap还为折叠组件Collapse提供了一组事件,通过这些事件,可以监听用户的行为及折叠组件的状态.这些事件及含义见表 5‑8. 表 5‑8 折叠插件的事件及含义事件含义 sho ...
Vue学习（组件传参）-学习笔记
文章目录 Vue学习(组件传参)-学习笔记父到子子到父父操作子-ref(类似于操作dom) 兄弟之间传参 Vue学习(组件传参)-学习笔记父到子 Father:(index) <temp ...
html5中折叠面板,Ant Design中折叠面板Collapse
这段时间做react项目遇到一些平常并不会去在意的问题,但解决的时候又需要思考一番.这次开发用到了蚂蚁金服的UI框架Ant Design.项目中有一个模块的样式和功能用到了折叠面板Collapse组件 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
Vue基础知识+组件化开发+模块化开发总结
三.内容: 一.MVVM View层视图层,我们前端开发时候的DOM层主要就是给用户展示各种信息 Model层数据层:可能是我们固定的思数据,更多的是来自我们的服务器,在网路上请求下来的数据 V ...
Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
Vue.js子组件向父组件通信
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的 ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
vue与react组件的思考
前言我最一开始是先学的react,然后也就前段时间开始学习vue,一开始给我的感受是两者很相似,react给我的感觉是灵活,vue是一种死板的感觉.为什么有这种感觉呢,react有一种很强烈的欲望, ...

vue实现折叠组件-collapse

vue实现折叠组件-collapse相关推荐

最新文章

热门文章