eve-one-cat-ui

v1.1.5

Published

10 months ago

A simple Vue 3 Cat UI component library

0High
0Medium
0Low

everydayonecat

EveOneCat UI

一个简单的 Vue 3 UI 组件库，采用手绘线条风格的界面设计。

安装

// 引入打包后的组件库
import EveOneCatUI from 'eve-one-cat-ui'
// 引入打包后的样式文件
import 'eve-one-cat-ui/dist/styles/style.css'

使用

import { createApp } from 'vue'
import EveOneCatUI from 'eve-one-cat-ui'
// 引入打包后的样式文件
import 'eve-one-cat-ui/dist/styles/style.css'

const app = createApp(App)
app.use(EveOneCatUI)

主题

EveOneCat UI 支持亮色和暗色主题，默认跟随系统主题自动切换。

手动切换主题

<template>
  <eoc-theme-toggle @theme-change="onThemeChange" />
</template>

<script>
export default {
  methods: {
    onThemeChange(theme) {
      console.log('主题已切换为:', theme) // 'light' 或 'dark'
    }
  }
}
</script>

手动设置主题类

<!-- 强制使用亮色主题 -->
<html class="eoc-light-theme">
  <!-- 内容 -->
</html>

<!-- 强制使用暗色主题 -->
<html class="eoc-dark-theme">
  <!-- 内容 -->
</html>

颜色系统

EveOneCat UI 提供了丰富的猫咪主题颜色，可通过 CSS 变量使用：

.my-element {
  color: var(--eoc-cat-blue);
  background-color: var(--eoc-cat-cream);
  border-color: var(--eoc-cat-pink);
}

组件

Button 按钮

简洁美观的按钮组件，支持多种类型、尺寸和状态。

基础用法

<eoc-button>默认按钮</eoc-button>
<eoc-button type="primary">主要按钮</eoc-button>
<eoc-button type="success">成功按钮</eoc-button>
<eoc-button type="warning">警告按钮</eoc-button>
<eoc-button type="danger">危险按钮</eoc-button>

带图标按钮

<eoc-button :icon="Heart">带左侧图标</eoc-button>
<eoc-button :icon="Star" iconPosition="right">带右侧图标</eoc-button>
<eoc-button :icon="Home" iconOnly />

不同尺寸

<eoc-button size="small">小按钮</eoc-button>
<eoc-button>中按钮</eoc-button>
<eoc-button size="large">大按钮</eoc-button>

动画效果

<eoc-button animated>开启动画</eoc-button>
<eoc-button :icon="Bell" animated>带图标开启动画</eoc-button>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | type | 按钮类型 | string | default/primary/success/warning/danger | default | | size | 尺寸 | string | small/medium/large | medium | | disabled | 是否禁用 | boolean | - | false | | icon | 图标组件 | Component | - | null | | iconPosition | 图标位置 | string | left/right | left | | iconOnly | 是否仅显示图标 | boolean | - | false | | iconStroke | 图标线条粗细 | number | - | 2 | | animated | 是否启用动画 | boolean | - | false |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | click | 按钮点击时触发 | Event |

Switch 开关

用于切换开关状态的交互组件。

基础用法

<template>
  <eoc-switch v-model="checked" />
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

不同类型和尺寸

<!-- 不同类型 -->
<eoc-switch v-model="checked" type="primary" />
<eoc-switch v-model="checked" type="success" />
<eoc-switch v-model="checked" type="warning" />
<eoc-switch v-model="checked" type="danger" />

<!-- 不同尺寸 -->
<eoc-switch v-model="checked" size="small" />
<eoc-switch v-model="checked" size="medium" />
<eoc-switch v-model="checked" size="large" />

自定义文本和图标

<!-- 自定义文本 -->
<eoc-switch v-model="checked" checked-text="开" unchecked-text="关" />

<!-- 自定义图标 -->
<eoc-switch v-model="checked">
  <template #checked-icon>
    <div style="color: white; font-size: 12px;">✓</div>
  </template>
  <template #unchecked-icon>
    <div style="color: white; font-size: 12px;">✗</div>
  </template>
