簡書原文

這是我做了第二個單文件元件
第一個在這里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); },

源碼

GitHub

說明文檔過兩天有時間再補，順便吧那3個事件一起實現了，最近睡眠驗證不足，睡覺了。。。

轉載于:https://www.cnblogs.com/blqw/p/6751627.html

總結

以上是生活随笔為你收集整理的Vue 单文件元件 — vTabs的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。