vue插件（还真是第一次接触）
<!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插件（还真是第一次接触）的更多相关文章
- 第一次接触终极事务处理——Hekaton
在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- Vue插件写、用详解（附demo）
出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...
- 发布vue插件到npm上
总体分为2个步骤 一,先写好插件 二,发布到npm上面 一,写vue插件 vue有一个开放的方法install,在vue插件需要写在这个方法里面,在vue官网,里面说的很清楚,这个方法里面可以是全局方 ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
- 第一次接触FPGA至今，总结的宝贵经验
从大学时代第一次接触FPGA至今已有10多年的时间,至今记得当初第一次在EDA实验平台上完成数字秒表.抢答器.密码锁等实验时那个兴奋劲.当时由于没有接触到HDL硬件描述语言,设计都是在MAX+plus ...
- Hybird App（一）----第一次接触
App你知道多少 一 什么是Native App 长处 缺点 二 什么是Web App 长处 缺点 三 什么是Hybrid App 长处 缺点 四 Web AppHybrid AppNative Ap ...
- 第一次接触C++------感触
2018/09/24 上大学第一次接触C++,感觉还挺有趣的. C语言是计算机的一门语言,顾名思义,语言嘛,有它自己独特的语法. 第一次用C++敲代码,觉得还挺不错的,可以从中找到乐趣.咏梅老师布置的 ...
- 孤荷凌寒自学python第五十天第一次接触NoSql数据库_Firebase
孤荷凌寒自学python第五十天第一次接触NoSql数据库_Firebase (完整学习过程屏幕记录视频地址在文末) 之前对关系型数据库的学习告一段落,虽然能力所限没有能够完全完成理想中的所有数据库操 ...
随机推荐
- INDY10 BASE64编码
INDY10 BASE64编码 DELPHI自带的BASE64单元,在项目中使用发现非常没有效率,INDY10的好用. uses IdCoderMIME BASE64编码类:TIdEncoderMIM ...
- Salt States概览
作者言 我也只是SaltStack的初学者,如果文中有错误的地方,请不吝赐教. 在学习的过程,我也做了不少实验,犯了不少错,积累了一些经验,对SaltStack的运行也有一定了解,如果有什么问题,或是 ...
- 福昕PDF高级企业版编辑器9.5 Foxit PhantomPDF Business安装破解教程
title: "福昕PDF高级企业版编辑器9.5 Foxit PhantomPDF Business安装破解教程" categories: soft tags: soft auth ...
- 大数据 Hibernate
大数据 Hibernate - 国内版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=%E5%A4%A7%E6%95%B0% ...
- Incorrect string value: '\xF0\x9F\x98\xAD",...' for column 'commentContent' at row 1
我分为下面三个步骤来解决: (1):修改mysql数据库的编码为uft8mb4 (2):修改数据表的编码为utf8mb4 (3):修改连接数据库的连接代码 更改数据库编码:ALTER DATABASE ...
- python开发笔记-连接rabbitmq异常问题unacked处理
待补充 思路:捕获程序处理异常,异常情况下,也给队列生产者返回“确认”消息
- Springboot Mybatis 集成 Redis
版本信息 Sprintboot 采用 2.1.7 RELEASE 版本 Mybatis 采用 2.1.0 Redis 采用 2.1.6.RELEASE Redis 的使用 添加 Redis 依赖 &l ...
- lamda表达式求最小值
//取最小设置金额的列 var minList = LsList.OrderBy(n=>n.Price).First(); //取最小设置金额的值 var minValue = LsList.S ...
- bootcss 之 .table-hover 类 鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应. <table class="table table-hover" ...
- npm 加速之 yarn cnpm pnpm
npm 加速之 yarn cnpm pnpm 有没有感觉到使用 npm 的时候很慢? 安装速度 几Kb/s 不说, 还装着装着出错了, 奇奇怪怪的问题.这种情况大多数还是因为网络的原因, 很多时候虽然 ...