js汉字转化成拼音；el-tabs插槽；el-tabs图标

实现效果

场景：点击顶部的tabs左侧的tabs也会跟着变化，且是根据接口数据动态生成的， 其中给tabs前加图标用到tabs插槽和js汉字转化成拼音。

例如：
概览---->gailan        iconfont.css中的图标保持一致

 

1.安装依赖

 npm install js-pinyin --save

2.页面引用

<script>
let pinyin = require('js-pinyin');
export default {
    data(){
        return{
           tabList: [
          {
            type: '11',
            name: '概览',
            hasicon: true,
          },
          {
            type: '12',
            name: '源水',
            hasicon: true,
          }
        ]
      }

    },
    created() {
        this.pinyin = pinyin
    }
}
</script>

3.使用

 <el-tabs v-model="activeName" :stretch="isStretch" :tab-position="tabPosition" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabList" :label="item.name" :name="item.type">
            <span slot="label">
                <span v-if="item.hasicon">
                    <i
                        v-bind:class="activeName == item.type ? `is-active img iconfont icon-${pinyin.getFullChars(item.name).toLowerCase()}` : `unactive img iconfont icon-${pinyin.getFullChars(item.name).toLowerCase()}`"></i>
                </span>
                <span>
                    {{ item.name }}
                </span>
            </span>
        </el-tab-pane>
    </el-tabs>

关键代码

pinyin.getFullChars(item.name).toLowerCase()