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个事件一起实现了,最近睡眠验证不足,睡觉了。。。
我写的文章,除了纯代码,其他的都是想表达一种思想,一种解决方案.希望各位看官不要局限于文章中的现成的代码,要多关注整个文章的主题思路,谢谢!
我发布的代码,没有任何版权,遵守WTFPL协议(如有引用,请遵守被引用代码的协议)
qq群:5946699 希望各位喜爱C#的朋友可以在这里交流学习,分享编程的心得和快乐
我发布的代码,没有任何版权,遵守WTFPL协议(如有引用,请遵守被引用代码的协议)
qq群:5946699 希望各位喜爱C#的朋友可以在这里交流学习,分享编程的心得和快乐
分类:
javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库