</eoc-switch>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | v-model | 开关的选中状态 | boolean | - | false | | disabled | 是否禁用 | boolean | - | false | | loading | 是否为加载状态 | boolean | - | false | | size | 开关的尺寸 | string | small/medium/large | medium | | type | 开关的类型 | string | default/primary/success/warning/danger | default | | round | 是否为圆角样式 | boolean | - | true | | checked-text | 选中时的文本 | string | - | "" | | unchecked-text | 未选中时的文本 | string | - | "" | | checked-color | 自定义选中时的颜色 | string | - | "" | | unchecked-color | 自定义未选中时的颜色 | string | - | "" | | animated | 是否使用动画效果 | boolean | - | false |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:model-value | 开关状态变化时触发 | (value: boolean) | | change | 开关状态变化时触发 | (value: any) |

插槽

| 插槽名 | 说明 | |------|------| | checked-icon | 自定义选中状态的图标 | | unchecked-icon | 自定义未选中状态的图标 |

Card 卡片

用于展示内容的容器组件。

基础用法

<eoc-card title="基础卡片">
  这是一个基础卡片，展示简单内容。
</eoc-card>

不同类型

<eoc-card title="默认卡片" type="default">默认类型卡片</eoc-card>
<eoc-card title="主要卡片" type="primary">主要类型卡片</eoc-card>
<eoc-card title="成功卡片" type="success">成功类型卡片</eoc-card>
<eoc-card title="警告卡片" type="warning">警告类型卡片</eoc-card>
<eoc-card title="危险卡片" type="danger">危险类型卡片</eoc-card>

可悬停和动画效果

<eoc-card title="可悬停卡片" hoverable>
  鼠标悬停在此卡片上会有交互效果。
</eoc-card>

<eoc-card title="动态手绘效果" animated hoverable>
  此卡片的边框使用动态手绘滤镜效果。
</eoc-card>

自定义头部和底部

<eoc-card hoverable>
  <template #header>
    <div style="display: flex; align-items: center;">
      <span style="margin-right: 8px;">📝</span>
      <span>自定义头部</span>
    </div>
  </template>
  这是卡片的主要内容区域。
  <template #footer>
    <div style="display: flex; justify-content: flex-end;">
      <eoc-button size="small">取消</eoc-button>
      <eoc-button size="small" type="primary" style="margin-left: 8px;">确认</eoc-button>
    </div>
  </template>
</eoc-card>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | title | 卡片标题 | string | - | null | | type | 卡片类型 | string | default/primary/success/warning/danger | default | | size | 卡片尺寸 | string | small/medium/large | medium | | hoverable | 是否在鼠标悬停时显示阴影 | boolean | - | false | | animated | 是否使用动画效果 | boolean | - | false | | borderColor | 自定义边框颜色 | string | - | null | | backgroundColor | 自定义背景颜色 | string | - | null |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | click | 卡片点击时触发 | Event |

插槽

| 插槽名 | 说明 | |------|------| | default | 卡片内容 | | header | 卡片头部区域，会覆盖 title 属性 | | footer | 卡片底部区域 |

Dialog 对话框

模态对话框组件，用于展示重要信息或收集用户输入。

基础用法

<template>
  <eoc-button @click="showDialog">打开对话框</eoc-button>
  
  <eoc-dialog v-model="dialogVisible" title="基础对话框">
    <p>这是一个基础对话框，包含标题和关闭按钮。</p>
    <template #footer>
      <eoc-button size="small" @click="dialogVisible = false">取消</eoc-button>
      <eoc-button type="primary" @click="dialogVisible = false">确定</eoc-button>
    </template>
  </eoc-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    }
  }
}
</script>

不同类型

<!-- 主要类型 -->
<eoc-dialog v-model="dialogVisible" title="主要对话框" type="primary">
  <p>这是一个主要类型的对话框。</p>
</eoc-dialog>

<!-- 成功类型 -->
<eoc-dialog v-model="dialogVisible" title="成功对话框" type="success">
  <p>操作已成功完成！</p>
</eoc-dialog>

<!-- 警告类型 -->
<eoc-dialog v-model="dialogVisible" title="警告对话框" type="warning">
  <p>请注意此操作可能产生一些影响。</p>
</eoc-dialog>

