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

news/2024/7/10 3:22:07 标签: 前端, javascript, ElementPlus, Vue, 阿里图标

文章目录

        • 1. 下载阿里图标
        • 2. 将下载的文件压缩放入到项目中
        • 3. 直接本地打开压缩文件里面的使用Demo - demo_index.html
        • 4. 根据上面的Demo提示，页面需引入文件里面的iconfont.css中
        • 5. 将阿里巴巴组件注册成组件进行使用（当然如果你并不需要可以直接忽略这步）
        • 6. 开始使用

 

1. 下载阿里图标

在这里插入图片描述

 

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

在这里插入图片描述

 

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

在这里插入图片描述

 

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

在这里插入图片描述

 

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

javascript">/**
 * 组件生成
 */
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>javascript">

    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("前端测试页面-个人在线工具")
    }
}

在这里插入图片描述


http://www.niftyadmin.cn/n/1657534.html

相关文章

基于景观生态的土地价值评价

基于景观生态的土地价值评价

通常提到了土地价值评价&#xff0c;主要是综合的考虑的经济社会环境等属性&#xff0c;例如通达度等&#xff0c;这是通常意义上的土地定价土地估价&#xff0c;这方面的内容比较庞杂&#xff0c;而我这里所谈的是基于景观生态的土地价值评价&#xff0c;多考虑景观生态方面的…
阅读更多...
c语言 usb管控 代码_传统的嵌入式C语言程序员快要灭绝了？

c语言 usb管控 代码_传统的嵌入式C语言程序员快要灭绝了？

有源元件和无源元件的区别超详细的元器件分类大全—电阻、电容、电感(点击上方红字&#xff0c;即可获取)在2000年前后&#xff0c;嵌入式软件工程师有着一套非常具体的技能&#xff0c;他们通常是电气工程师&#xff0c;不仅了解底层硬件的工作原理&#xff0c;还可以在底层编…
阅读更多...
Java工具封装 - 快速获取数据库表结构

Java工具封装 - 快速获取数据库表结构

文章目录hutool - 仅能精确匹配找单表&#xff08;找多表自行增强Hutool代码&#xff09;MyBatisPlus - 支持正则匹配模糊查询多表Data Builder NoArgsConstructor AllArgsConstructor ApiModel(description "数据库查询类") public class DbQO {private final Stri…
阅读更多...
sql分组求和

sql分组求和

需求是&#xff1a;一个月有多个发布額&#xff0c;现在要求按月统计发布額&#xff0c;例如&#xff1a;1月发布額--35900,2月发布額--2300 sql 语句如下: --按月分组&#xff0c;求和 select dMonth,CodeName,sum(iAmount) from ( --求出全部日期&#xff0c;发布額 SELECT …
阅读更多...
js取thymeleaf值_Js和Thymeleaf如何获取model中的值

js取thymeleaf值_Js和Thymeleaf如何获取model中的值

简述在大多数的项目架构中&#xff0c;使用SPringBoot发布微服务&#xff0c;前端采用Thymeleaf作为Html模版&#xff0c;使用Jquery作为动态脚本&#xff0c;那么Thymeleaf和Jquery是如何获取Model中的数据呢&#xff1f;Jquery获取Model中的数据方法1&#xff1a;将model中的…
阅读更多...
webservice 暴漏接口_Java基于spring暴露接口供外部调用

webservice 暴漏接口_Java基于spring暴露接口供外部调用

在springmvc的配置文件添加创建如下的bean:创建一个接口和实现类package com.nbesoft.company.service;public interface ReceiveDataService {public String exporeInterfaceService(String data);}package com.nbesoft.company.service.impl;import javax.jws.WebMethod;impo…
阅读更多...
Imagemagick图片尺寸转换(转)

Imagemagick图片尺寸转换(转)

Convert的resize子命令应该是在ImageMagick中使用较多的命令&#xff0c;它实现了图片任意大小的缩放&#xff0c;唯一需要掌握的就是如何使用它的一些参数测试设定值&#xff1a; 此说明文件中所用的原始文件(src.jpg)&#xff0c;宽度&#xff1a;200&#xff0c;高度&#x…
阅读更多...
putty如何连接xlaunch_用Xming替代Xmanager，在windows下图形化登陆linux

putty如何连接xlaunch_用Xming替代Xmanager，在windows下图形化登陆linux

当我们想在windows下图形化登陆linux的时候&#xff0c;我们可以在linux下配置VNC服务&#xff0c;但这样有点儿麻烦。一些商业软件&#xff0c;比如Xmanager就可以利用SSH协议&#xff0c;来图形化登陆linux。不过Xmanager是商业软件&#xff0c;现在我们使用一款开源的替代产…
阅读更多...
最新文章

Copyright @ 2022~2023