修复编译错误
This commit is contained in:
@@ -1,100 +0,0 @@
|
||||
<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>
|
||||
@@ -1,13 +1,10 @@
|
||||
import { App, defineComponent } from 'vue'
|
||||
import CubeButton from './components/CubeButton.vue'
|
||||
import CubeSplitter from './components/CubeSplitter.vue'
|
||||
|
||||
const components = {
|
||||
CubeButton,
|
||||
CubeSplitter
|
||||
}
|
||||
|
||||
const install = (app: App) => {
|
||||
const install = (app: any) => {
|
||||
Object.entries(components).forEach(([name, component]) => {
|
||||
app.component(name, component)
|
||||
})
|
||||
@@ -19,4 +16,4 @@ const CubeLib = {
|
||||
}
|
||||
|
||||
export default CubeLib
|
||||
export { CubeButton, CubeSplitter }
|
||||
export { CubeSplitter }
|
||||
Reference in New Issue
Block a user