<!-- 危险类型 -->
<eoc-dialog v-model="dialogVisible" title="危险对话框" type="danger">
  <p>此操作不可逆，确定要继续吗？</p>
</eoc-dialog>

自定义关闭行为

<!-- 不可关闭 -->
<eoc-dialog v-model="dialogVisible" title="不可关闭对话框" :closable="false">
  <p>此对话框没有右上角的关闭按钮。</p>
</eoc-dialog>

<!-- 点击遮罩不关闭 -->
<eoc-dialog v-model="dialogVisible" title="点击遮罩不关闭" :close-on-overlay="false">
  <p>此对话框点击遮罩层不会关闭。</p>
</eoc-dialog>

<!-- ESC键不关闭 -->
<eoc-dialog v-model="dialogVisible" title="ESC键不关闭" :close-on-esc="false">
  <p>此对话框按ESC键不会关闭。</p>
</eoc-dialog>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | v-model | 控制对话框是否显示 | boolean | - | false | | title | 对话框标题 | string | - | "" | | type | 对话框类型 | string | default/primary/success/warning/danger | default | | size | 对话框尺寸 | string | small/medium/large | medium | | closable | 是否显示关闭按钮 | boolean | - | true | | closeOnOverlay | 点击遮罩层是否关闭对话框 | boolean | - | true | | closeOnEsc | 按ESC键是否关闭对话框 | boolean | - | true | | width | 对话框宽度 | string/number | - | "" | | animated | 是否启用动画效果 | boolean | - | false | | borderColor | 自定义边框颜色 | string | - | "" | | backgroundColor | 自定义背景颜色 | string | - | "" | | closeIcon | 自定义关闭图标 | Component | - | X | | iconStroke | 图标线条粗细 | number | - | 3 | | zIndex | 对话框的z-index值 | number | - | 1000 |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:model-value | 对话框状态变更时触发 | boolean | | open | 对话框打开时触发 | - | | close | 对话框关闭时触发 | - |

插槽

| 插槽名 | 说明 | |------|------| | default | 对话框内容 | | header | 对话框头部，会覆盖 title 属性 | | footer | 对话框底部 |

ColorCard 颜色卡片

用于展示颜色样本的卡片组件，点击可复制颜色变量。

基础用法

<eoc-color-card 
  name="蓝色" 
  color-var="--eoc-cat-blue" 
  :is-dark-color="true" 
/>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | name | 颜色名称 | string | - | - | | colorVar | 颜色变量名 | string | - | - | | isDarkColor | 是否是深色 | boolean | - | true |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | click | 卡片点击时触发，会自动复制颜色变量 | Event |

RadioGroup 单选组

单选按钮组，用于在多个选项中选择一个。

基础用法

<template>
  <eoc-radio-group v-model="selected">
    <eoc-radio label="选项1">选项1</eoc-radio>
    <eoc-radio label="选项2">选项2</eoc-radio>
    <eoc-radio label="选项3">选项3</eoc-radio>
  </eoc-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selected: '选项1'
    }
  }
}
</script>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | v-model | 选中项的值 | string/number/boolean | - | "" | | disabled | 是否禁用 | boolean | - | false | | size | 单选框尺寸 | string | small/medium/large | medium | | name | 原生name属性 | string | - | "" |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:model-value | 值变化时触发 | 选中的值 | | change | 值变化时触发 | 选中的值 |

其他组件

EveOneCat UI 还包含以下组件：

Modal 模态框

高级模态窗口，比Dialog提供更多自定义选项。

Slider 滑块

用于在给定范围内选择特定值的滑动组件。

Select 选择器

下拉菜单选择组件，用于从预设选项中进行选择。

Textarea 文本域

多行文本输入框，支持自动调整高度。

Field 输入框

基础输入字段，支持各种类型的文本输入。

Radio 单选框

单个单选控件，通常与RadioGroup一起使用。

Checkbox 复选框

多选控件，可单独使用或组合使用。

Tag 标签

用于标记和分类的小型组件。

Toast 提示框

轻量级的消息提示组件，用于操作反馈。

CodeBlock 代码块

用于展示代码片段的组件，支持语法高亮。

ThemeToggle 主题切换

用于切换明暗主题的开关组件。

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

Modal 模态框

模态窗口组件，用于创建高级对话框和弹出视图。

