<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>标签页组件</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div id="app" v-cloak>

        <tabs v-model="activeKey">

            <pane label="标签1" name="">

                标签1的内容

            </pane>

            <pane label="标签2" name="">

                标签2的内容

            </pane>

            <pane label="标签3" name="">

                标签3的内容

            </pane>

        </tabs>

    </div>

</body>

</html>

<script src="jquery-3.1.1.js"></script>

<script src="vue.js"></script>

<script>

    Vue.component('pane', {

        name: 'pane',

        template: '\

                <div class="pane" v-show="show">\

                    <slot></slot>\

                </div>',

        props: {

            name: {

                type: String

            },

            label: {

                type: String,

                default: ''

            }

        },

        data: function() {

            return {

                show: true

            }

        },

        methods: {

            updateNav() {

                this.$parent.updateNav();

            }

        },

        watch: {

            lable() {

                this.updateNav();

            }

        },

        mounted() {

            this.updateNav();

        }

    });

    Vue.component('tabs', {

        template: '\

                <div class="tabs">\

                    <div class="tabs-bar">\

                        <div :class="tabCls(item)" v-for="(item,index) in navList" @click="handleChange(index)">{{item.label}}</div>\

                    </div>\

                    <div class="tabs-content">\

                        <slot></slot>\

                    </div>\

                </div>',

        props: {

            value: { //这里用于v-model绑定，好像只能用value，而不能用其他关键字; value 就是动态索引（指定哪一个标签处于活动状态）

                type: [String, Number]

            }

        },

        data: function() {

            return {

                currentValue: this.value,

                navList: []

            }

        },

        methods: {

            tabCls: function(item) {

                var temp_xx = [

                    'tabs-tab', {

                        'tabs-tab-active': item.name === this.currentValue

                    }

                ];

                //秘诀：将对象转为json字符串

                //动态类:["tabs-tab",{"tabs-tab-active":true}]

                temp_xx = JSON.stringify(temp_xx);

                console.log("动态类:" + temp_xx);

                return temp_xx;

            },

            getTabs() {

                return this.$children.filter(function(item) {

                    //console.log(item.$options);

                    //console.log('----------------------');

                    //返回标签的名字是“pane”的子孙

                    return item.$options.name === 'pane';

                });

            },

            updateNav() {

                this.navList = [];

                var _this = this;

                this.getTabs().forEach(function(pane, index) {

                    //console.log('lable:' + pane.label);

                    //console.log('name:' + pane.name);

                    //console.log('-----------');

                    _this.navList.push({

                        label: pane.label,

                        name: pane.name || index

                    });

                    if (!pane.name)

                        pane.name = index;

                    if (index === ) {

                        if (!_this.currentValue) {

                            _this.currentValue = pane.name || index;

                        }

                    }

                });

                this.updateStatus();

            },

            updateStatus() {

                var tabs = this.getTabs();

                //console.log('符合条件的tabs-----------');

                //console.log(tabs);

                var _this = this;

                //每个标签是否显示，取决于它的变量"show";而变量“show”是否为“true”取决于它的name是否为currentValue

                tabs.forEach(function(tab) {

                    return tab.show = (tab.name === _this.currentValue);

                });

            },

            handleChange: function(index) {

                var nav = this.navList[index];

                var name = nav.name;

                this.currentValue = name;

                this.$emit('input', name);

                this.$emit('on-click', name);

            }

        },

        watch: {

            value: function(val) {

                this.currentValue = val;

            },

            currentValue: function() {

                this.updateStatus();

            }

        }

    });

    var app = new Vue({

        el: '#app',

        data: {

            activeKey: ''

        }

    });

</script>

vue插件（还真是第一次接触）的更多相关文章

  1. 第一次接触终极事务处理——Hekaton

    在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...

  2. 把axios封装为vue插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

  3. Vue插件写、用详解（附demo）

    出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...

  4. 发布vue插件到npm上

    总体分为2个步骤 一,先写好插件 二,发布到npm上面 一,写vue插件 vue有一个开放的方法install,在vue插件需要写在这个方法里面,在vue官网,里面说的很清楚,这个方法里面可以是全局方 ...

  5. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  6. 第一次接触FPGA至今，总结的宝贵经验

    从大学时代第一次接触FPGA至今已有10多年的时间,至今记得当初第一次在EDA实验平台上完成数字秒表.抢答器.密码锁等实验时那个兴奋劲.当时由于没有接触到HDL硬件描述语言,设计都是在MAX+plus ...

  7. Hybird App（一）----第一次接触

    App你知道多少 一 什么是Native App 长处 缺点 二 什么是Web App 长处 缺点 三 什么是Hybrid App 长处 缺点 四 Web AppHybrid AppNative Ap ...

  8. 第一次接触C++------感触

    2018/09/24 上大学第一次接触C++,感觉还挺有趣的. C语言是计算机的一门语言,顾名思义,语言嘛,有它自己独特的语法. 第一次用C++敲代码,觉得还挺不错的,可以从中找到乐趣.咏梅老师布置的 ...

  9. 孤荷凌寒自学python第五十天第一次接触NoSql数据库_Firebase

    孤荷凌寒自学python第五十天第一次接触NoSql数据库_Firebase (完整学习过程屏幕记录视频地址在文末) 之前对关系型数据库的学习告一段落,虽然能力所限没有能够完全完成理想中的所有数据库操 ...

随机推荐

  1. 【Python】解析Python中的迭代器

    目录结构: contents structure [-] Iterator VS Iterable Itertools 模块 生成器(Generator) 在开始文章之前,先贴上一张Iterable. ...

  2. Fiddler抓包_次要功能和第三方插件

    1.替换HTTP Request Host 应用场景:进行开发时,线上去测试跳转调试 替换命令:urlreplace news.baidu.com www.baidu.com: 清除命令:urlrep ...

  3. Html表格和表头文字不换行

    [本文出自天外归云的博客园] 希望表头中的文字和表格中的文字不换行,只需要在th和td标签加上: nowrap="nowrap"

  4. Java 各种时间日期相关的操作

    目录 1.获取当前时间的时间戳 1.1.时间进制 1.2.获取毫秒级时间戳 1.3.获取纳秒级时间戳 2.java.util包 2.1.Data 2.2.Calendar 3.java.time包 3 ...

  5. iredmail开源邮件系统部署

    Iredmail 安装前注意事项: 通过官网了解iRedMail: 2.    选择相应的linux发行版(我选的是64位的CentOS6.4,iRedMail-0.8.6.tar.bz2) ired ...

  6. docker: 构建自己的镜像

    我们给予ubuntu的镜像然后拷贝python的requirement.txt文件进去,再根据这个文件安装对应的python库 拷贝文件到docker容器.首先查找对应的容器ID.然后执行命令 doc ...

  7. 【Maven学习】Eclipse使用maven问题集

    环境 jdk 1.8 eclipse 4.7 apache-maven-3.6.1 一.eclipse 编译maven工程步骤 1.Update Project 2.maven clean 3.mav ...

  8. csu 1978: LXX的图论题

    1978: LXX的图论题 Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 71   ...

  9. jquery关于on click事件的理解

    jquery关于on click事件的理解 <pre><a style="min-width:60px; margin-left:6px;" wenzhangid ...

  10. 一致性hash算法应用场景、详解与实现（JAVA）

    一.概述 在分布式环境下,开发者通常会遇到一些分布存储的场景,例如数据库的分库分表(比如用户id尾号为1的放入数据库1,id尾号为2的放入数据库2):又如分布式缓存数据的获取(比如根据ip地址进行缓存 ...