前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）

最新推荐文章于 2024-04-15 09:41:36 发布

嗯嗯**

最新推荐文章于 2024-04-15 09:41:36 发布

阅读量2.5k

点赞数 2

分类专栏：前端知识文章标签：前端 javascript ElementPlus Vue 阿里图标

本文链接：https://blog.csdn.net/weixin_39651356/article/details/128490092

版权

前端知识专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

1. 下载阿里图标

在这里插入图片描述

2. 将下载的文件压缩放入到项目中

在这里插入图片描述

3. 直接本地打开压缩文件里面的使用Demo - demo_index.html

在这里插入图片描述

4. 根据上面的Demo提示，页面需引入文件里面的iconfont.css中

在这里插入图片描述

5. 将阿里巴巴组件注册成组件进行使用（当然如果你并不需要可以直接忽略这步）

/**
 * 组件生成
 */
function createAlibabaIconComponent(iconClass) {
    return {
        template : `
            <span class="iconfont ${iconClass}"></span>
        `
    }
}

/**
 * 首字母大写
 * @param str
 * @returns {*}
 */
function upperFirst(str) {
    if(!str) return str;
    return str.slice(0,1).toUpperCase() +str.slice(1)
}

/**
 * 转成驼峰
 * @param str 字符串内容
 * @param separatorChar 分隔符（单长度的字符串）
 * @param bigCamelFlag 是否是大驼峰
 * @returns {*}
 */
function toCamelCase(str, separatorChar, bigCamelFlag) {
    if(!str) {
        return str;
    }

    var strArr = str.split('');
    for (var i = 1; i < strArr.length; i++) {
        if (strArr[i] == (separatorChar?separatorChar:'-')) {
            //删除'-'
            strArr.splice(i, 1);
            //转大写
            if (i < strArr.length) {
                strArr[i] = strArr[i].toUpperCase();
            }
        }
    }
    let smallCamelStr = strArr.join('');

    return bigCamelFlag ? upperFirst(smallCamelStr) : smallCamelStr
}

<!DOCTYPE html>
<html lang="en" class="${webPageConfig.graySwitchFlag?string('grayPage', '')}">
<head>
    <meta charset="UTF-8">
    <title>个人在线工具</title>


</head>
<body>
<div id="vueApp">




</div>
</body>



<script>

    window.onload = async function () {


        const {createApp} = Vue
        const app = createApp({});
          


        //将饿了么全部图标设置为全局组件
        Object.keys(ElementPlusIconsVue).forEach((componentName) => {
            app.component(componentName, ElementPlusIconsVue[componentName]);
        })




        //必须同步进行获取、解析阿里图片的信息，然后全局注入成Vue组件
        //注意：注入给Vue的变量名、组件名不可含有横杠
        let alibabaIconInfo = null;
        $.get({
            url: '/img/icon/iconfont.json',
            async: false,
            success: (data, textStatus, jqXHR) => {
                log("获取阿里图标数据信息成功：", textStatus, data);
                alibabaIconInfo = data;
                data.glyphs.forEach((item, index) => {
                    let iconClass = 'icon-' + item['font_class'];
                    let alibabaIconComponent = createAlibabaIconComponent(iconClass);
                    let componentNmae = toCamelCase(iconClass, '-', true)
                    app.component(componentNmae, alibabaIconComponent)
                    log("阿里图标注册成Vue组件：", componentNmae, alibabaIconComponent);
                })
            },
            error: (XMLHttpRequest, textStatus, errorThrown) => {
                log("获取阿里图标数据信息失败：", textStatus, errorThrown);
            }
        })


        log("Vue初始化开始")
        app.use(ElementPlus, {locale: ElementPlusLocaleZhCn})
            .use(myRouter)
            .component("IconMenu", ElementPlusIconsVue.Menu)
            .component("MyTimeline", MyTimeline)
            .component("MyTimelineItem", MyTimelineItem)
            .mixin({  //图标变量全局混入注册
                data() {

                    let result = {
                        IconMenu: Vue.shallowRef(ElementPlusIconsVue.Menu),
                        elementPlusIconsVue: {},
                        loadingContent: '耐心等待...',
                    }

                    //ElementUi官方的图标组件注册
                    _.keys(ElementPlusIconsVue).forEach(propertyName => {
                        // log("elementUiPlus图标：", ElementPlusIconsVue[propertyName])
                        result[propertyName] = Vue.shallowRef(ElementPlusIconsVue[propertyName])
                        result.elementPlusIconsVue[propertyName] = Vue.shallowRef(ElementPlusIconsVue[propertyName])
                    })

                    //第三方-阿里巴巴图标库的组件
                    //注意：注入给Vue的变量名、组件名不可含有横杠名
                    if(alibabaIconInfo) {
                        alibabaIconInfo.glyphs.forEach((item,index) => {
                            let iconClass = 'icon-' + item['font_class'];
                            let componentNmae = toCamelCase(iconClass, '-', true)
                            let alibabaIconComponent = createAlibabaIconComponent(iconClass);
                            result[componentNmae] = alibabaIconComponent
                            log("阿里图标注册成Vue组件：", componentNmae, alibabaIconComponent);
                        })
                    }


                    return result;
                },
            })
            .mount('#vueApp');
        log("Vue初始化完毕")
    };


</script>

</html>

在这里插入图片描述

6. 开始使用

// 前端测试页面
var TestPage = {
    template: `
        <div class="testPage">
            <el-card class="box-card">
                <el-button type="primary">按钮</el-button>
                
                <hr/>
                
                <!-- 方式1：阿里图标不支持,仅Elementui自带的图标才行 == 需要将组件变成data内部变量才可使用，对应着上面的【混入】 -->
                <el-button type="primary" :icon="Edit" />
                <el-button type="primary" icon="IconUserplusFill" round >{{test}}</el-button>
                <el-button type="primary" :icon="IconAiTool" round >{{IconAiTool}}</el-button>
                
                <hr/>
                
                <!-- 方式2：直接引入对应图标的阿里图标样式即可 -->
                <el-button type="primary" class="iconfont icon-wodexuexi" round />
                <el-button type="primary" class="iconfont icon-ai-tool" circle  />
                <el-button type="success" class="iconfont icon-userplus-fill"  />
                <el-button type="primary" class="iconfont icon-plus" />
                <el-button type="primary" class="iconfont icon-13" />
                
                <hr/>
                
                <!-- 方式3：直接使用按钮的图标插槽 - 不过不能控制图标在左还是右边, 所以图标在文字左边 -->
                <el-button type="primary" >
                    命名插槽图标
                    <template #icon>
                        <span class="iconfont icon-13"></span>
                    </template>
                </el-button>
                
                <hr/>
                
                <!--  需要将阿里巴巴图标注册成组件才可使用，对应着第五步骤的阿里巴巴组件注册 -->
                <!-- 方式4 使用el-icon的组件然后修改其Class样式为阿里图标即可,比较灵活可通过el-icon--right el-icon--left控制图标的位置 [强烈建议使用这种】 -->
                <el-button type="primary">
                    Upload<el-icon class="el-icon--right iconfont icon-plus"></el-icon>
                </el-button>
                <el-button type="primary">
                    Upload<el-icon class="el-icon--right"><IconPlus /></el-icon>
                </el-button>
                <el-button type="primary">
                    Upload<el-icon class="el-icon--right"><Upload /></el-icon>
                </el-button>
            </el-card>
        </div>
    `,
    data() {
        return {
            test: '测试数据'
        }
    },

    methods: {

    },

    mounted: async function () {
        $("title").text("前端测试页面-个人在线工具")
    }
}