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">
<template v-slot:operate>
<!-- 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>
</Operate>
<el-table :data="tableData" class="mt-3" v-loading="loading">

View File

@ -22,7 +22,7 @@
<template #reference>
<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="plus" class="w-4 h-4" v-else />
<Icon name="plus" className="w-4 h-4" v-else />
</el-tag>
</template>
</el-popconfirm>

View File

@ -1,5 +1,5 @@
<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>
<script lang="ts" setup>

View File

@ -1,5 +1,5 @@
<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>
<script lang="ts" setup>

View File

@ -1,5 +1,5 @@
<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>
<script lang="ts" setup>

View File

@ -1,5 +1,5 @@
<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>
<script lang="ts" setup>

View File

@ -4,11 +4,11 @@
<slot name="body" />
<el-form-item>
<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 @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-form-item>

View File

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

View File

@ -11,7 +11,7 @@
<Icon name="user"/> <router-link to="/users/center"> 个人信息</router-link>
</el-dropdown-item>
<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-menu>