Переглянути джерело

feat: 添加iconButton组件

jiaxing.liao 1 тиждень тому
батько
коміт
2e03b26471

+ 41 - 0
packages/ui/components/icon-button/IconButton.vue

@@ -0,0 +1,41 @@
+<template>
+	<ElButton :type="type" :loading="loading" :disabled="disabled" :size="size" :class="{ square }">
+		<Icon :name="icon" :color="iconColor"></Icon>
+	</ElButton>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from 'element-plus'
+import Icon from '../icon/Icon.vue'
+
+withDefaults(
+	defineOptions<{
+		icon: string
+		iconColor?: string
+		size?: 'small' | 'medium' | 'large'
+		loading?: boolean
+		type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
+		disabled?: boolean
+		square?: boolean
+	}>(),
+	{
+		size: 'medium',
+		type: 'default',
+		loading: false
+	}
+)
+</script>
+
+<style lang="less" scoped>
+.square {
+	.el-button {
+		padding: 8px;
+		&--large {
+			padding: 12px;
+		}
+		&--small {
+			padding: 5px;
+		}
+	}
+}
+</style>

packages/ui/components/Icon.vue → packages/ui/components/icon/Icon.vue


+ 3 - 2
packages/ui/index.ts

@@ -1,3 +1,4 @@
-import Icon from './components/Icon.vue'
+import Icon from './components/icon/Icon.vue'
+import IconButton from './components/icon-button/IconButton.vue'
 
-export { Icon }
+export { Icon, IconButton }