首次提交

2023-06-04 20:01:58 +08:00
parent 00c64c53bb
commit 587f078d21
560 changed files with 106725 additions and 0 deletions
--- a/chengduTestPlant/src/components/ma-icon/index.vue
+++ b/chengduTestPlant/src/components/ma-icon/index.vue
@@ -0,0 +1,126 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <div class="w-full">
+        <a-input-group class="w-full">
+            <a-input placeholder="请点击右侧按钮选择图标" allow-clear v-model="currentIcon" />
+            <div class="icon-container" v-if="props.preview">
+                <component :is="currentIcon" v-if="currentIcon" />
+            </div>
+            <a-button type="primary" @click="() => (visible = true)">选择图标</a-button>
+        </a-input-group>
+
+        <a-modal v-model:visible="visible" width="800px" draggable :footer="false">
+            <template #title>选择图标</template>
+            <a-tabs class="tabs">
+                <a-tab-pane key="arco" title="Arco Design">
+                    <ul class="arco">
+                        <li v-for="icon in arcodesignIcons" :key="icon" @click="selectIcon(icon, 'arco')">
+                            <component :is="icon" />
+                        </li>
+                    </ul>
+                </a-tab-pane>
+                <a-tab-pane key="mine" title="MineAdmin">
+                    <ul class="mine">
+                        <li v-for="icon in mineadminIcons" :key="icon" @click="selectIcon(icon, 'mine')">
+                            <component :is="icon" />
+                        </li>
+                    </ul>
+                </a-tab-pane>
+            </a-tabs>
+        </a-modal>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted } from "vue"
+import * as arcoIcons from "@arco-design/web-vue/es/icon"
+
+const mineadminIcons = reactive([])
+const arcodesignIcons = reactive([])
+const visible = ref(false)
+const currentIcon = ref()
+
+const props = defineProps({
+    modelValue: { type: String },
+    preview: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+onMounted(() => (currentIcon.value = props.modelValue))
+
+for (let icon in arcoIcons) {
+    arcodesignIcons.push(icon)
+}
+
+arcodesignIcons.pop()
+
+const modules = import.meta.globEager("../../assets/ma-icons/*.vue")
+for (const path in modules) {
+    const name = path.match(/([A-Za-z0-9_-]+)/g)[2]
+    mineadminIcons.push(`MaIcon${name}`)
+}
+
+const selectIcon = (icon, className) => {
+    currentIcon.value = icon
+    emit("update:modelValue", currentIcon.value)
+    visible.value = false
+}
+
+const handlerChange = (value) => {
+    selectIcon(value, "")
+}
+</script>
+
+<style scoped lang="less">
+.icon-container {
+    width: 50px;
+    height: 32px;
+    background-color: var(--color-fill-1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.icon {
+    width: 1em;
+    fill: var(--color-text-1);
+}
+
+.tabs {
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        padding-left: 7px;
+    }
+
+    li {
+        border: 2px solid var(--color-fill-4);
+        margin-bottom: 10px;
+        margin-right: 6px;
+        padding: 5px;
+        cursor: pointer;
+    }
+
+    li:hover,
+    li.active {
+        border: 2px solid rgb(var(--primary-6));
+    }
+
+    & li svg {
+        width: 2.4em;
+        height: 2.4em;
+    }
+}
+:deep(.arco-select-option-content) {
+    width: 100%;
+}
+</style>