jz-elem

一个基于 Vue 3 的 UI 组件库，类似 element-plus。

安装

npm install jz-elem
# 或
yarn add jz-elem
# 或
pnpm add jz-elem

使用

完整引入

import { createApp } from 'vue'
import JzElem from 'jz-elem'
import 'jz-elem/style.css'

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

按需引入

import { Button, Text } from 'jz-elem'
import 'jz-elem/style.css'

app.component('JzButton', Button)
app.component('JzText', Text)

Webpack 项目使用

本组件库同时支持 Vite 和 Webpack 项目。

Webpack 配置

确保你的 webpack 配置支持处理 .vue 文件和 CSS 文件：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

在 Webpack 项目中使用

// main.js
import { createApp } from 'vue'
import JzElem from 'jz-elem'
import 'jz-elem/style.css'

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

或者使用 CommonJS 方式：

const { createApp } = require('vue')
const JzElem = require('jz-elem')
require('jz-elem/style.css')

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

按需引入（Webpack）

import { Button } from 'jz-elem'
import 'jz-elem/style.css'

app.component('JzButton', Button)

注意：组件库同时提供了 ES 模块（jz-elem.es.js）和 UMD 格式（jz-elem.umd.js），webpack 会根据你的项目配置自动选择合适的格式。

在组件中使用

<template>
  <div>
    <jz-button>默认按钮</jz-button>
    <jz-button type="primary">主要按钮</jz-button>
    <jz-text type="primary">主要文本</jz-text>
    <jz-text type="success">成功文本</jz-text>
  </div>
</template>

Button 组件

基础用法

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

禁用状态

<jz-button disabled>禁用按钮</jz-button>
<jz-button type="primary" disabled>禁用按钮</jz-button>

加载状态

<jz-button loading>加载中</jz-button>
<jz-button type="primary" loading>加载中</jz-button>

不同尺寸

<jz-button size="large">大型按钮</jz-button>
<jz-button size="default">默认按钮</jz-button>
<jz-button size="small">小型按钮</jz-button>

朴素按钮

<jz-button plain>朴素按钮</jz-button>
<jz-button type="primary" plain>朴素按钮</jz-button>

圆角按钮

<jz-button round>圆角按钮</jz-button>
<jz-button type="primary" round>圆角按钮</jz-button>

圆形按钮

<jz-button circle>圆</jz-button>
<jz-button type="primary" circle>圆</jz-button>

带图标的按钮

<jz-button>
  <template #icon>
    <svg>...</svg>
  </template>
  按钮文字
</jz-button>

API

Button Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | type | 类型 | string | default / primary / success / warning / danger / info | default | | size | 尺寸 | string | large / default / small | default | | plain | 是否朴素按钮 | boolean | — | false | | round | 是否圆角按钮 | boolean | — | false | | circle | 是否圆形按钮 | boolean | — | false | | disabled | 是否禁用 | boolean | — | false | | loading | 是否加载中 | boolean | — | false |

Button Events

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | click | 点击事件 | (event: MouseEvent) |

Text 组件

基础用法

<jz-text>默认文本</jz-text>
<jz-text type="primary">主要文本</jz-text>
<jz-text type="success">成功文本</jz-text>
<jz-text type="warning">警告文本</jz-text>
<jz-text type="danger">危险文本</jz-text>
<jz-text type="info">信息文本</jz-text>

不同尺寸

<jz-text size="large">大号文本</jz-text>
<jz-text size="default">默认文本</jz-text>
<jz-text size="small">小号文本</jz-text>

不同标签

<jz-text tag="h1">标题 1</jz-text>
<jz-text tag="h2">标题 2</jz-text>
<jz-text tag="p">段落文本</jz-text>
<jz-text tag="div">块级文本</jz-text>

文本样式

<jz-text strong>粗体文本</jz-text>
<jz-text italic>斜体文本</jz-text>
<jz-text underline>下划线文本</jz-text>
<jz-text deleted>删除线文本</jz-text>
<jz-text code>代码文本</jz-text>
<jz-text mark>标记文本</jz-text>

文本截断

<!-- 单行截断 -->
<div style="width: 200px;">
  <jz-text truncated>
    这是一段很长的文本，会被截断显示
  </jz-text>
</div>

<!-- 多行截断 -->
<div style="width: 300px;">
  <jz-text :line-clamp="2">
    这是一段很长的文本，会被截断显示为两行
  </jz-text>
</div>

组合使用

<jz-text tag="p" type="primary" size="large" strong>
  这是一段主要颜色、大号、粗体的段落文本
</jz-text>

API

Button Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | type | 类型 | string | default / primary / success / warning / danger / info | default | | size | 尺寸 | string | large / default / small | default | | tag | 标签类型 | string | span / p / div / h1-h6 | span | | truncated | 是否单行截断 | boolean | — | false | | lineClamp | 多行截断行数 | number | — | — | | strong | 是否粗体 | boolean | — | false | | italic | 是否斜体 | boolean | — | false | | underline | 是否下划线 | boolean | — | false | | deleted | 是否删除线 | boolean | — | false | | code | 是否代码样式 | boolean | — | false | | mark | 是否标记样式 | boolean | — | false |

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check

License

MIT