修复编译错误
This commit is contained in:
@@ -37,12 +37,11 @@ app.mount('#app')
|
||||
### 按需导入
|
||||
|
||||
```javascript
|
||||
import { CubeButton, CubeSplitter } from 'joyd.web.vue.cubelib'
|
||||
import { CubeSplitter } from 'joyd.web.vue.cubelib'
|
||||
|
||||
// 在组件中使用
|
||||
export default {
|
||||
components: {
|
||||
CubeButton,
|
||||
CubeSplitter
|
||||
}
|
||||
}
|
||||
@@ -50,20 +49,6 @@ export default {
|
||||
|
||||
## 组件文档
|
||||
|
||||
### CubeButton
|
||||
|
||||
按钮组件,提供基本的按钮样式和交互功能。
|
||||
|
||||
#### Props
|
||||
|
||||
- `variant`: 按钮变体,可选值:`primary`, `secondary`, `outline`, `ghost`
|
||||
- `size`: 按钮尺寸,可选值:`sm`, `md`, `lg`
|
||||
- `disabled`: 是否禁用按钮
|
||||
|
||||
#### Events
|
||||
|
||||
- `click`: 点击按钮时触发
|
||||
|
||||
### CubeSplitter
|
||||
|
||||
可调整大小的分隔条组件,用于在布局中创建可调整大小的面板。
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "joyd.web.vue.cubelib",
|
||||
"version": "1.0.0",
|
||||
"description": "JoyD Vue3 CubeLib 组件库",
|
||||
"description": "Vue3 CubeLib 组件库",
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
"files": [
|
||||
@@ -22,9 +22,9 @@
|
||||
"registry": "http://47.111.181.23:8081/repository/npm-releases/"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "vue-demi-vite build",
|
||||
"dev": "vue-demi-vite dev",
|
||||
"serve": "vue-demi-vite preview",
|
||||
"build": "vite build",
|
||||
"dev": "vite dev",
|
||||
"serve": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||
"test": "vitest run",
|
||||
"test:ui": "vitest ui"
|
||||
@@ -37,7 +37,6 @@
|
||||
"vite": "^5.4.8",
|
||||
"vue": "^3.4.29",
|
||||
"vue-demi": "^0.14.6",
|
||||
"vue-demi-vite": "^0.2.0",
|
||||
"vitest": "^2.1.5"
|
||||
}
|
||||
}
|
||||
@@ -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 }
|
||||
@@ -15,7 +15,8 @@ export default defineConfig({
|
||||
output: {
|
||||
globals: {
|
||||
vue: 'Vue'
|
||||
}
|
||||
},
|
||||
exports: 'named'
|
||||
}
|
||||
},
|
||||
outDir: 'dist'
|
||||
|
||||
Reference in New Issue
Block a user