Rox V

一个基于 Vue 3 的组件库，支持按需引入和自动导入。

安装

npm install @a-drowned-fish/rox-v
# 或
yarn add @a-drowned-fish/rox-v
# 或
pnpm add @a-drowned-fish/rox-v

使用方式

1. 完整引入

import { createApp } from "vue";
import RoxV from "@a-drowned-fish/rox-v";
import "@a-drowned-fish/rox-v/dist/style.css"; // 如果需要样式

const app = createApp(App);
app.use(RoxV);

2. 按需引入（推荐）

• 优势: 无需手动引入样式文件 且 按需加载

<template>
    <Button>点击我</Button>
    <InputOtp />
</template>
<script setup lang="ts">
import { Button, InputOtp } from "@a-drowned-fish/rox-v";
</script>

可用组件

InputOtp - OTP 输入组件

一个用于输入一次性密码（OTP）的组件，支持自定义长度、样式和间距。

基础用法

<template>
    <InputOtp v-model="code" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const code = ref("");
</script>

自定义长度

<template>
    <!-- 4位验证码 -->
    <InputOtp v-model="code" :length="4" />

    <!-- 8位验证码 -->
    <InputOtp v-model="code" :length="8" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const code = ref("");
</script>

自定义样式

<template>
    <InputOtp v-model="code" item-class="custom-item" active-item-class="custom-active" gap="15px" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const code = ref("");
</script>

<style scoped>
.custom-item {
    width: 50px;
    height: 60px;
    border: 2px solid #ddd;
    border-radius: 12px;
    font-size: 24px;
}

.custom-active {
    border-color: #67c23a;
    box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
}
</style>

监听完成事件

<template>
    <InputOtp v-model="code" @complete="handleComplete" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const code = ref("");

const handleComplete = (value: string) => {
    console.log("验证码输入完成:", value);
    // 在这里执行验证逻辑
};
</script>

Props

| 属性 | 说明 | 类型 | 默认值 | | ------------------ | -------------------------------------------- | -------- | ---------- | | length | 输入框数量 | number | 6 | | itemClass | 每个输入项的自定义类名 | string | '' | | activeItemClass | 激活状态输入项的自定义类名 | string | '' | | gap | 输入项之间的间距 | string | '10px' | | hasFilledItemClass | 具有内容的输入项的类名[active前面选项的类名] | string | 'active' |

Events

| 事件名 | 说明 | 回调参数 | | -------- | ------------------------------ | ----------------- | | complete | 输入完成时触发（达到指定长度） | (value: string) |

Popup - 弹出层组件

一个灵活的弹出层组件，支持从不同方向滑入，带有遮罩层和过渡动画效果。

基础用法

<template>
    <Button @click="show = true">打开弹窗</Button>

    <Popup v-model="show">
        <div class="popup-content">
            <h3>标题</h3>
            <p>这是弹窗内容</p>
            <Button @click="show = false">关闭</Button>
        </div>
    </Popup>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Button, Popup } from "@a-drowned-fish/rox-v";

const show = ref(false);
</script>

<style scoped>
.popup-content {
    padding: 20px;
    background: white;
    border-radius: 12px 12px 0 0;
}
</style>

不同位置

<template>
    <!-- 底部弹出（默认） -->
    <Popup v-model="showBottom" position="bottom">
        <div class="content">底部弹窗</div>
    </Popup>

    <!-- 顶部弹出 -->
    <Popup v-model="showTop" position="top">
        <div class="content">顶部弹窗</div>
    </Popup>

    <!-- 左侧弹出 -->
    <Popup v-model="showLeft" position="left">
        <div class="content">左侧弹窗</div>
    </Popup>

    <!-- 右侧弹出 -->
    <Popup v-model="showRight" position="right">
        <div class="content">右侧弹窗</div>
    </Popup>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Popup } from "@a-drowned-fish/rox-v";

const showBottom = ref(false);
const showTop = ref(false);
const showLeft = ref(false);
const showRight = ref(false);
</script>

自定义遮罩层

<template>
    <Popup v-model="show" :bg="'rgba(0, 0, 0, 0.7)'" :duration="500" :mask-closable="false">
        <div class="content">
            <p>点击遮罩层不会关闭</p>
            <Button @click="show = false">手动关闭</Button>
        </div>
    </Popup>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Popup, Button } from "@a-drowned-fish/rox-v";

const show = ref(false);
</script>

自定义挂载节点

<template>
    <div id="custom-container">
        <Popup v-model="show" to="#custom-container">
            <div class="content">挂载到指定容器</div>
        </Popup>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Popup } from "@a-drowned-fish/rox-v";

const show = ref(false);
</script>

Props

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------- | ---------------------------------------- | --------------------- | | position | 弹出位置 | 'top' \| 'bottom' \| 'left' \| 'right' | 'bottom' | | bg | 遮罩层背景色 | string | 'rgba(0, 0, 0, .5)' | | duration | 动画持续时间（毫秒） | number | 300 | | maskClosable | 点击遮罩层是否关闭 | boolean | true | | to | teleport 的目标节点 | string | 'body' | | top | 弹窗顶部距离父元素顶部的距离 | string | '0px' | | left | 弹窗左侧距离父元素左侧的距离 | string | '0px' | | right | 弹窗右侧距离父元素右侧的距离 | string | '0px' | | bottom | 弹窗底部距离父元素底部的距离 | string | '0px' | | zIndex | 弹窗的 z-index 值 | number | 50 |

|

Slots

| 插槽名 | 说明 | | ------- | ------------ | | default | 弹窗内容区域 |

License

MIT