From f567f46a94eb98e02030eaf1113c69a64d158728 Mon Sep 17 00:00:00 2001 From: xiaosi <2652281683@qq.com> Date: Tue, 28 Nov 2023 17:30:31 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E9=9B=86=E6=88=90=E3=80=91iconfont?= =?UTF-8?q?=EF=BC=9A=E9=9C=80=E8=A6=81=E6=89=8B=E5=8A=A8=E6=9B=B4=E6=94=B9?= =?UTF-8?q?=20.env=E6=96=87=E4=BB=B6=E4=B8=AD=E7=9A=84APP=5FICON=5FURL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 + index.html | 3 ++- src/components/FontIcon.vue | 22 +++++++++++++++++ src/main.js | 1 + src/plugins/components.js | 49 +++++++++++++++++++++++++++++++++++++ vite.config.js | 3 ++- 6 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 src/components/FontIcon.vue create mode 100644 src/plugins/components.js diff --git a/.env b/.env index e2a85a2..29f5a8f 100644 --- 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=/ diff --git a/index.html b/index.html index 1230ea0..0c30a60 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,11 @@ - + <%- title %> +
diff --git a/src/components/FontIcon.vue b/src/components/FontIcon.vue new file mode 100644 index 0000000..6cf8918 --- /dev/null +++ b/src/components/FontIcon.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/main.js b/src/main.js index d52bb28..8fb3253 100644 --- 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); diff --git a/src/plugins/components.js b/src/plugins/components.js new file mode 100644 index 0000000..6165fa5 --- /dev/null +++ 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标签） +// 如：100.00（结果为：100.00亩） +// 如：100.00（结果为：100.00亩） +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：{{ isShow }} + * 示例2：{{ a }}{{ b }} + * 示例3：{{ A }}{{ B }} + */ +app.component('DataDispatcher', { + props: { + payload: { + type: [Boolean, Number, String, Array, Object], + required: true, + }, + }, + render(self) { + return self?.$slots?.default(self.payload); + }, +}); diff --git a/vite.config.js b/vite.config.js index ef7d2d9..d20cd03 100644 --- 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, }, }, }),