Vue Tab 组件再探究-蒲公英云

初学 Vue 的时候，发现用 Vue 来写 Tab 组件是如此简单，利用“数据驱动”的思路还真和 js 控制 dom 不一样。请见下面第一版的代码，没有 js dom 那样 for 遍历各元素控制显示或隐藏，而是用 {'selected': index === selected} 控制样式，非常简洁。

第一版的 tab 组件

// 简单选项卡
Vue.component('aj-simple-tab', { 
    template : 
        '<div :class="isVertical ? \'aj-simple-tab-vertical\' : \'aj-simple-tab-horizontal\' ">\ <ul>\ <li v-for="(item, index) in items" :class="{\'selected\': index === selected}" @click="changeTab(index);">{ {item.name}}</li>\ </ul>\ <div class="content">\ <div v-for="(item, index) in items" :class="{\'selected\': index === selected}" v-html="item.content"></div>\ </div>\ </div>',
    props: { 
        isVertical : Boolean, // 是否垂直方向的布局，默认 false,
        initItems : Array
    },
    data() { 
        return { 
            selected : 0,
            items : this.initItems || [
                { name : '杜甫：望岳', content : '岱宗夫如何，齊魯青未了。<br>\ 造化鐘神秀，陰陽割昏曉。<br>\ 蕩胸生層云，決眥入歸鳥，<br>\ 會當凌絕頂，一覽眾山小。'
                },
                { name : '资质证照', content : '之所以如此，端在于中国传统中存在着发达的契约。予谓不信，可看看早年由福建师范大学内部印行的两册本《明清福建经济契约文书选集》，中国社会科学出版社出版的《自贡盐业契约档案选集》，花山文艺出版社出版的共二十册的《徽州千年契约文书》;再看看近些年由安徽师范大学出版社出版的十卷本的《千年徽州契约文书集萃》，广西师范大学出版社出版的四辑共四十册《徽州文书》、三辑共三十册的《清水江文书》，民族出版社出版的多卷本《贵州清水江流域明清契约文书》，凤凰出版社出版的《敦煌契约文书辑校》，天津古籍出版社出版的《清代宁波契约文书辑校》，浙江大学出版社出版的《清代浙东契约文书辑选》……不难发现，中国传统契约文书的整理出版，完全可称为如雨后春笋般在迅速成长!'},
                { name : '资质证照', content : '笔者出于个人兴趣，在关注这些已经整理出版的、卷帙浩繁的契约文献的同时，也游走各地，或亲自搜集各类契约文书，或到一些地方档案馆查看其业已编辑成册、内部印行的传统契约文书，如在台湾宜兰、高雄，山东青岛、威海，贵州锦屏、从江等地档案机构或民间都见到过相关契约文献。记忆尤深的一次，是我和几位学生共游山东浮来山。在一处值班室里，居然发现有人以清代契约文本粘糊墙壁!足见只要我们稍加留意，在这个文明发展历经数千年的国度，不时可以发现一些令人称心的古代契约文献。'}
            ]
        };
    },
    methods : { 
        changeTab(index) { 
            this.selected = index;
        }
    }
});

演示的例子如下图。
在这里插入图片描述
该例子的 items 数据项还提供了默认的演示数据，不过问题是，tab 的内容要写在 js 里面，是比较麻烦的，能不能改写在标签里面呢？

第二版的 tab 组件

这问题一时还没有好的办法，因为碍于组件的关系，输入的数据还是变成 js 字符串，那样就涉及转义等的问题，处理起来也不方便。于是干脆放弃 vue 组件的概念，直接写标签然后用最简单的 vue 实例化方式。

<div class="aj-simple-tab-vertical tab" style="padding: 1% 5%;">
        <ul>
            <li :class="{ 'selected': 0 === selected}" @click="selected = 0">前端文档</li>
            <li :class="{ 'selected': 1 === selected}" @click="selected = 1">数据库文档</li>
        </ul>
    <div class="content">
        <div :class="{ 'selected': 0 === selected}">
            <!-- TAB 内容 -->
                <iframe src="${ajaxjsui}/ui-doc" frameborder="no" width="100%" height="96%"></iframe>
            <!-- // TAB 内容 -->
        </div>
        <div :class="{ 'selected': 1 === selected}">
            <!-- TAB 内容 -->
            <iframe src="${ctx}/admin/DataBaseShowStru" frameborder="no" width="100%" height="96%"></iframe>
            <!-- // TAB 内容 -->
        </div>
    </div>
</div>
<script> TAB = new Vue({ el : '.tab', data: { selected:0 } }); </script>

这样的方式比第一版跟简单，完全没有了 for 循环，都是一个个写死 0、1、2……的判断。虽然很脑残，但对于初学者来说这足够浅显的。放入如果 tab 数量不多，几个写死还是问题的不大的。

第三版的 tab 组件

