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一毛一样:

  1. 提供template供后期拓展
  2. 处理props保证在子组件时的可用
  3. 所有样式内联,保证单文件可用
  4. 提供事件支持(目前仅实现了changed事件stateChangedtabAddedtabRemoved尚不可用)

唯一比较特别的地方就是可以使用极简模式

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);
},

源码

GitHub

说明文档过两天有时间再补,顺便吧那3个事件一起实现了,最近睡眠验证不足,睡觉了。。。

posted @   冰麟轻武  阅读(1060)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示