chenz24 / vue-blu

UI Component Library Base on Vue.js(2.x) and Bulma
MIT License
1.58k stars 225 forks source link

如何获取从tab上获取tab-item里面的label内容? #39

Closed xianzhi0520 closed 7 years ago

xianzhi0520 commented 7 years ago
template>
    <div class="columns" id="bottom-nav-fixed">
      <div class="column">
        <tabs :on-tab-click="tabCallback" type="toggle" :is-full-width="true" layout="bottom" >
          <tab-item label="Pictures" icon="image"></tab-item>
          <tab-item label="Music" icon="music"></tab-item>
          <tab-item label="Videos" icon="film"></tab-item>
          <tab-item label="Documents" icon="file-text-o"></tab-item>
        </tabs>
      </div>
    </div>
  </template>
    tabCallback:function(s){
        this.$notify.info({content:"打开了第 "+(s+1)+" 个tab"+"  ,路由为"+this.routerlist[s]+"标题:"+this.label})//这里获取不到label 提示未定义,如果用this.tabpanes.label也获取不到 children也获取不到,源码中这个是被集成过来的
        this.$router.push(this.routerlist[s])

        }
chenz24 commented 7 years ago

tabCallback:function(s){ 这里的 s 是 tab 的序数。目前你可以在 data 里定义一个 label 的数组 如 ['Picture', 'Music'] 然后根据 s 获取 label demo: http://jsbin.com/fuqecatano/edit?html,output

另外我考虑下 有没有必要在 callback 里把当前 tab-item 对象传一下

xianzhi0520 commented 7 years ago

@chenz24 很有必要传递出来,因为导航的文字和你给我的demo里面的还要建立一个数组,也没有进行同步,我是把这个作为底部导航使用的,点击的时候同时要跳转路由,并且修改顶部工具条上的标题,你的label是tabitem的成员,应该被tab继承过来使用就好了,昨天查看了 继承过来的$children子对象没有办法进行调用,不知道是不是我的方法不对 这是vue devtools看到的,OBJECT里面有label的内容 但是我this.tabPanes[1].label无法调用 tabPanes:Array[4] 0:Object 1:Object 2:Object 3:Object

chenz24 commented 7 years ago

ok,你的使用场景我之前没有考虑到。这个地方会改一下。

这套组件库有什么bug或可完善的地方希望可以多提提,只不过目前其他工作比较忙点,可能会更新的慢点:)

xianzhi0520 commented 7 years ago

你的组件还是很好的 好看 也好用,其实有时候的封装不一定做到完全封装,muse-ui在有些地方封装太过,导致好多东西不能灵活使用,你可以在开源中国osc上放一份,github 好多人 都没有办法使用(被墙了),我都是翻墙过来了 还有一个 顶部的那种工具条你可以封装一个 这个用的还是蛮多的 如果说ui组件全的 mdui很全 你可以参考下哦

xianzhi0520 commented 7 years ago

定制主题这个我真心没有看懂,mdui 设置一个theme就完成了

chenz24 commented 7 years ago

@xianzhi0520 定制主题需要了解一点 sass 的知识。其实就是对一些颜色、字体、边框之类的 sass 参数的修改