@xn-lib/component 0.0.14 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -61
- package/dist/index.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,45 +1,81 @@
|
|
|
1
1
|
# @xn-lib/component
|
|
2
2
|
|
|
3
|
-
Vue 3
|
|
3
|
+
基于 Element Plus 的 Vue 3 企业级组件库，提供完整的 TypeScript 类型支持。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@xn-lib/component)
|
|
6
|
+
[](https://github.com/zjwmmx/mmx-ui/blob/master/LICENSE)
|
|
7
|
+
|
|
8
|
+
## ✨ 特性
|
|
9
|
+
|
|
10
|
+
- 🎯 **TypeScript 支持** - 完整的类型定义，自动生成类型声明
|
|
11
|
+
- 🧩 **企业级组件** - 基于 Element Plus 二次封装
|
|
12
|
+
- ⚡️ **Vue 3 + Vite** - 现代化开发体验
|
|
13
|
+
- 📦 **按需引入** - 支持全量和按需引入
|
|
14
|
+
- 🎨 **主题定制** - 基于 Element Plus 主题系统
|
|
15
|
+
|
|
16
|
+
## 📦 安装
|
|
6
17
|
|
|
7
18
|
```bash
|
|
8
|
-
npm
|
|
9
|
-
|
|
10
|
-
|
|
19
|
+
# npm
|
|
20
|
+
npm install @xn-lib/component element-plus
|
|
21
|
+
|
|
22
|
+
# pnpm
|
|
23
|
+
pnpm add @xn-lib/component element-plus
|
|
24
|
+
|
|
25
|
+
# yarn
|
|
26
|
+
yarn add @xn-lib/component element-plus
|
|
11
27
|
```
|
|
12
28
|
|
|
13
|
-
## 使用
|
|
29
|
+
## 🔨 使用
|
|
14
30
|
|
|
15
|
-
###
|
|
31
|
+
### 完整引入
|
|
16
32
|
|
|
17
33
|
```typescript
|
|
18
34
|
import { createApp } from 'vue'
|
|
35
|
+
import ElementPlus from 'element-plus'
|
|
36
|
+
import 'element-plus/dist/index.css'
|
|
19
37
|
import XnComponents from '@xn-lib/component'
|
|
20
38
|
import '@xn-lib/component/dist/index.css'
|
|
21
39
|
|
|
22
40
|
const app = createApp(App)
|
|
41
|
+
app.use(ElementPlus)
|
|
23
42
|
app.use(XnComponents)
|
|
24
43
|
app.mount('#app')
|
|
25
44
|
```
|
|
26
45
|
|
|
27
46
|
### 按需引入
|
|
28
47
|
|
|
29
|
-
```
|
|
30
|
-
|
|
48
|
+
```vue
|
|
49
|
+
<template>
|
|
50
|
+
<xn-cascader
|
|
51
|
+
v-model="value"
|
|
52
|
+
:options="options"
|
|
53
|
+
placeholder="请选择"
|
|
54
|
+
/>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<script setup lang="ts">
|
|
58
|
+
import { ref } from 'vue'
|
|
59
|
+
import { Cascader as XnCascader } from '@xn-lib/component'
|
|
31
60
|
import '@xn-lib/component/dist/index.css'
|
|
61
|
+
import type { CascaderOption } from '@xn-lib/component'
|
|
32
62
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
63
|
+
const value = ref(null)
|
|
64
|
+
const options = ref<CascaderOption[]>([
|
|
65
|
+
{
|
|
66
|
+
label: '选项1',
|
|
67
|
+
value: '1',
|
|
68
|
+
children: [
|
|
69
|
+
{ label: '子选项1-1', value: '1-1' }
|
|
70
|
+
]
|
|
36
71
|
}
|
|
37
|
-
|
|
72
|
+
])
|
|
73
|
+
</script>
|
|
38
74
|
```
|
|
39
75
|
|
|
40
|
-
|
|
76
|
+
## 📝 TypeScript 支持
|
|
41
77
|
|
|
42
|
-
|
|
78
|
+
组件库使用 `vue-tsc` 自动生成类型声明，提供完整的类型支持：
|
|
43
79
|
|
|
44
80
|
- ✅ 组件标签自动提示
|
|
45
81
|
- ✅ Props 属性自动提示
|
|
@@ -48,17 +84,21 @@ export default {
|
|
|
48
84
|
- ✅ 实例方法类型提示
|
|
49
85
|
|
|
50
86
|
```typescript
|
|
51
|
-
import
|
|
52
|
-
|
|
53
|
-
|
|
87
|
+
import type {
|
|
88
|
+
CascaderProps,
|
|
89
|
+
CascaderOption,
|
|
90
|
+
CascaderValue,
|
|
91
|
+
CascaderInst
|
|
92
|
+
} from '@xn-lib/component'
|
|
93
|
+
|
|
94
|
+
// Props 类型
|
|
54
95
|
const props: CascaderProps = {
|
|
55
96
|
modelValue: null,
|
|
56
97
|
options: [],
|
|
57
|
-
multiple: false
|
|
58
|
-
size: 'default'
|
|
98
|
+
multiple: false
|
|
59
99
|
}
|
|
60
100
|
|
|
61
|
-
// Option
|
|
101
|
+
// Option 类型
|
|
62
102
|
const options: CascaderOption[] = [
|
|
63
103
|
{
|
|
64
104
|
label: '选项1',
|
|
@@ -66,55 +106,31 @@ const options: CascaderOption[] = [
|
|
|
66
106
|
children: []
|
|
67
107
|
}
|
|
68
108
|
]
|
|
109
|
+
|
|
110
|
+
// 实例类型
|
|
111
|
+
import { ref } from 'vue'
|
|
112
|
+
const cascaderRef = ref<CascaderInst>()
|
|
113
|
+
cascaderRef.value?.focus()
|
|
69
114
|
```
|
|
70
115
|
|
|
71
|
-
## 组件列表
|
|
116
|
+
## 📚 组件列表
|
|
72
117
|
|
|
73
118
|
### Cascader 级联选择器
|
|
74
119
|
|
|
75
|
-
|
|
120
|
+
支持单选、多选、搜索、远程加载、虚拟滚动等功能。
|
|
76
121
|
|
|
77
|
-
|
|
78
|
-
<template>
|
|
79
|
-
<Cascader
|
|
80
|
-
v-model="value"
|
|
81
|
-
:options="options"
|
|
82
|
-
placeholder="请选择"
|
|
83
|
-
:multiple="false"
|
|
84
|
-
:filterable="true"
|
|
85
|
-
/>
|
|
86
|
-
</template>
|
|
122
|
+
[查看文档](https://zjwmmx.github.io/mmx-ui/components/cascader)
|
|
87
123
|
|
|
88
|
-
|
|
89
|
-
import { ref } from 'vue'
|
|
90
|
-
import { Cascader, type CascaderOption } from '@xn-lib/component'
|
|
124
|
+
## 🔗 链接
|
|
91
125
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
label: '选项1',
|
|
96
|
-
value: '1',
|
|
97
|
-
children: [
|
|
98
|
-
{ label: '子选项1-1', value: '1-1' }
|
|
99
|
-
]
|
|
100
|
-
}
|
|
101
|
-
])
|
|
102
|
-
</script>
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
## 开发
|
|
126
|
+
- [文档](https://zjwmmx.github.io/mmx-ui/)
|
|
127
|
+
- [GitHub](https://github.com/zjwmmx/mmx-ui)
|
|
128
|
+
- [更新日志](https://github.com/zjwmmx/mmx-ui/releases)
|
|
106
129
|
|
|
107
|
-
|
|
108
|
-
# 安装依赖
|
|
109
|
-
pnpm install
|
|
110
|
-
|
|
111
|
-
# 构建
|
|
112
|
-
pnpm build
|
|
130
|
+
## 🤝 贡献
|
|
113
131
|
|
|
114
|
-
|
|
115
|
-
pnpm dev:docs
|
|
116
|
-
```
|
|
132
|
+
欢迎提交 Issue 和 Pull Request！
|
|
117
133
|
|
|
118
|
-
## License
|
|
134
|
+
## 📄 License
|
|
119
135
|
|
|
120
|
-
MIT
|
|
136
|
+
[MIT](https://github.com/zjwmmx/mmx-ui/blob/master/LICENSE)
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.base-cascader-option[data-v-248f99f8]{align-items:center;box-sizing:border-box;color:var(--el-text-color-regular);cursor:pointer;display:flex;font-size:14px;height:34px;line-height:34px;padding:0 12px;position:relative;transition:background-color .3s;width:100%}.base-cascader-option.is-hover[data-v-248f99f8],.base-cascader-option[data-v-248f99f8]:hover{background-color:var(--el-fill-color-light)}.base-cascader-option.is-active[data-v-248f99f8]{color:var(--el-color-primary);font-weight:600}.base-cascader-option.is-disabled[data-v-248f99f8]{background-color:transparent;color:var(--el-text-color-disabled);cursor:not-allowed}.base-cascader-option.is-disabled[data-v-248f99f8]:hover{background-color:transparent}.base-cascader-option.has-checkbox[data-v-248f99f8]{padding-left:8px}.base-cascader-option__checkbox[data-v-248f99f8]{flex-shrink:0;margin-right:8px;pointer-events:auto}.base-cascader-option__label[data-v-248f99f8]{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.base-cascader-option__suffix[data-v-248f99f8]{align-items:center;color:var(--el-text-color-placeholder);display:flex;flex-shrink:0;margin-left:8px}.base-cascader-option__suffix .arrow-icon[data-v-248f99f8]{font-size:12px}.base-cascader-option__suffix .check-icon[data-v-248f99f8]{color:var(--el-color-primary);font-size:14px}.base-cascader-option__suffix .is-loading[data-v-248f99f8]{animation:rotating-248f99f8 2s linear infinite}@keyframes rotating-248f99f8{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.base-cascader-menu[data-v-097326a4]{background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light);max-height:280px;outline:none;overflow:hidden}.base-cascader-menu__wrapper[data-v-097326a4]{display:flex;height:100%}.base-cascader-menu__empty[data-v-097326a4]{color:var(--el-text-color-secondary);min-width:180px;text-align:center}.base-cascader-menu__action[data-v-097326a4]{border-top:1px solid var(--el-border-color-lighter);padding:8px}@keyframes rotating-097326a4{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.is-loading[data-v-097326a4]{animation:rotating-097326a4 2s linear infinite}.base-cascader-submenu[data-v-097326a4]{border-right:1px solid var(--el-border-color-lighter);flex-shrink:0;height:280px;max-width:180px;min-width:180px;overflow:hidden;width:180px}.base-cascader-submenu[data-v-097326a4]:last-child{border-right:none}.base-cascader-submenu__list [data-v-097326a4] .el-scrollbar,.base-cascader-submenu__list[data-v-097326a4]{height:100%;width:100%}.base-cascader-submenu__list [data-v-097326a4] .el-scrollbar__wrap{overflow-x:hidden}.base-cascader-submenu__list [data-v-097326a4] .el-scrollbar__view{box-sizing:border-box;padding:6px 0;width:100%}.base-cascader-submenu__list--virtual [data-v-097326a4] .el-scrollbar{height:100%;width:100%}.base-cascader-submenu__list--virtual [data-v-097326a4] .el-scrollbar__wrap{overflow-x:hidden}.base-cascader-submenu__list--virtual [data-v-097326a4] .el-scrollbar__view{width:100%}.base-cascader-select-menu[data-v-3901f6ec]{background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light);min-width:200px;padding:6px 0}.base-cascader-select-menu__empty[data-v-3901f6ec]{text-align:center}.base-cascader-select-menu__virtual[data-v-3901f6ec]{overflow:hidden}.base-cascader-select-option[data-v-3901f6ec]{align-items:center;box-sizing:border-box;color:var(--el-text-color-regular);cursor:pointer;display:flex;font-size:14px;height:34px;line-height:34px;padding:0 12px;transition:background-color .3s;width:100%}.base-cascader-select-option.is-hover[data-v-3901f6ec],.base-cascader-select-option[data-v-3901f6ec]:hover{background-color:var(--el-fill-color-light)}.base-cascader-select-option.is-selected[data-v-3901f6ec]{color:var(--el-color-primary);font-weight:600}.base-cascader-select-option__checkbox[data-v-3901f6ec]{flex-shrink:0;margin-right:8px}.base-cascader-select-option__label[data-v-3901f6ec]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.base-cascader-select-option .check-icon[data-v-3901f6ec]{color:var(--el-color-primary);flex-shrink:0;font-size:14px;margin-left:8px}.base-cascader[data-v-243e9ed1]{width:100%}.base-cascader.is-disabled[data-v-243e9ed1]{cursor:not-allowed}.base-cascader [data-v-243e9ed1] .el-select{width:100%}.base-cascader [data-v-243e9ed1] .el-select__tags{flex-wrap:nowrap}.base-cascader-dropdown[data-v-243e9ed1]{padding:0}.base-cascader-popper{min-width:auto!important;width:auto!important}.base-cascader-popper .el-select-dropdown__empty,.base-cascader-popper .el-select-dropdown__list{padding:0!important}
|
|
1
|
+
.base-cascader-option[data-v-248f99f8]{align-items:center;box-sizing:border-box;color:var(--el-text-color-regular);cursor:pointer;display:flex;font-size:14px;height:34px;line-height:34px;padding:0 12px;position:relative;transition:background-color .3s;width:100%}.base-cascader-option.is-hover[data-v-248f99f8],.base-cascader-option[data-v-248f99f8]:hover{background-color:var(--el-fill-color-light)}.base-cascader-option.is-active[data-v-248f99f8]{color:var(--el-color-primary);font-weight:600}.base-cascader-option.is-disabled[data-v-248f99f8]{background-color:transparent;color:var(--el-text-color-disabled);cursor:not-allowed}.base-cascader-option.is-disabled[data-v-248f99f8]:hover{background-color:transparent}.base-cascader-option.has-checkbox[data-v-248f99f8]{padding-left:8px}.base-cascader-option__checkbox[data-v-248f99f8]{flex-shrink:0;margin-right:8px;pointer-events:auto}.base-cascader-option__label[data-v-248f99f8]{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.base-cascader-option__suffix[data-v-248f99f8]{align-items:center;color:var(--el-text-color-placeholder);display:flex;flex-shrink:0;margin-left:8px}.base-cascader-option__suffix .arrow-icon[data-v-248f99f8]{font-size:12px}.base-cascader-option__suffix .check-icon[data-v-248f99f8]{color:var(--el-color-primary);font-size:14px}.base-cascader-option__suffix .is-loading[data-v-248f99f8]{animation:rotating-248f99f8 2s linear infinite}@keyframes rotating-248f99f8{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.base-cascader-menu[data-v-097326a4]{background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light);max-height:280px;outline:none;overflow:hidden}.base-cascader-menu__wrapper[data-v-097326a4]{display:flex;height:100%}.base-cascader-menu__empty[data-v-097326a4]{color:var(--el-text-color-secondary);min-width:180px;text-align:center}.base-cascader-menu__action[data-v-097326a4]{border-top:1px solid var(--el-border-color-lighter);padding:8px}@keyframes rotating-097326a4{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.is-loading[data-v-097326a4]{animation:rotating-097326a4 2s linear infinite}.base-cascader-submenu[data-v-097326a4]{border-right:1px solid var(--el-border-color-lighter);flex-shrink:0;height:280px;max-width:180px;min-width:180px;overflow:hidden;width:180px}.base-cascader-submenu[data-v-097326a4]:last-child{border-right:none}.base-cascader-submenu__list [data-v-097326a4] .el-scrollbar,.base-cascader-submenu__list[data-v-097326a4]{height:100%;width:100%}.base-cascader-submenu__list [data-v-097326a4] .el-scrollbar__wrap{overflow-x:hidden}.base-cascader-submenu__list [data-v-097326a4] .el-scrollbar__view{box-sizing:border-box;padding:6px 0;width:100%}.base-cascader-submenu__list--virtual[data-v-097326a4]{padding:6px 0}.base-cascader-submenu__list--virtual [data-v-097326a4] .el-scrollbar{height:100%;width:100%}.base-cascader-submenu__list--virtual [data-v-097326a4] .el-scrollbar__wrap{overflow-x:hidden}.base-cascader-submenu__list--virtual [data-v-097326a4] .el-scrollbar__view{width:100%}.base-cascader-select-menu[data-v-3901f6ec]{background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light);min-width:200px;padding:6px 0}.base-cascader-select-menu__empty[data-v-3901f6ec]{text-align:center}.base-cascader-select-menu__virtual[data-v-3901f6ec]{overflow:hidden}.base-cascader-select-option[data-v-3901f6ec]{align-items:center;box-sizing:border-box;color:var(--el-text-color-regular);cursor:pointer;display:flex;font-size:14px;height:34px;line-height:34px;padding:0 12px;transition:background-color .3s;width:100%}.base-cascader-select-option.is-hover[data-v-3901f6ec],.base-cascader-select-option[data-v-3901f6ec]:hover{background-color:var(--el-fill-color-light)}.base-cascader-select-option.is-selected[data-v-3901f6ec]{color:var(--el-color-primary);font-weight:600}.base-cascader-select-option__checkbox[data-v-3901f6ec]{flex-shrink:0;margin-right:8px}.base-cascader-select-option__label[data-v-3901f6ec]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.base-cascader-select-option .check-icon[data-v-3901f6ec]{color:var(--el-color-primary);flex-shrink:0;font-size:14px;margin-left:8px}.base-cascader[data-v-243e9ed1]{width:100%}.base-cascader.is-disabled[data-v-243e9ed1]{cursor:not-allowed}.base-cascader [data-v-243e9ed1] .el-select{width:100%}.base-cascader [data-v-243e9ed1] .el-select__tags{flex-wrap:nowrap}.base-cascader-dropdown[data-v-243e9ed1]{padding:0}.base-cascader-popper{min-width:auto!important;width:auto!important}.base-cascader-popper .el-select-dropdown__empty,.base-cascader-popper .el-select-dropdown__list{padding:0!important}
|