第二版的方式只是玩玩，肯定还是要自动处理 tab 的。想到 vue 支持 slot 机制，也就是标签嵌套标签，对于不确定的内容，使用 slot 非常灵活。基于这一思路再次封装一 tab 组件，既解决 HTML 定义 tab 内容的需求，也能通过 vue 组件来封装 tab 逻辑，于是形成 <aj-tab> 组件如下。

// https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots
Vue.component('aj-tab', { 
       template: 
           '<div :class="isVertical ? \'aj-simple-tab-vertical\' : \'aj-simple-tab-horizontal\' ">\ <button v-for="tab in tabs" v-bind:key="tab.name"\ v-bind:class="[\'tab-button\', { active: currentTab.name === tab.name }]"\ v-on:click="currentTab = tab">{ {tab.name}}\ </button>\ <component v-bind:is="currentTab.component" class="tab"></component>\ </div>',
    props: { 
        isVertical : Boolean // 是否垂直方向的布局，默认 false,
    },
    data() { 
        return { 
          tabs: [],
          currentTab: { }
        };
    },
    mounted() { 
        var arr =  this.$slots.default;
        for(var i = 0; i < arr.length; i++) { 
            var el = arr[i];
            if(el.tag === 'textarea') { 
                this.tabs.push({ 
                    name : el.data.attrs['data-title'],
                    component: { 
                         template: '<div>' + el.children[0].text + "</div>"
                        }
                });
            }
        }
        this.currentTab = this.tabs[0];
    }
});

第三版使用了 <conmponent> 动态组件，现在想了下，其实应该可以优化而不用动态组件的。调用方式如下。

<div class="foo">
    <aj-tab>
        <textarea data-title="Home">Home componentzcc<span class="foo">hihi</span></textarea>
        <textarea data-title="Home2">Home componentzcc2</textarea>
        <textarea data-title="Home3">Home componentzcc3</textarea>
    </aj-tab>
</div>

调用方式利用了 <textarea>，避免了浏览器渲染 HTML。标题安排在 data-title 属性上。

第四版的 tab 组件

本来写到第三版，其实已经足够 ok 的了，但担心 tab 里面不能放置 vue 组件，于是又另辟蹊径搞了第四版的 tab，实际上第三版是可以的，我对 <textarea> 多虑了。

第四版却是放弃 vue 数据状态的控制，改用原始的 for 循环控制。

调用方式如下，先声明 HTML，然后 new Vue 实例化（还没使用组件封装之）。

<div class="aj-simple-tab-horizontal tab" style="padding: 1% 5%;">
    <ul>
        <li>备份数据</li>
        <li>数据库连接管理</li>
        <li>代码生成器</li>
        <li>后台日志浏览</li>
    </ul>
    <div>
        <div>备份数据</div>
        <div>数据库连接管理</div>
        <div>代码生成器</div>
        <div>后台日志浏览</div>
    </div>
</div>
new Vue({ 
    el:'.aj-json-form',
    data: { 
        scheme : value,
        selected:0
    },
    mounted() { 
        var ul = this.$el.querySelector('.aj-simple-tab-horizontal > ul');
        ul.onclick = e => { 
            var el = e.target;
            var index = Array.prototype.indexOf.call(el.parentElement.children, el);
            this.selected = index;
        };
        //debugger;
        this.$options.watch.selected.call(this, 0);
    },
    watch: { 
        selected(v){ 
            var headers  = this.$el.querySelectorAll('.aj-simple-tab-horizontal > ul > li');
            var contents = this.$el.querySelectorAll('.aj-simple-tab-horizontal > div > div');
            var each = arr => {                             
                for(var i = 0, j = arr.length; i < j; i++) { 
                    if(v === i) { 
                        arr[i].classList.add('selected');
                    } else { 
                        arr[i].classList.remove('selected');
                    }
                }
            };
            each(headers);
            each(headers);
        }
    }
});

那么接着封装成组件吧？不过稍等，能不能用多态 mixins 特性呢？可以的，且看……

aj.tab = { 
    data(){ 
        return { 
            selected: 0
        };
    },
    mounted() { 
        var ul = this.$el.querySelector('.aj-simple-tab-horizontal > ul');
        ul.onclick = e => { 
            var el = e.target;
            var index = Array.prototype.indexOf.call(el.parentElement.children, el);
            this.selected = index;
        };
        this.$options.watch.selected.call(this, 0);
    },
    watch: { 
        selected(v) { 
            var headers  = this.$el.querySelectorAll('.aj-simple-tab-horizontal > ul > li');
            var contents = this.$el.querySelectorAll('.aj-simple-tab-horizontal > div > div');
            var each = arr => {                             
                for(var i = 0, j = arr.length; i < j; i++) { 
                    if(v === i) { 
                        arr[i].classList.add('selected');
                    } else { 
                        arr[i].classList.remove('selected');
                    }
                }
            };
            each(headers);
            each(contents);
        }
    }
};
new Vue({ 
    el:'.aj-json-form',
    data: { 
        scheme : value
    },
    mixins: [aj.tab]
});