基础用法

<template>
  <eoc-button @click="showModal">打开模态框</eoc-button>
  
  <eoc-modal v-model="modalVisible" title="基础模态框">
    <p>这是一个基础模态框，包含标题和关闭按钮。</p>
    <template #footer>
      <eoc-button size="small" @click="modalVisible = false">取消</eoc-button>
      <eoc-button type="primary" @click="modalVisible = false">确定</eoc-button>
    </template>
  </eoc-modal>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false
    }
  },
  methods: {
    showModal() {
      this.modalVisible = true
    }
  }
}
</script>

不同尺寸

<eoc-modal v-model="smallModal" title="小尺寸模态框" size="small">
  <p>这是一个小尺寸的模态框。</p>
</eoc-modal>

<eoc-modal v-model="mediumModal" title="中尺寸模态框" size="medium">
  <p>这是一个中尺寸的模态框（默认大小）。</p>
</eoc-modal>

<eoc-modal v-model="largeModal" title="大尺寸模态框" size="large">
  <p>这是一个大尺寸的模态框，适合展示更多内容。</p>
</eoc-modal>

<eoc-modal v-model="hugeModal" title="超大尺寸模态框" size="huge">
  <p>这是一个超大尺寸的模态框，显示大量内容时使用。</p>
</eoc-modal>

<eoc-modal v-model="fullscreenModal" title="全屏模态框" size="fullscreen">
  <p>这是一个全屏模式的模态框，几乎占据整个屏幕。</p>
</eoc-modal>

预设样式

<eoc-modal v-model="cardModal" preset="card">
  <h3 style="margin-top: 0;">卡片模式</h3>
  <p>这是卡片模式的模态框，没有标题栏和底部区域。</p>
</eoc-modal>

<eoc-modal v-model="dialogModal" title="对话框模式" preset="dialog">
  <p>这是对话框模式的模态框，自带确认和取消按钮。</p>
</eoc-modal>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | v-model | 控制模态框是否显示 | boolean | - | false | | title | 模态框标题 | string | - | "" | | type | 模态框类型 | string | default/primary/success/warning/danger | default | | size | 模态框尺寸 | string | small/medium/large/huge/fullscreen | medium | | preset | 预设样式 | string | card/dialog | "" | | closable | 是否显示关闭按钮 | boolean | - | true | | maskClosable | 点击遮罩层是否关闭模态框 | boolean | - | true | | closeOnEsc | 按ESC键是否关闭模态框 | boolean | - | true | | width | 模态框宽度 | string/number | - | "" | | animated | 是否启用动画效果 | boolean | - | false | | borderColor | 自定义边框颜色 | string | - | "" | | backgroundColor | 自定义背景颜色 | string | - | "" | | closeIcon | 自定义关闭图标 | Component | - | X | | iconStroke | 图标线条粗细 | number | - | 3 | | zIndex | 模态框的z-index值 | number | - | 1000 | | transformOrigin | 动画变换原点 | string | - | "" | | segmented | 是否显示内容区域分割线 | boolean/string | - | false | | confirmText | 确认按钮文本 | string | - | "确认" | | cancelText | 取消按钮文本 | string | - | "取消" | | confirmType | 确认按钮类型 | string | default/primary/success/warning/danger | primary |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:modelValue | 模态框状态变更时触发 | boolean | | open | 模态框打开时触发 | - | | close | 模态框关闭时触发 | - | | confirm | 点击确认按钮时触发 | - | | cancel | 点击取消按钮时触发 | - |

插槽

| 插槽名 | 说明 | |------|------| | default | 模态框内容 | | header | 模态框头部，会覆盖 title 属性 | | footer | 模态框底部 | | custom | 完全自定义模态框内容，使用此插槽时会忽略其他所有插槽 |

方法

| 方法名 | 说明 | 参数 | |------|------|------| | close | 关闭模态框的方法，用于以编程方式关闭模态框 | - |

Select 选择器

下拉菜单选择组件，用于从预设选项中进行选择。

基础用法

<template>
  <eoc-select 
    v-model="value" 
    :options="options" 
    placeholder="请选择一个选项"
  />
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [
        { label: '选项一', value: 'option1' },
        { label: '选项二', value: 'option2' },
        { label: '选项三', value: 'option3' },
      ]
    }
  }
}
</script>

