viewweiwu / vue-tabs-chrome

chrome tab like.
https://viewweiwu.github.io/vue-tabs-chrome/
232 stars 48 forks source link

给每个tab添加独立的类(控制x的样式) #15

Closed yexiaodong closed 4 years ago

yexiaodong commented 4 years ago

希望可以类似VS code修过文件但未保存那样的效果 image

viewweiwu commented 4 years ago

是有这个样式的,demo 里面有这个例子。 如果是 active 状态,会有 active 样式的。 其它的话跟各自的 key 有关 tab-key。 image

yexiaodong commented 4 years ago

不是这种效果。我的项目是一个编辑器,我希望当内容有修改但未保存时,tab的关闭按钮改为圆点(类似VS code的那种效果)。key只能在新增时维护,没有update方法(只有addTab、removeTab、getTabs方法)。

viewweiwu commented 4 years ago

可以的,

[
        {
          label: 'google',
          key: 'google',
          favico: require('../assets/google.jpg'),
          class: 'xxxxxx'
        }
]

我可以在每个 tab 单独给个样式,这样子你可以根据 class 改变样子了。

yexiaodong commented 4 years ago

this.tabs[0].key='welcome-change-tab' 这样修改key后,无法切换到该tab了

viewweiwu commented 4 years ago

不要去改变 key,会出问题的

yexiaodong commented 4 years ago

我不是要独立的样式,我是想动态添加class到当前存在的tab上

viewweiwu commented 4 years ago

可以的,现在还不支持每个 tab 单独给 class,我给加一个特性,每个 tab 可以独立拥有样式,你可以改这个样式

viewweiwu commented 4 years ago
[
        {
          label: 'google',
          class: 'xxxxxx'
        }
]

像这样子,你可以控制这个 class

yexiaodong commented 4 years ago

好的,谢谢

viewweiwu commented 4 years ago

更新到 0.6.0。 https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-custom-close.vue。 demo 第 4 个例子 https://viewweiwu.github.io/vue-tabs-chrome/

viewweiwu commented 4 years ago

image

yexiaodong commented 4 years ago

已经可以了,谢谢