sccba-ui

一个基于 Vue 2/3 的 UI 组件库，使用 vue-demi 实现跨版本兼容。

特性

• 支持 Vue 2.7 和 Vue 3.x
• 基于 Element UI 和 Element Plus 构建
• 提供 SccbaButton 和 SccbaInput 组件
• 使用 TypeScript 友好的 API 设计

安装

npm install sccba-ui

使用

Vue 3

完整引入（推荐）

重要：Vue 3项目必须先安装 element-plus

npm install element-plus

import { createApp } from 'vue'
import SccbaUI from 'sccba-ui'
import 'sccba-ui/dist/sccba-ui.css'
import App from './App.vue'

const app = createApp(App)
app.use(SccbaUI)
app.mount('#app')

按需引入

重要：Vue 3项目必须先安装 element-plus

npm install element-plus

import { createApp } from 'vue'
import { SccbaButton, SccbaInput } from 'sccba-ui'
import 'sccba-ui/dist/sccba-ui.css'
import App from './App.vue'

const app = createApp(App)
app.use(SccbaButton)
app.use(SccbaInput)
app.mount('#app')

Vue 2

完整引入（推荐）

重要：Vue 2项目必须先安装 element-ui

npm install element-ui

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 使用 CommonJS 方式引入 sccba-ui
const SccbaUI = require('sccba-ui')
import 'sccba-ui/dist/sccba-ui.css'
import App from './App.vue'

Vue.use(ElementUI)
Vue.use(SccbaUI)

new Vue({
  render: h => h(App)
}).$mount('#app')

按需引入

重要：Vue 2项目必须先安装 element-ui

npm install element-ui

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 使用 CommonJS 方式按需引入组件
// 注意：使用对象属性访问，而不是解构赋值
const SccbaUI = require('sccba-ui')
const SccbaButton = SccbaUI.SccbaButton
const SccbaInput = SccbaUI.SccbaInput
import 'sccba-ui/dist/sccba-ui.css'
import App from './App.vue'

Vue.use(ElementUI)
Vue.use(SccbaButton)
Vue.use(SccbaInput)

new Vue({
  render: h => h(App)
}).$mount('#app')

注意：

• 不要使用解构赋值：const { SccbaButton, SccbaInput } = require('sccba-ui')
• 老旧webpack可能不支持解构赋值，请使用对象属性访问方式

组件

SccbaButton

按钮组件，支持多种类型和样式。

Props

• type: 按钮类型，可选值：primary、success、warning、danger、info
• size: 按钮尺寸，可选值：large、medium、small
• plain: 是否为朴素按钮
• round: 是否为圆角按钮
• circle: 是否为圆形按钮
• disabled: 是否禁用

示例

<template>
  <sccba-button type="primary">主要按钮</sccba-button>
  <sccba-button type="success">成功按钮</sccba-button>
  <sccba-button type="danger">危险按钮</sccba-button>
</template>

SccbaInput

输入框组件，支持多种输入类型。

Props

• type: 输入框类型，默认为 text
• placeholder: 占位符文本
• disabled: 是否禁用
• readonly: 是否只读
• clearable: 是否可清空
• showPassword: 是否显示密码切换按钮
• maxlength: 最大输入长度
• showWordLimit: 是否显示字数统计

方法

• focus(): 聚焦输入框

示例

<template>
  <sccba-input ref="inputRef" placeholder="请输入内容" />
  <sccba-button @click="inputRef.focus()">聚焦输入框</sccba-button>
</template>

<script setup>
import { ref } from 'vue'
const inputRef = ref(null)
</script>

依赖

• vue: ^2.7.0 || ^3.0.0
• vue-demi: ^0.14.10
• element-ui: ^2.15.14 (Vue 2项目需要单独安装)
• element-plus: ^2.13.0 (Vue 3项目需要单独安装)

注意：sccba-ui 不直接包含 element-ui 和 element-plus，使用时需要根据Vue版本单独安装对应的UI库。

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 切换 Vue 版本
npm run switch:vue2  # 切换到 Vue 2
npm run switch:vue3  # 切换到 Vue 3

License

MIT