【集成】iconfont：需要手动更改 .env文件中的APP_ICON_URL

1 year ago · f567f46a94
6 changed files with 77 additions and 2 deletions
--- a/.env
+++ b/.env
@ -1,3 +1,4 @@
 APP_TITLE=云端无人机管理系统
 APP_ICON_URL=//at.alicdn.com/t/c/font_4349903_2p0gyrtbo2.js
 APP_DEVELOPMENT_BASE_URL=/api
 APP_PRODUCTION_BASE_URL=/
--- a/index.html
+++ b/index.html
@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <html lang="en" theme-mode="dark">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%- title %></title>
    <script src="<%- iconUrl %>"></script>
  </head>
  <body>
    <div id="app"></div>
--- a/src/components/FontIcon.vue
+++ b/src/components/FontIcon.vue
@ -0,0 +1,22 @@
 <script setup>
    import { computed } from 'vue';
    const props = defineProps({
        name: {
            type: String,
            required: true,
        },
        size: String,
    });
    const className = computed(() => {
        const { [props.size]: cn } = { small: 't-size-s', medium: 't-size-m', large: 't-size-l' };
        return cn;
    });
 </script>
 <template>
    <svg :class="['t-icon', className, name]" :style="!className ? `font-size: ${size}` : ''">
        <use :href="`#${name}`" />
    </svg>
 </template>
--- a/src/main.js
+++ b/src/main.js
@ -2,6 +2,7 @@ import app from '@/app';
 import store from '@/stores';
 import router from '@/router';
 import TDesignVue from '@/plugins/TDesign-vue'; // TDesign按需引入
 import '@/plugins/components';
 import '@/styles/common.less'; // 自定义全局样式表
 app.use(store);
--- a/src/plugins/components.js
+++ b/src/plugins/components.js
@ -0,0 +1,49 @@
 import { h } from 'vue';
 import app from '@/app';
 import FontIcon from '@/components/FontIcon.vue';
 app.component('FontIcon', FontIcon);
 // 给数值加单位（可给单位套上html标签）
 // 如：<ValueUnit unit="亩">100.00</ValueUnit>（结果为：100.00亩）
 // 如：<ValueUnit unit="亩" tag="em">100.00</ValueUnit>（结果为：100.00<em>亩</em>）
 app.component('ValueUnit', {
    props: {
        unit: {
            type: String,
            required: true,
        },
        tag: {
            type: String,
            default: '',
        },
        falsy: {
            type: String,
            default: '-',
        },
    },
    render(self) {
        const [{ children }] = self?.$slots?.default() || [];
        const { unit, tag, falsy } = self?.$props || {};
        return (children || children === 0 ? [children, tag ? h(tag, unit) : unit] : falsy);
    },
 });
 /**
 * 数据分配器
 * 将载荷数据payload，通过scopedSlot分配给子节点使用
 * 示例1：<DataDispatcher :payload="true" v-slot="isShow">{{ isShow }}</DataDispatcher>
 * 示例2：<DataDispatcher :payload="[1, 2]" v-slot="[a, b]">{{ a }}{{ b }}</DataDispatcher>
 * 示例3：<DataDispatcher :payload="{ a: 1, b: 2 }" v-slot="{ a: A, b: B }">{{ A }}{{ B }}</DataDispatcher>
 */
 app.component('DataDispatcher', {
    props: {
        payload: {
            type: [Boolean, Number, String, Array, Object],
            required: true,
        },
    },
    render(self) {
        return self?.$slots?.default(self.payload);
    },
 });
--- a/vite.config.js
+++ b/vite.config.js
@ -9,7 +9,7 @@ import { createHtmlPlugin } from 'vite-plugin-html'; // vite编译html
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
    // 获取APP开头的 环境变量
    const { APP_TITLE } = loadEnv(mode, process.cwd(), 'APP');
    const { APP_TITLE, APP_ICON_URL } = loadEnv(mode, process.cwd(), 'APP');
    return {
        plugins: [
@ -23,6 +23,7 @@ export default defineConfig(({ mode }) => {
                    data: {
                        // 将环境变量 APP_TITLE 赋值给 title 方便 html页面使用 title 获取系统标题
                        title: APP_TITLE,
                        iconUrl: APP_ICON_URL,
                    },
                },
            }),