vue积木库

Web/Vue/CubeLib/src/components/CubeButton.vue

@@ -0,0 +1,100 @@
+<template>
+  <button class="cube-button" @click="handleClick">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'default'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+function handleClick() {
+  if (!props.disabled && !props.loading) {
+    emit('click')
+  }
+}
+</script>
+
+<style scoped>
+.cube-button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.cube-button.default {
+  background-color: #409EFF;
+  color: #fff;
+}
+
+.cube-button.primary {
+  background-color: #67C23A;
+  color: #fff;
+}
+
+.cube-button.danger {
+  background-color: #F56C6C;
+  color: #fff;
+}
+
+.cube-button.warning {
+  background-color: #E6A23C;
+  color: #fff;
+}
+
+.cube-button.info {
+  background-color: #909399;
+  color: #fff;
+}
+
+.cube-button:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.cube-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.cube-button.loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.cube-button.loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  margin-top: -7px;
+  margin-left: -7px;
+  border: 2px solid transparent;
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>