Vue 單檔案元件 vTabs

2022-01-11 05:47:01 字數 1481 閱讀 4078

這是我做了第二個單檔案元件

第乙個在這裡vcheckbox

這次這個叫vtabs,用於操作標籤頁

演示demo

演示demo2 - 子元件模式及別名

演示demo3 - 極簡模式

示例:html

12

3

js

var tabs2 = new vtabs(,,]

}});

設計思路

設計部分幾乎和vcheckbox一毛一樣:

提供template供後期拓展

處理props保證在子元件時的可用

所有樣式內聯,保證單檔案可用

提供事件支援(目前僅實現了changed事件statechangedtabaddedtabremoved尚不可用)

唯一比較特別的地方就是可以使用極簡模式

watch: 

if (value.constructor !== array)

var id = this.tabfields.id,

el = this.tabfields.el,

text = this.tabfields.text,

disabled = this.tabfields.disabled;

function set(obj, name, value)

for (var i = 0; i < value.length; i++) ,

text, val);

}if (!val.hasownproperty(id))

if (!val.hasownproperty(disabled))

if (val.hasownproperty(el) && typeof val[el] === "string")

value[i] = val;

}if (value.length === 0)

} else if (this.selectedindex < 0 || this.selectedindex >= value.length)

},

觀察(watch)tabs的變化,如果只是string就作為text使用,其他屬性如果不存在即補全。

由於初始化data時並不會觸發watch,所以在created中嘗試觸發watch

created: function() ,
原始碼

github

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

vue 單檔案元件

vue.js自定義的一種檔案格式 vue檔案,稱為單檔案元件,就是將html css js封裝在同乙個檔案內,從而實現了對乙個元件的封裝,乙個.vue 檔案就是乙個單獨的元件。1 編寫單檔案元件 vue結尾的檔案 由3部分組成 html template css style js script ht...

vue單檔案元件

vue單檔案元件 vue單檔案元件就是把乙個頁面拆分成為多個 多層次的元件。通過多層引用,大大縮小vue檔案的長度和頁面複雜度。步驟 父元件 1.引入元件 import tabcard from components tabcard.vue 2.配置元件 export default 3.使用元件 ...

單檔案元件vue

定義 乙個檔案名字是以.vue結尾,並且裡邊的內容就是乙個元件,這個檔案就稱作單檔案元件 普通元件的缺點 普通元件內容是 和 其它js 邏輯摻雜在一塊兒,不易維護,其優勢不容易發揮!x 乙個元件就是乙個vue例項的體現,template div容器部分 script vue例項部分 style 給d...