不同尺寸

<eoc-select v-model="value" :options="options" placeholder="小尺寸" size="small" />
<eoc-select v-model="value" :options="options" placeholder="中等尺寸" size="medium" />
<eoc-select v-model="value" :options="options" placeholder="大尺寸" size="large" />

多选模式

<eoc-select v-model="multiValue" :options="options" placeholder="可多选" multiple />

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | modelValue / v-model | 选中项的值 | string/number/array | - | null | | options | 选项数组，每个选项应该有 label 和 value 属性 | array | - | [] | | placeholder | 占位文本 | string | - | "请选择" | | disabled | 是否禁用 | boolean | - | false | | multiple | 是否多选 | boolean | - | false | | error | 是否为错误状态 | boolean | - | false | | clearable | 是否可清空 | boolean | - | false | | emptyText | 无数据时显示的文本 | string | - | "无数据" | | animated | 是否启用边框动画 | boolean | - | false | | fullWidth | 是否占满容器宽度 | boolean | - | false | | size | 尺寸 | string | small/medium/large | medium |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | change | 选项变更时触发 | 当前选中值 |

Textarea 文本域

多行文本输入框，支持自动调整高度。

基础用法

<template>
  <eoc-textarea 
    v-model="bio" 
    label="个人简介" 
    placeholder="请输入您的个人简介"
  />
</template>

<script>
export default {
  data() {
    return {
      bio: ''
    }
  }
}
</script>

自动调整高度

<eoc-textarea 
  v-model="bio" 
  label="自动调整高度" 
  placeholder="输入文本时会自动调整高度" 
  :auto-height="true"
/>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | modelValue / v-model | 文本域的值 | string | - | "" | | rows | 文本域的行数 | number | - | 3 | | label | 文本域标签 | string | - | null | | placeholder | 占位文本 | string | - | "" | | disabled | 是否禁用 | boolean | - | false | | error | 错误信息 | string | - | null | | size | 文本域尺寸 | string | small/medium/large | medium | | icon | 图标组件 | Component | - | null | | iconPosition | 图标位置 | string | left/right | left | | textAlign | 文本对齐方式 | string | left/center/right/justify | justify | | resizable | 是否可调整大小 | boolean | - | false | | autoHeight | 是否根据内容自动调整高度 | boolean | - | false | | autoWidth | 是否根据内容自动调整宽度 | boolean | - | false | | minHeight | 最小高度 | string | - | null | | maxHeight | 最大高度 | string | - | null | | animated | 是否启用动画 | boolean | - | false | | borderRadius | 边框圆角大小 | string | - | "12px" |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:modelValue | 输入值变更时触发 | string | | focus | 文本域获得焦点时触发 | Event | | blur | 文本域失去焦点时触发 | Event | | resize | 调整大小时触发 | {width, height} |

Slider 滑块

用于在给定范围内选择特定值的滑动组件。

基础用法

<template>
  <eoc-slider v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      value: 50
    }
  }
}
</script>

范围选择

<eoc-slider v-model="rangeValue" :min="0" :max="100" :step="5" />

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | modelValue / v-model | 滑块的值 | number | - | 0 | | min | 最小值 | number | - | 0 | | max | 最大值 | number | - | 100 | | step | 步长 | number | - | 1 | | disabled | 是否禁用 | boolean | - | false | | showTooltip | 是否显示提示气泡 | boolean | - | true | | type | 滑块类型 | string | default/primary/success/warning/danger | default | | size | 滑块尺寸 | string | small/medium/large | medium | | formatTooltip | 格式化提示气泡文本 | function | - | null |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:modelValue | 值更新时触发 | number | | change | 值变化时触发 | number | | input | 拖动时触发 | number |

Field 输入框

基础输入字段，支持各种类型的文本输入。

基础用法

<template>
  <eoc-field v-model="username" label="用户名" placeholder="请输入用户名" />
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>

不同类型的输入

