【集成】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,
                    },
                },
            }),