vue 選項卡 typecho tabs選項卡外掛程式

2021-10-12 00:07:16 字數 723 閱讀 1186

在看技術文件的時候發現使用選項卡來呈現示例**是個很不錯的方式,既可以節約版面空間還清晰明了,比如下面這個簡單的vue宣告式渲染demo

實際執行效果

明顯比順序排下來好多了,剛開始在網上搜尋typecho此類外掛程式一直沒有找到,所以乾脆自己動手擼乙個,最後就在typecho的預設helloworld外掛程式基礎上完成了這個typecho-tabs外掛程式,由於自己不是做php開發的中間也遇到了很多的問題,不過通過不斷除錯查文件資料,最後還是將這個外掛程式寫出來了。

【乙個想法不一定對】:程式設計其實是一種思維方式和用什麼程式語言關係不是很大(語言只是一種工具),當你掌握了程式設計思維後即使讓你用從沒用過的語言你也可以在了解它的語法基礎後快速上手開發。

2、後台開啟外掛程式

3、在文章中使用

[tabs]

[tab name="選項卡名稱1"]內容1[/tab]

[tab name="選項卡名稱2"]內容2[/tab]

[tab name="選項卡名稱3"]內容3[/tab]

[/tabs]

選項卡套選項卡

實現 項卡套小選項卡 項卡切換同時小選項卡也進行切換,且每次 項卡的切換是在小選項卡切換完後進行 大的外層的選項卡 大的選項卡內部有乙個小的選項卡 功能 自動切換 滑鼠經過切換 方案一 不可行 開兩個定時器,乙個控制外層選卡,乙個控制內層選卡。仔細分析發現,外層選項卡的切換是需要在內層選卡全部切換完...

vue 相鄰div的選項卡

終於找到了不是父子div做選項卡的方法了!html jsvue.component child1 vue.component child2 vue.component child3 new vue methods 如果是用vue cli 可以抽出為乙個vue檔案 例如home.vue中有乙個選項卡,...

選項卡整理

1.仿 的導航標籤效果!html 無標題文件 2 不同的專案使用不同的顏色來區分 3 這回需要使用到js了,呵呵 4 背景只需要兩個檔案就足夠,減少伺服器負擔 5 這是使用到的兩個 6.不是什麼地方用ajax都合適的!7.該重新整理的地方還是要重新整理!8.重新整理用cookie儲存還是很不方便的!...