style: update icon size

This commit is contained in:
JaguarJack 2023-02-20 14:41:26 +08:00
parent 9370236816
commit 306e11fb7a
9 changed files with 24 additions and 19 deletions

View File

@ -11,7 +11,7 @@
<Operate :show="open"> <Operate :show="open">
<template v-slot:operate> <template v-slot:operate>
<!-- header 插槽的内容放这里 --> <!-- header 插槽的内容放这里 -->
<el-button type="success" class="float-right" @click="installVisible = true"><Icon name="cog-6-tooth" class="mr-1 w-4" /> 安装</el-button> <el-button type="success" class="float-right" @click="installVisible = true"><Icon name="cog-6-tooth" class="mr-1 w-4 h-4" /> 安装</el-button>
</template> </template>
</Operate> </Operate>
<el-table :data="tableData" class="mt-3" v-loading="loading"> <el-table :data="tableData" class="mt-3" v-loading="loading">

View File

@ -22,7 +22,7 @@
<template #reference> <template #reference>
<el-tag class="cursor-pointer w-8" v-if="scope.row.type === MenuType.PAGE_TYPE"> <el-tag class="cursor-pointer w-8" v-if="scope.row.type === MenuType.PAGE_TYPE">
<Icon name="cog-6-tooth" class="animate-spin w-5 h-5" v-if="actionLoading" /> <Icon name="cog-6-tooth" class="animate-spin w-5 h-5" v-if="actionLoading" />
<Icon name="plus" class="w-4 h-4" v-else /> <Icon name="plus" className="w-4 h-4" v-else />
</el-tag> </el-tag>
</template> </template>
</el-popconfirm> </el-popconfirm>

View File

@ -1,5 +1,5 @@
<template> <template>
<el-button type="primary" :size="size"><Icon name="plus" class="w-4 mr-1" /> {{ text }}</el-button> <el-button type="primary" :size="size"><Icon name="plus" className="w-4 h-4 mr-1" /> {{ text }}</el-button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -1,5 +1,5 @@
<template> <template>
<el-button type="danger" :size="size"><Icon name="trash" class="w-4 mr-1" /> {{ text }}</el-button> <el-button type="danger" :size="size"><Icon name="trash" className="w-4 h-4 mr-1" /> {{ text }}</el-button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -1,5 +1,5 @@
<template> <template>
<el-button type="primary" :size="size"><Icon name="eye" class="w-4 mr-1" /> {{ text }}</el-button> <el-button type="primary" :size="size"><Icon name="eye" className="w-4 h-4 mr-1" /> {{ text }}</el-button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -1,5 +1,5 @@
<template> <template>
<el-button type="success" :size="size"><Icon name="pencil-square" class="w-4 mr-1" /> {{ text }}</el-button> <el-button type="success" :size="size"><Icon name="pencil-square" className="w-4 h-4 mr-1" /> {{ text }}</el-button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -4,11 +4,11 @@
<slot name="body" /> <slot name="body" />
<el-form-item> <el-form-item>
<el-button type="primary" @click="search()"> <el-button type="primary" @click="search()">
<Icon name="magnifying-glass" class="w-4 mr-1 -ml-1" /> <Icon name="magnifying-glass" className="w-4 h-4 mr-1 -ml-1" />
搜索 搜索
</el-button> </el-button>
<el-button @click="reset()"> <el-button @click="reset()">
<Icon name="arrow-path" class="w-4 mr-1 -ml-1" /> <Icon name="arrow-path" className="w-4 h-4 mr-1 -ml-1" />
重置 重置
</el-button> </el-button>
</el-form-item> </el-form-item>

View File

@ -1,5 +1,5 @@
<template> <template>
<component :is="icon" class="w-5 h-5" /> <component :is="icon" :class="className" />
</template> </template>
<script setup> <script setup>
@ -7,17 +7,22 @@ import { computed } from 'vue'
import * as heroIcons from '@heroicons/vue/24/outline' import * as heroIcons from '@heroicons/vue/24/outline'
const props = defineProps({ const props = defineProps({
name: { name: {
type: String, type: String,
required: true, required: true,
}, },
className: {
type: String,
required: true,
default: "w-5 h-5"
}
}) })
const icon = computed(() => { const icon = computed(() => {
let name = '' let name = ''
props.name.split('-').forEach(v => { props.name.split('-').forEach(v => {
name += v[0].toUpperCase() + v.substr(1) name += v[0].toUpperCase() + v.substr(1)
}) })
return heroIcons[name + 'Icon'] return heroIcons[name + 'Icon']
}) })
</script> </script>

View File

@ -11,7 +11,7 @@
<Icon name="user"/> <router-link to="/users/center"> 个人信息</router-link> <Icon name="user"/> <router-link to="/users/center"> 个人信息</router-link>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided @click="logout"> <el-dropdown-item divided @click="logout">
<Icon name="power" class="mr-1 w-4 h-4" /> <Icon className="power" class="mr-1 w-4 h-4" />
退 退
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>