<eoc-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
<eoc-field v-model="email" type="email" label="电子邮箱" placeholder="请输入电子邮箱" />
<eoc-field v-model="number" type="number" label="数字" placeholder="请输入数字" />

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | modelValue / v-model | 输入框的值 | string/number | - | "" | | type | 输入框类型 | string | text/password/email/number/tel/url等 | "text" | | label | 输入框标签 | string | - | null | | placeholder | 占位文本 | string | - | "" | | disabled | 是否禁用 | boolean | - | false | | readonly | 是否只读 | boolean | - | false | | error | 错误信息 | string | - | null | | size | 输入框尺寸 | string | small/medium/large | medium | | icon | 图标组件 | Component | - | null | | iconPosition | 图标位置 | string | left/right | left | | clearable | 是否可清空 | boolean | - | false | | animated | 是否启用动画 | boolean | - | false | | borderRadius | 边框圆角大小 | string | - | "12px" |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:modelValue | 输入值变更时触发 | string | | focus | 输入框获得焦点时触发 | Event | | blur | 输入框失去焦点时触发 | Event | | clear | 点击清除按钮时触发 | - |

Radio 单选框

单个单选控件，通常与RadioGroup一起使用。

基础用法

<template>
  <eoc-radio-group v-model="selected">
    <eoc-radio label="选项1">选项1</eoc-radio>
    <eoc-radio label="选项2">选项2</eoc-radio>
    <eoc-radio label="选项3">选项3</eoc-radio>
  </eoc-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selected: '选项1'
    }
  }
}
</script>

不同尺寸

<eoc-radio-group v-model="selected" size="small">
  <eoc-radio label="选项1">小尺寸</eoc-radio>
  <eoc-radio label="选项2">小尺寸</eoc-radio>
</eoc-radio-group>

<eoc-radio-group v-model="selected" size="large">
  <eoc-radio label="选项1">大尺寸</eoc-radio>
  <eoc-radio label="选项2">大尺寸</eoc-radio>
</eoc-radio-group>

单选框属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | label | 单选框的值 | string/number/boolean | - | undefined | | disabled | 是否禁用 | boolean | - | false | | size | 单选框尺寸 | string | small/medium/large | 继承自RadioGroup | | name | 原生name属性 | string | - | "" |

单选框组属性

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:modelValue | 值变化时触发 | 选中的值 | | change | 值变化时触发 | 选中的值 |

Checkbox 复选框

多选控件，可单独使用或组合使用。

基础用法

<template>
  <eoc-checkbox v-model="checked">接受用户协议</eoc-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

复选框组

<template>
  <eoc-checkbox-group v-model="checkedFruits">
    <eoc-checkbox label="apple">苹果</eoc-checkbox>
    <eoc-checkbox label="banana">香蕉</eoc-checkbox>
    <eoc-checkbox label="orange">橙子</eoc-checkbox>
  </eoc-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkedFruits: []
    }
  }
}
</script>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | modelValue / v-model | 复选框的选中状态 | boolean / array | - | false | | label | 复选框的值 | string/number/boolean | - | "" | | disabled | 是否禁用 | boolean | - | false | | size | 复选框尺寸 | string | small/medium/large | medium | | name | 原生name属性 | string | - | "" | | indeterminate | 是否为不确定状态 | boolean | - | false |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | update:modelValue | 值变化时触发 | 当前值 | | change | 值变化时触发 | 当前值 |

Tag 标签

用于标记和分类的小型组件。

基础用法

<template>
  <eoc-tag>默认标签</eoc-tag>
  <eoc-tag type="primary">主要标签</eoc-tag>
  <eoc-tag type="success">成功标签</eoc-tag>
  <eoc-tag type="warning">警告标签</eoc-tag>
  <eoc-tag type="danger">危险标签</eoc-tag>
</template>

可关闭标签

<eoc-tag closable @close="handleClose">可关闭标签</eoc-tag>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | type | 标签类型 | string | default/primary/success/warning/danger | default | | size | 标签尺寸 | string | small/medium/large | medium | | closable | 是否可关闭 | boolean | - | false | | color | 自定义颜色 | string | - | "" | | backgroundColor | 自定义背景颜色 | string | - | "" | | borderRadius | 边框圆角大小 | string | - | "12px" | | icon | 图标组件 | Component | - | null | | animated | 是否启用动画 | boolean | - | false |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | close | 关闭标签时触发 | - | | click | 点击标签时触发 | Event |

