Vue 单文件元件 — vTabs
这是我做了第二个单文件元件
第一个在这里vCheckBox
这次这个叫vTabs,用于操作标签页
演示DEMO
演示DEMO2 - 子组件模式及别名
演示DEMO3 - 极简模式
示例:
html
<div id="tabs2"></div>
<div id="tab-1">1</div>
<div id="tab-2">2</div>
<div id="tab-3">3</div>
js
var tabs2 = new vTabs({
el: "#tabs2",
data: {
tabs: [
{ text: "html", el: "#tab-1" },
{ text: "javascript", el: "#tab-2" },
{ text: "其他", disabled: true, el: "#tab-3" }
]
}
});
设计思路
设计部分几乎和vCheckBox一毛一样:
- 提供
template
供后期拓展 - 处理
props
保证在子组件时的可用 - 所有样式内联,保证单文件可用
- 提供事件支持(目前仅实现了
changed
事件stateChanged
,tabAdded
,tabRemoved
尚不可用)
唯一比较特别的地方就是可以使用极简模式
watch: {
tabs: function(value) {
if (value == null) {
this.tabs = [];
return;
}
if (value.constructor !== Array) {
this.tabs = [value];
return;
}
var id = this.tabFields.id,
el = this.tabFields.el,
text = this.tabFields.text,
disabled = this.tabFields.disabled;
function set(obj, name, value) {
if (typeof name === "string") Vue.set(obj, name, value);
return obj;
}
for (var i = 0; i < value.length; i++) {
var val = value[i];
if (typeof val !== "object") {
val = set({},
text, val);
}
if (!val.hasOwnProperty(id)) {
set(val, id, Math.random().toString());
}
if (!val.hasOwnProperty(disabled)) {
set(val, disabled, false);
}
if (val.hasOwnProperty(el) && typeof val[el] === "string") {
set(val, el, document.querySelector(val[el]));
}
value[i] = val;
}
if (value.length === 0) {
if (this.selectedIndex !== -1) {
this.selectedIndex = -1;
}
} else if (this.selectedIndex < 0 || this.selectedIndex >= value.length) {
this.selectedIndex = 0;
}
},
观察(watch)tabs
的变化,如果只是string
就作为text使用,其他属性如果不存在即补全。
由于初始化data
时并不会触发watch,所以在created
中尝试触发watch
created: function() {
this.tabs = [].concat(this.tabs);
},
源码
说明文档过两天有时间再补,顺便吧那3个事件一起实现了,最近睡眠验证不足,睡觉了。。。
Vue 单文件元件 — vTabs的更多相关文章
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- VUE2 第六天学习--- vue单文件项目构建
阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...
- vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法
vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- vue单文件中引用路径的处理
原文地址:vue单文件中引用路径的处理如有错误,欢迎指正! vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
随机推荐
- 如何在Django中配置MySQL数据库
直接上图 在项目中直接找到settings 文件 第一步 原始Django自带数据库 第二步将配置改成MySQL的数据 第三步 在__init__文件中告知Django使用MySQL数据 ...
- maven与eclipse连接的配置
1.修改本地仓库位置 maven从中心仓库下载的文件一般默认放在本地用户文件加下的.m2/repository文件夹中,修改则需要找到所下载的maven文件夹下的conf文件夹下的setting.xm ...
- Day04.a(对象类型的转换,多态)
对象类型的转换 Dog dog = new Dog(); 通常情况下,对象(new Dog())类型和引用(dog)类型是相同的,当引用类型和对象类型不一致时,就需要类型转换. 向上转型:将较具体的类 ...
- clearTimeout方法在IE上的兼容问题
今天在修改公司项目的bug时发现一个问题,出错代码如下: clearTimeout(); setTimeout(function(){ // 具体业务逻辑 },100); 这段代码在chrome.fi ...
- Java Swing 编程 JComboBox 实现模糊查找功能。
废话不多说,直接上代码.代码如下: import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.util ...
- requests补充
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中,POST 一般用来向服务端提交数据,本文 ...
- SEH exception with code 0xc0000005 thrown in the test body
在用Visual Studio时遇到这个报错.原因:访问了非法的内存地址. 这个问题不应该被忽略,通常是代码有bug. 解决办法: VS2013: 菜单->Debug->Exception ...
- Chrome插件触发web页面的事件
Chrome插件中不能直接调用Web页面的元素js,原因是chrome插件的机制http://stackoverflow.com/questions/17819344/triggering-a-cli ...
- Taro父子组件通信
父组件 testEvent = () =>{ console.log('abc123') } <Test test={1231323} onTestEvent={this.testEven ...
- c/c++再学习:C与Python相互调用
c/c++再学习:Python调用C函数 Python 调用C函数比较简单 这里两个例子,一个是直接调用参数,另一个是调用结构体 C代码 typedef struct { int i1; int i2 ...