1、下载安装指令

npm install mj-matching-icon --save  

2、功能介绍

根据后缀名渲染对应图标，如果没有则渲染默认图标。

3、使用方式

CDN引入

<script src="./node_modules/mj-matching-icon/index.js"></script>

<script>
    let originData = {
            // 图片的引入方式为require('@/image/txt.jpg')最佳
            // 注意: 要把默认图标放在对象的最前面
            defaultIcon: "../image/defaultIcon.png",
            txt: "../image/text.png",
            mp3: "../image/mp3.png",
            mp4: "../image/mp4.png",
            GIF: "../image/gif.png",
            jpg: "../image/jpg.png",
            png: "../image/png.png",
            docx: "../image/docx.png",
        },
            // letoriginData: 匹配的数据对象
            a = matchingIcons.matchingIcon(letoriginData);

    console.log(a());
    // ../image/defaultIcon.png
    console.log(a(1));
    // ../image/defaultIcon.png
    console.log(a("3"));
    // ../image/defaultIcon.png
    console.log(a("-"));
    // ../image/defaultIcon.png
    console.log(a(""));
    // ../image/defaultIcon.png
    console.log(a("http://youdao.GIF."));
    // ../image/defaultIcon.png
    console.log(a("http://youdao.GIF.k"));
    // ../image/defaultIcon.png
    console.log(a("mp3"));
    // ../image/mp3.png
    console.log(a("MP4"));
    // ../image/mp4.png
    console.log(a("http://youdao.GIF.png"));
    // ../image/png.png
    console.log(a("http://youdao.GIF"));
    // ../image/gif.png
    console.log(a("http://Word.docx"));
    // ../image/docx.png
    console.log(a("DOCX"));
    // ../image/docx.png
</script>

vue引入

import { matchingIcon } from "mj-matching-icon";
// let { matchingIcon } = require("mj-matching-icon");

export default {
    mounted() {
        let fileSuffixName = matchingIcon(letoriginData);
        
        // 用法与CDN一致
        console.log(fileSuffixName('https://www.baidu.png'));
        // ../image/png.png
    },

    methods: {},
};