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