@a-drowned-fish/rox-v 1.0.21 → 1.0.22
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 +268 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,271 @@
|
|
|
1
|
+
# Rox V
|
|
2
|
+
|
|
3
|
+
一个基于 Vue 3 的组件库，支持按需引入和自动导入。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @a-drowned-fish/rox-v
|
|
9
|
+
# 或
|
|
10
|
+
yarn add @a-drowned-fish/rox-v
|
|
11
|
+
# 或
|
|
12
|
+
pnpm add @a-drowned-fish/rox-v
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## 使用方式
|
|
16
|
+
|
|
17
|
+
### 1. 完整引入
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import { createApp } from "vue";
|
|
21
|
+
import RoxV from "@a-drowned-fish/rox-v";
|
|
22
|
+
import "@a-drowned-fish/rox-v/dist/style.css"; // 如果需要样式
|
|
23
|
+
|
|
24
|
+
const app = createApp(App);
|
|
25
|
+
app.use(RoxV);
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 2. 按需引入（推荐）
|
|
29
|
+
|
|
30
|
+
- 优势: 无需手动引入样式文件 且 按需加载
|
|
31
|
+
|
|
32
|
+
```vue
|
|
33
|
+
<template>
|
|
34
|
+
<Button>点击我</Button>
|
|
35
|
+
<InputOtp />
|
|
36
|
+
</template>
|
|
37
|
+
<script setup lang="ts">
|
|
38
|
+
import { Button, InputOtp } from "@a-drowned-fish/rox-v";
|
|
39
|
+
</script>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## 可用组件
|
|
43
|
+
|
|
44
|
+
### InputOtp - OTP 输入组件
|
|
45
|
+
|
|
46
|
+
一个用于输入一次性密码（OTP）的组件，支持自定义长度、样式和间距。
|
|
47
|
+
|
|
48
|
+
#### 基础用法
|
|
49
|
+
|
|
50
|
+
```vue
|
|
51
|
+
<template>
|
|
52
|
+
<InputOtp v-model="code" />
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script setup lang="ts">
|
|
56
|
+
import { ref } from "vue";
|
|
57
|
+
|
|
58
|
+
const code = ref("");
|
|
59
|
+
</script>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
#### 自定义长度
|
|
63
|
+
|
|
64
|
+
```vue
|
|
65
|
+
<template>
|
|
66
|
+
<!-- 4位验证码 -->
|
|
67
|
+
<InputOtp v-model="code" :length="4" />
|
|
68
|
+
|
|
69
|
+
<!-- 8位验证码 -->
|
|
70
|
+
<InputOtp v-model="code" :length="8" />
|
|
71
|
+
</template>
|
|
72
|
+
|
|
73
|
+
<script setup lang="ts">
|
|
74
|
+
import { ref } from "vue";
|
|
75
|
+
|
|
76
|
+
const code = ref("");
|
|
77
|
+
</script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
#### 自定义样式
|
|
81
|
+
|
|
82
|
+
```vue
|
|
83
|
+
<template>
|
|
84
|
+
<InputOtp v-model="code" item-class="custom-item" active-item-class="custom-active" gap="15px" />
|
|
85
|
+
</template>
|
|
86
|
+
|
|
87
|
+
<script setup lang="ts">
|
|
88
|
+
import { ref } from "vue";
|
|
89
|
+
|
|
90
|
+
const code = ref("");
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<style scoped>
|
|
94
|
+
.custom-item {
|
|
95
|
+
width: 50px;
|
|
96
|
+
height: 60px;
|
|
97
|
+
border: 2px solid #ddd;
|
|
98
|
+
border-radius: 12px;
|
|
99
|
+
font-size: 24px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.custom-active {
|
|
103
|
+
border-color: #67c23a;
|
|
104
|
+
box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
|
|
105
|
+
}
|
|
106
|
+
</style>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
#### 监听完成事件
|
|
110
|
+
|
|
111
|
+
```vue
|
|
112
|
+
<template>
|
|
113
|
+
<InputOtp v-model="code" @complete="handleComplete" />
|
|
114
|
+
</template>
|
|
115
|
+
|
|
116
|
+
<script setup lang="ts">
|
|
117
|
+
import { ref } from "vue";
|
|
118
|
+
|
|
119
|
+
const code = ref("");
|
|
120
|
+
|
|
121
|
+
const handleComplete = (value: string) => {
|
|
122
|
+
console.log("验证码输入完成:", value);
|
|
123
|
+
// 在这里执行验证逻辑
|
|
124
|
+
};
|
|
125
|
+
</script>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
#### Props
|
|
129
|
+
|
|
130
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
131
|
+
| ------------------ | -------------------------------------------- | -------- | ---------- |
|
|
132
|
+
| length | 输入框数量 | `number` | `6` |
|
|
133
|
+
| itemClass | 每个输入项的自定义类名 | `string` | `''` |
|
|
134
|
+
| activeItemClass | 激活状态输入项的自定义类名 | `string` | `''` |
|
|
135
|
+
| gap | 输入项之间的间距 | `string` | `'10px'` |
|
|
136
|
+
| hasFilledItemClass | 具有内容的输入项的类名[active前面选项的类名] | `string` | `'active'` |
|
|
137
|
+
|
|
138
|
+
#### Events
|
|
139
|
+
|
|
140
|
+
| 事件名 | 说明 | 回调参数 |
|
|
141
|
+
| -------- | ------------------------------ | ----------------- |
|
|
142
|
+
| complete | 输入完成时触发（达到指定长度） | `(value: string)` |
|
|
143
|
+
|
|
144
|
+
### Popup - 弹出层组件
|
|
145
|
+
|
|
146
|
+
一个灵活的弹出层组件，支持从不同方向滑入，带有遮罩层和过渡动画效果。
|
|
147
|
+
|
|
148
|
+
#### 基础用法
|
|
149
|
+
|
|
150
|
+
```vue
|
|
151
|
+
<template>
|
|
152
|
+
<Button @click="show = true">打开弹窗</Button>
|
|
153
|
+
|
|
154
|
+
<Popup v-model="show">
|
|
155
|
+
<div class="popup-content">
|
|
156
|
+
<h3>标题</h3>
|
|
157
|
+
<p>这是弹窗内容</p>
|
|
158
|
+
<Button @click="show = false">关闭</Button>
|
|
159
|
+
</div>
|
|
160
|
+
</Popup>
|
|
161
|
+
</template>
|
|
162
|
+
|
|
163
|
+
<script setup lang="ts">
|
|
164
|
+
import { ref } from "vue";
|
|
165
|
+
import { Button, Popup } from "@a-drowned-fish/rox-v";
|
|
166
|
+
|
|
167
|
+
const show = ref(false);
|
|
168
|
+
</script>
|
|
169
|
+
|
|
170
|
+
<style scoped>
|
|
171
|
+
.popup-content {
|
|
172
|
+
padding: 20px;
|
|
173
|
+
background: white;
|
|
174
|
+
border-radius: 12px 12px 0 0;
|
|
175
|
+
}
|
|
176
|
+
</style>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
#### 不同位置
|
|
180
|
+
|
|
181
|
+
```vue
|
|
182
|
+
<template>
|
|
183
|
+
<!-- 底部弹出（默认） -->
|
|
184
|
+
<Popup v-model="showBottom" position="bottom">
|
|
185
|
+
<div class="content">底部弹窗</div>
|
|
186
|
+
</Popup>
|
|
187
|
+
|
|
188
|
+
<!-- 顶部弹出 -->
|
|
189
|
+
<Popup v-model="showTop" position="top">
|
|
190
|
+
<div class="content">顶部弹窗</div>
|
|
191
|
+
</Popup>
|
|
192
|
+
|
|
193
|
+
<!-- 左侧弹出 -->
|
|
194
|
+
<Popup v-model="showLeft" position="left">
|
|
195
|
+
<div class="content">左侧弹窗</div>
|
|
196
|
+
</Popup>
|
|
197
|
+
|
|
198
|
+
<!-- 右侧弹出 -->
|
|
199
|
+
<Popup v-model="showRight" position="right">
|
|
200
|
+
<div class="content">右侧弹窗</div>
|
|
201
|
+
</Popup>
|
|
202
|
+
</template>
|
|
203
|
+
|
|
204
|
+
<script setup lang="ts">
|
|
205
|
+
import { ref } from "vue";
|
|
206
|
+
import { Popup } from "@a-drowned-fish/rox-v";
|
|
207
|
+
|
|
208
|
+
const showBottom = ref(false);
|
|
209
|
+
const showTop = ref(false);
|
|
210
|
+
const showLeft = ref(false);
|
|
211
|
+
const showRight = ref(false);
|
|
212
|
+
</script>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
#### 自定义遮罩层
|
|
216
|
+
|
|
217
|
+
```vue
|
|
218
|
+
<template>
|
|
219
|
+
<Popup v-model="show" :bg="'rgba(0, 0, 0, 0.7)'" :duration="500" :mask-closable="false">
|
|
220
|
+
<div class="content">
|
|
221
|
+
<p>点击遮罩层不会关闭</p>
|
|
222
|
+
<Button @click="show = false">手动关闭</Button>
|
|
223
|
+
</div>
|
|
224
|
+
</Popup>
|
|
225
|
+
</template>
|
|
226
|
+
|
|
227
|
+
<script setup lang="ts">
|
|
228
|
+
import { ref } from "vue";
|
|
229
|
+
import { Popup, Button } from "@a-drowned-fish/rox-v";
|
|
230
|
+
|
|
231
|
+
const show = ref(false);
|
|
232
|
+
</script>
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
#### 自定义挂载节点
|
|
236
|
+
|
|
237
|
+
```vue
|
|
238
|
+
<template>
|
|
239
|
+
<div id="custom-container">
|
|
240
|
+
<Popup v-model="show" to="#custom-container">
|
|
241
|
+
<div class="content">挂载到指定容器</div>
|
|
242
|
+
</Popup>
|
|
243
|
+
</div>
|
|
244
|
+
</template>
|
|
245
|
+
|
|
246
|
+
<script setup lang="ts">
|
|
247
|
+
import { ref } from "vue";
|
|
248
|
+
import { Popup } from "@a-drowned-fish/rox-v";
|
|
249
|
+
|
|
250
|
+
const show = ref(false);
|
|
251
|
+
</script>
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
#### Props
|
|
255
|
+
|
|
256
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
257
|
+
| ------------ | ---------------------------- | ---------------------------------------- | --------------------- |
|
|
258
|
+
| position | 弹出位置 | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` |
|
|
259
|
+
| bg | 遮罩层背景色 | `string` | `'rgba(0, 0, 0, .5)'` |
|
|
260
|
+
| duration | 动画持续时间（毫秒） | `number` | `300` |
|
|
261
|
+
| maskClosable | 点击遮罩层是否关闭 | `boolean` | `true` |
|
|
262
|
+
| to | teleport 的目标节点 | `string` | `'body'` |
|
|
263
|
+
| top | 弹窗顶部距离父元素顶部的距离 | `string` | `'0px'` |
|
|
264
|
+
| left | 弹窗左侧距离父元素左侧的距离 | `string` | `'0px'` |
|
|
265
|
+
| right | 弹窗右侧距离父元素右侧的距离 | `string` | `'0px'` |
|
|
266
|
+
| bottom | 弹窗底部距离父元素底部的距离 | `string` | `'0px'` |
|
|
267
|
+
| zIndex | 弹窗的 z-index 值 | `number` | `50` |
|
|
268
|
+
|
|
1
269
|
|
|
|
2
270
|
|
|
3
271
|
#### Slots
|