MUI+VUE2.0:开发一个accordion组件

分类：MUI

Vue mui

开发工具:HBuilder
开发目标:使用vue2.0+mui.min.css开发一个与mui官方功能一致的accordion组件
实现功能
- accordion组件可接收一个index参数来控制显示哪个子项
- accordion组件内同时仅能展开一个子项
- accordion组件可同时使用其他非collapse的mui-table-view-cell
- accordion-item组件可单独使用,可接收一个title(子项标题)和collapse(子项是否展开)

备注:简单起见,不使用vue的单文件组件开发模式

开发步骤

使用HBuilder,创建一个移动App(mui项目)
引入mui.min.css及vue.js

搭建一个页面框架,代码如下:


<!DOCTYPE html>  
<html>  

<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
    <link rel="stylesheet" href="css/mui.min.css" />  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">折叠面板</h1>  
    </header>  
    <div class="mui-content">  
        <div class="mui-card">  

        </div>  
    </div>  
    <script type="text/javascript" src="js/vue.js"></script>  
</body>

4.开发accordion-item组件,代码如下  
组件模板代码

组件实现代码

/**

注册accordion-item组件
*/
Vue.component('accordion-item', {
props: ['index', 'title', 'collapse'],//title,collapse对外开放,(index是与accordion同时使用时内部索引值)
data: function() {
return {
isOpen: !this.collapse//将props的collapse转化为data中的isOpen
}
},
watch: {//vue2.0移除了props的双向绑定,故使用watch来实现accordion-item的状态同步
collapse: function() {
this.isOpen = !this.collapse; //父组件修改了collapse
},
isOpen: function() {
this.$emit('onCollapseChange', this.index, this.isOpen); //子组件修改了collapse通知父组件
}
},
template: document.getElementById("itemTpl").innerText,
});
```
5.开发accordion组件,代码如下
```
/**
注册accordion组件
*/
Vue.component('accordion', {
props: ['index'], //可指定一个索引值来控制哪个子项处于显示状态
data: function() {
return {
showIndex: parseInt(this.index) || 0
}
},
methods: {
onCollapseChange: function(itemIndex, isOpen) {
isOpen && (this.showIndex = itemIndex); //接收到子组件发生变化,修改当前showIndex
}
},
render: function(createElement) { //自定义渲染,主要为了实现accordion-item的双向绑定
var vnodes = this.$slots.default;
if (vnodes && vnodes.length) {
var itemIndex = 0;
for (var i = 0; i < vnodes.length; i++) {
var vnode = vnodes[i];
if (!vnode) {
continue;
}
var componentOptions = vnode.componentOptions;
if (!componentOptions) {
continue;
}
if (componentOptions.tag !== 'accordion-item') { //识别是accordion-item组件
continue;
}
componentOptions.propsData.index = itemIndex; //当前子组件索引值
componentOptions.propsData.collapse = itemIndex !== this.showIndex; //当前子组件收缩状态
if (!componentOptions.listeners) {
componentOptions.listeners = {};
}
componentOptions.listeners.onCollapseChange = this.onCollapseChange; //监听子组件收缩状态变化,实现双向绑定
itemIndex++;
}
}
return createElement('ul', {
'class': {
'mui-table-view': true,
}
}, this.$slots.default);
}
});
```
6.使用accordion渲染示例(仿官网accordion示例)  
组件使用示例
```
Input
Input
Input
确认取消
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
p. 目前最接近原生App效果的框架。
渲染示例代码

//渲染页面
var app = new Vue({
el: '.mui-card',
template: document.getElementById("tableTpl").innerText
});

完整代码,见附件