jdf2e / nutui

京东风格的移动端 Vue 组件库,支持多端小程序(A Vue.js UI Toolkit for Mobile Web)
https://nutui.jd.com
MIT License
6.09k stars 826 forks source link

nut-tabs 自定义导航区域,滑动切换会丢失class #3148

Open ice909 opened 1 month ago

ice909 commented 1 month ago

NutUI 包名

@nutui/nutui-taro

NutUI 版本号

4.1.6

平台

h5, weapp

重现链接

https://nutui.jd.com/playground/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbiAgaW1wb3J0IHtyZWZ9IGZyb20gXCJ2dWVcIlxuY29uc3QgdGFicyA9IHJlZigxKVxuY29uc3QgdGFiTGlzdCA9IHJlZihbXG4gIHsgdGl0bGU6ICfkuLvpopgnLCBwYW5lS2V5OiAxLCBtc2dDYXRlZ29yeTogXCJ0aHJlYWRfbXNnX2NvdW50XCIgfSxcbiAgeyB0aXRsZTogJ+W4luWtkCcsIHBhbmVLZXk6IDIsIG1zZ0NhdGVnb3J5OiBcInBvc3RfbXNnX2NvdW50XCIgfSxcbiAgeyB0aXRsZTogJ+ezu+e7n+a2iOaBrycsIHBhbmVLZXk6IDMsIG1zZ0NhdGVnb3J5OiBcInN5c19tc2dfY291bnRcIiB9LFxuICB7IHRpdGxlOiAn56eB5L+hJywgcGFuZUtleTogNSwgbXNnQ2F0ZWdvcnk6IFwibGV0dGVyX21zZ19jb3VudFwiIH0sXG4gIHsgdGl0bGU6ICdA5oiR55qEJywgcGFuZUtleTogNiwgbXNnQ2F0ZWdvcnk6IFwiYXRfbXNnX2NvdW50XCIgfVxuXSlcbmNvbnN0IHRhYnNDaGFuZ2UgPSAob3B0KSA9PiB7XG4gIGNvbnNvbGUubG9nKFwib3B0OiBcIiwgb3B0KVxuICBjb25zb2xlLmxvZyhcInRhYnM6IFwiLCB0YWJzLnZhbHVlKVxuICB0YWJzLnZhbHVlID0gb3B0LnBhbmVLZXlcbn1cbmNvbnN0IG1zZ0NvdW50ID0gcmVmKHtcbiAgYXRfbXNnX2NvdW50OiAwLFxuICBsZXR0ZXJfbXNnX2NvdW50OiAwLFxuICBwb3N0X21zZ19jb3VudDogMCxcbiAgc3lzX21zZ19jb3VudDogMCxcbiAgdGhyZWFkX21zZ19jb3VudDogMFxufSlcbjwvc2NyaXB0PlxuPHRlbXBsYXRlPlxuICA8bnV0LXRhYnMgdi1tb2RlbD1cInRhYnNcIiBzd2lwZWFibGUgYXV0by1oZWlnaHQgQGNoYW5nZT1cInRhYnNDaGFuZ2VcIj5cbiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGVzPlxuICAgICAgICA8dmlldyBjbGFzcz1cInRhYi1saXN0XCI+XG4gICAgICAgICAgPG51dC1iYWRnZSB2LWZvcj1cIml0ZW0gaW4gdGFiTGlzdFwiIDprZXk9XCJpdGVtLnBhbmVLZXlcIiBjbGFzcz1cInRhYi1pdGVtXCIgQGNsaWNrPVwidGFicyA9IGl0ZW0ucGFuZUtleVwiXG4gICAgICAgICAgICA6Y2xhc3M9XCJ7IGFjdGl2ZTogdGFicyA9PT0gaXRlbS5wYW5lS2V5IH1cIiA6dmFsdWU9XCJtc2dDb3VudFtpdGVtLm1zZ0NhdGVnb3J5XVwiIDptYXg9XCI5XCJcbiAgICAgICAgICAgIDpoaWRkZW49XCJtc2dDb3VudFtpdGVtLm1zZ0NhdGVnb3J5XSA9PT0gMFwiIHRvcD1cIjEwXCIgcmlnaHQ9XCItNVwiPiB7eyBpdGVtLnRpdGxlXG4gICAgICAgICAgICB9fTwvbnV0LWJhZGdlPlxuICAgICAgICA8L3ZpZXc+XG4gICAgICA8L3RlbXBsYXRlPlxuICAgIDxudXQtdGFiLXBhbmUgOnBhbmUta2V5PVwiMVwiPlxuICAgICAgICA8dmlldz7kuLvpopg8L3ZpZXc+XG4gICAgICA8L251dC10YWItcGFuZT5cbiAgICA8bnV0LXRhYi1wYW5lIDpwYW5lLWtleT1cIjJcIj5cbiAgICAgICAgPHZpZXc+5biW5a2QPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gICAgPG51dC10YWItcGFuZSA6cGFuZS1rZXk9XCIzXCI+XG5cdFx0XHQgPHZpZXc+57O757uf5raI5oGvPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gICAgPG51dC10YWItcGFuZSA6cGFuZS1rZXk9XCI1XCI+XG4gICAgICAgIDx2aWV3PuengeS/oTwvdmlldz5cbiAgICAgIDwvbnV0LXRhYi1wYW5lPlxuICAgIDxudXQtdGFiLXBhbmUgOnBhbmUta2V5PVwiNlwiPlxuICAgICAgICA8dmlldz5A5oiR55qEPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gIDwvbnV0LXRhYnM+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgID5cbiAgLnRhYi1saXN0IHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHBhZGRpbmc6IDEwcHggNXB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gICAgYm94LXNoYWRvdzogMCAwIDEwcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuXG4gICAgXG4gIH1cbiAgLnRhYi1pdGVtIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgcGFkZGluZzogMTBweCAxMHB4IDIwcHggMTBweDtcbiAgICAgIGNvbG9yOiBibGFjaztcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB9XG5cbiAgICAudGFiLWl0ZW0uYWN0aXZlIHtcbiAgICAgIGNvbG9yOiByZWQ7XG4gICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgcmVkO1xuICAgIH1cblxuPC9zdHlsZT4ifQ==

重现步骤

使用滑动切换tab选项卡,自定义导航区域的 active 类名会丢失,点击切换则不会

期望的结果是什么?

滑动切换,active 样式也可以跟随切换

实际的结果是什么?

一滑动,上面的active 样式就没了

环境信息

No response

其他补充信息

"vue": "^3.3.4"

ice909 commented 1 month ago

@eiinu 补充一下,发现将:class="{ active: tabs === item.paneKey }" 改为 :class="{ active: tabs == item.paneKey }" 可以解决,类型转换好像有问题