Toast 提示框

轻量级的消息提示组件，用于操作反馈。

基础用法

<template>
  <eoc-button @click="showToast">显示提示</eoc-button>
</template>

<script>
import { useToast } from 'eve-one-cat-ui'

export default {
  setup() {
    const toast = useToast()
    
    function showToast() {
      toast.show('这是一条提示消息')
    }
    
    return { showToast }
  }
}
</script>

不同类型的提示

// 成功提示
toast.success('操作成功!')

// 警告提示
toast.warning('请注意此操作')

// 错误提示
toast.error('操作失败')

// 信息提示
toast.info('这是一条普通信息')

自定义选项

toast.show({
  message: '自定义提示消息',
  type: 'primary',
  duration: 5000,
  position: 'top-center',
  closable: true
})

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | message | 提示消息 | string | - | "" | | type | 提示类型 | string | default/primary/success/warning/danger/info | default | | duration | 显示时间，单位毫秒，设为 0 则不自动关闭 | number | - | 3000 | | position | 提示位置 | string | top-left/top-center/top-right/bottom-left/bottom-center/bottom-right | top-right | | closable | 是否显示关闭按钮 | boolean | - | false | | onClose | 关闭时的回调函数 | function | - | null | | icon | 自定义图标 | Component | - | null | | iconStroke | 图标线条粗细 | number | - | 2 |

方法

| 方法名 | 说明 | 参数 | |------|------|------| | show | 显示提示框 | message或配置对象 | | success | 显示成功提示框 | message或配置对象 | | warning | 显示警告提示框 | message或配置对象 | | error | 显示错误提示框 | message或配置对象 | | info | 显示信息提示框 | message或配置对象 | | clear | 清除所有提示框 | - |

CodeBlock 代码块

用于展示代码片段的组件，支持语法高亮。

基础用法

<eoc-code-block :code="codeString" />

带标题和颜色

<eoc-code-block 
  :code="codeString" 
  title="示例代码" 
  language="javascript" 
  theme="dark"
/>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | code | 代码内容 | string | - | "" | | language | 代码语言 | string | javascript/html/css/json等 | "javascript" | | title | 代码块标题 | string | - | "" | | theme | 主题 | string | light/dark | "light" | | showLineNumbers | 是否显示行号 | boolean | - | true | | copyable | 是否可复制 | boolean | - | true | | animated | 是否使用动画边框 | boolean | - | false |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | copy | 复制代码时触发 | 复制的代码 |

ThemeToggle 主题切换

用于切换明暗主题的开关组件。

基础用法

<template>
  <eoc-theme-toggle @theme-change="onThemeChange" />
</template>

<script>
export default {
  methods: {
    onThemeChange(theme) {
      console.log('主题已切换为:', theme) // 'light' 或 'dark'
    }
  }
}
</script>

属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | size | 开关尺寸 | string | small/medium/large | medium | | animated | 是否启用动画效果 | boolean | - | true |

事件

| 事件名 | 说明 | 参数 | |------|------|------| | theme-change | 主题变更时触发 | 'light' 或 'dark' |

</rewritten_file>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

EveOneCat UI

安装

使用

主题

手动切换主题

手动设置主题类

颜色系统

组件

Button 按钮

基础用法

带图标按钮

不同尺寸

动画效果

属性

事件

Switch 开关

基础用法

不同类型和尺寸

自定义文本和图标

属性

事件

插槽

Card 卡片

基础用法

不同类型

可悬停和动画效果

自定义头部和底部

属性

事件

插槽

Dialog 对话框

基础用法

不同类型

自定义关闭行为

属性

事件

插槽

ColorCard 颜色卡片

基础用法

属性

事件

RadioGroup 单选组

基础用法

属性

事件

其他组件

Modal 模态框

Slider 滑块

Select 选择器

Textarea 文本域

Field 输入框

Radio 单选框

Checkbox 复选框

Tag 标签

Toast 提示框

CodeBlock 代码块

ThemeToggle 主题切换

开发

Modal 模态框

基础用法

不同尺寸

预设样式

属性

事件

插槽

方法

Select 选择器

基础用法

不同尺寸

多选模式

属性

事件

Textarea 文本域

基础用法