<!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. Ubuntu 14.04下超级终端Minicom连接ARM（转）

    转自:https://blog.csdn.net/ajianyingxiaoqinghan/article/details/70209765 笔者的工作环境: PC系统:Ubuntu 14.04 LT ...

  2. MyBatis(六)：Mybatis Java API编程实现一对多、一对一

    最近工作中用到了mybatis的Java API方式进行开发,顺便也整理下该功能的用法,接下来会针对基本部分进行学习: 1)Java API处理一对多.多对一的用法: 2)增.删.改.查的用法: 3) ...

  3. JVM探究之 —— 类加载过程

    1. 类加载是什么 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 与那些在编译时需要进行连 ...

  4. Cookie的Secure属性和HttpOnly属性

    基于安全的考虑,需要给cookie加上Secure和HttpOnly属性,HttpOnly比较好理解,设置HttpOnly=true的cookie不能被js获取到,无法用document.cookie ...

  5. tp使用ajaxReturn返回二维数组格式的字符串,前台如何获取非乱码

    参考: https://www.cnblogs.com/jiqing9006/p/5000849.html https://blog.csdn.net/zengxiangxuan123456/arti ...

  6. [转]C/C++实现回调机制的几种方式（回调、槽、代理）

    转自:https://www.jianshu.com/p/4f907bba6d5f (1)Callback方式(回调) Callback的本质是设置一个函数指针进去,然后在需要需要触发某个事件时调用该 ...

  7. ARM 链接脚本分析

    分析连接脚本的语法规则 /* ---------------------------------------------------------------------------- * Memory ...

  8. Struts2数据封装

    首先是简单数据类型的封装 jsp页面 <%@ page contentType="text/html;charset=UTF-8" language="java&q ...

  9. 爬虫笔记之teambition登录验证码

    一.缘起 想做的事情太多,计划乱糟糟,想找个工具理一下,想起来了的很久之前用过teambition,打算看一下,然后在登录界面看到一个比较有意思的验证码: 这种倒是比较有意思哈,看着像是模仿12306 ...

  10. Redis 分布式锁，C#通过Redis实现分布式锁（转）

    目录(?)[+] 分布式锁一般有三种实现方式: 可靠性   分布式锁一般有三种实现方式: 1. 数据库乐观锁; 2. 基于Redis的分布式锁; 3. 基于ZooKeeper的分布式锁.本篇博客将介绍 ...