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事件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個事件一塊兒實現了，最近睡眠驗證不足，睡覺了。。。