jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): 增加Icon选择器组件

Browse Source
This commit is contained in:
Yanbowen
2021-12-18 16:34:25 +08:00
parent f3c86efbe5
commit 9472b51811
4 changed files with 121 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/plugin/icon/icons.ts Normal file
View File

@ -0,0 +1,32 @@
export const icons = [
'mdi:emoticon',
'mdi:ab-testing',
'ph:alarm',
'ph:android-logo',
'ph:align-bottom',
'ph:archive-box-light',
'uil:basketball',
'uil:brightness-plus',
'uil:capture',
'mdi:apps-box',
'mdi:alert',
'mdi:airballoon',
'mdi:airplane-edit',
'mdi:alpha-f-box-outline',
'mdi:arm-flex-outline',
'ic:baseline-10mp',
'ic:baseline-access-time',
'ic:baseline-brightness-4',
'ic:baseline-brightness-5',
'ic:baseline-credit-card',
'ic:baseline-filter-1',
'ic:baseline-filter-2',
'ic:baseline-filter-3',
'ic:baseline-filter-4',
'ic:baseline-filter-5',
'ic:baseline-filter-6',
'ic:baseline-filter-7',
'ic:baseline-filter-8',
'ic:baseline-filter-9',
'ic:baseline-filter-9-plus'
];

26
src/views/plugin/icon/index.vue
View File

@ -1,11 +1,17 @@
<template>
<div>
<n-card title="Icon组件示例" class="shadow-sm rounded-16px">
<div class="flex justify-around">
<div class="grid grid-cols-10">
<template v-for="item in icons" :key="item">
<Icon :icon="item" class="text-30px" />
<div class="mt-5px flex-x-center">
<Icon :icon="item" class="text-30px" />
</div>
</template>
</div>
<div class="mt-50px">
<h1 class="mb-20px text-18px font-500">Icon图标选择器</h1>
<icon-select v-model:value="selectVal" :icons="icons" />
</div>
<template #footer>
<web-site-link label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
</template>
@ -14,20 +20,12 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { NCard } from 'naive-ui';
import { Icon } from '@iconify/vue';
import { WebSiteLink } from '@/components';
import { IconSelect, WebSiteLink } from '@/components';
import { icons } from './icons';
const icons = [
'mdi:emoticon',
'mdi:ab-testing',
'ph:alarm',
'ph:android-logo',
'ph:align-bottom',
'ph:archive-box-light',
'uil:basketball',
'uil:brightness-plus',
'uil:capture'
];
const selectVal = ref('');
</script>
<style scoped></style>