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

祝你今天也快乐

已于 2023-04-06 16:56:17 修改

阅读量198

点赞数

分类专栏： element vue js 文章标签： vue.js npm node.js

于 2023-03-22 14:04:39 首次发布

本文链接：https://blog.csdn.net/killerdoubie/article/details/129708144

版权

vue 同时被 3 个专栏收录

42 篇文章

订阅专栏

25 篇文章

订阅专栏

element

20 篇文章

订阅专栏

文章介绍了如何在Vue.js应用中结合element-ui的tabs组件，根据接口数据动态生成tabs，并在点击时改变左侧标签。关键点在于使用js-pinyin库将汉字转换为拼音，以便为tabs添加图标，同时在点击时保持顶部和左侧tabs的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

场景：点击顶部的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()