小程式 tabbar 功能切換 元件封裝

2022-06-28 10:51:14 字數 1114 閱讀 3732

* 元件的初始資料

*/data: ,

/*** 元件的方法列表

*/methods:  = e.currenttarget.dataset;

// console.log(index)

// 2 觸發 父元件中的事件  自定義

this.triggerevent("tabsitemchange",)}}

})// 標題點選 

handletabsitemchange(e) = e.detail 

// console.log(index) 

this.changetitlebyindex(index)

},// 點選自定義元件

handleremoveimg(e) = e.currenttarget.dataset;

// console.log(index)

// 3 獲取data 中的陣列

let  = this.data;

// 4 刪除元素

chooseimgs.splice(index,1);

this.setdata()

},// 根據標題索引來啟用選中的 標題陣列

changetitlebyindex(index) = this.data;

tabs.foreach( (v,i)=>i === index ? v.isactive = true : v.isactive = false ) 

// 3 賦值到 data 中

this.setdata() 

},

按鈕切換元件

本 只是供自己學習使用,如有錯誤,希望批評指出!布局分布 div id offno input type checkbox id fd class fd label for fd class toggle span class toggle header span label div 樣式 body...

vue router切換,元件不銷毀

需求 後台管理系統,切換選單時需要一部分頁面重新整理,一部分不重新整理 其實就是元件銷毀問題 首先,我們需要在router view標籤外再包上一層標籤keep alive route.meta.keepalive router view keep alive route.meta.keepaliv...

vue之Tab切換元件

如下 示例 如下 示例 頭部切換 tab tilte v for item,index in tablist key index click toggletab index li ul 內容元件 11201939.html 如下 示例 頭部切換 for item,index in tablable ...