# iview-pro-ui

> Extend iview to add some components and directives

Latest version **1.4.4** (published 2026-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install iview-pro-ui
pnpm add iview-pro-ui
yarn add iview-pro-ui
bun add iview-pro-ui
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.4.4 |
| Published | 2026-06-18 |
| First published | 2022-10-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 132.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hccluck |
| Maintainers | hccluck |
| Keywords | iview, view-design, viewui, iViewProUi, vue, vue.js, component, components, ui, framework |

## Links

- npm: https://www.npmjs.com/package/iview-pro-ui
- Repository: https://github.com/hccluck/iview-pro-ui
- Homepage: https://github.com/hccluck/iview-pro-ui#readme
- Issues: https://github.com/hccluck/iview-pro-ui/issues
- npm.io page: https://npm.io/package/iview-pro-ui

## Dependencies (1)

- [clipboard](https://npm.io/package/clipboard.md) ^2.0.11

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.4.4 (latest) — 2026-06-18
- 1.4.3 — 2023-12-19
- 1.4.2 — 2023-11-29
- 1.4.1 — 2023-11-16
- 1.4.0 — 2023-07-26
- 1.3.9 — 2023-07-18
- 1.3.8 — 2023-05-29
- 1.3.7 — 2023-05-29
- 1.3.6 — 2023-03-31
- 1.3.5 — 2023-03-31
- 1.3.4 — 2023-01-04
- 1.3.3 — 2022-12-26
- 1.3.2 — 2022-12-26
- 1.3.1 — 2022-12-26
- 1.3.0 — 2022-12-20
- … 15 more at https://npm.io/package/iview-pro-ui/versions

## README

# iview-pro-ui

> 基于 iview 封装了一些业务组件

## 安装使用

Install with npm

```sh

npm i --save iview-pro-ui
```

Install with yarn

```sh
yarn add iview-pro-ui
```

Then import `iViewProUi` in the `main.js` file:

```js
import Vue from 'vue';
import iViewProUi from 'iview-pro-ui';

Vue.use(iViewProUi);
```

## 项目说明

### 文件目录

```bash
iview-pro-ui
|
├── src
|   |
|   ├── components
|   |   |
|   |   ├── SearchForm          // 可折叠搜索表单
|   |   |
|   |   └── TablePage           // 表格+分页组件
|   |
|   ├── directives
|   |   |
|   |   ├── copy.js             // v-copy 指令
|   |   |
|   |   └── loading.js          // v-loading 指令
|   |
|   ├── style                   // 定制主题
|   |
|   └── utils
|
|
├── index.js                    // 入口
|
├── package.json
|
└── README.md
```

### 使用说明

`SearchForm` 组件用例

```jsx
<search-form showFold>
  <form-item label="字段1：">
    <Input v-model="value1" placeholder="请输入" />
  </form-item>
  <form-item label="字段2：">
    <Input v-model="value2" placeholder="请输入" />
  </form-item>
  <form-item label="字段3：">
    <Input v-model="value3" placeholder="请输入" />
  </form-item>
  <form-item label="字段4：">
    <Input v-model="value4" placeholder="请输入" />
  </form-item>

  <template #extra>
    <Button @click="search" icon="ios-search" type="info">搜索</Button>
  </template>
</search-form>
```

`TablePage` 组件用例

```jsx
<table-page :columns="table.columns" :data="list" :total="total" :loading="loading"></table-page>
```

`v-copy` 指令用例

```jsx
<div v-copy="{ success: this.copySuccess, error: this.copyError, data: 'data' }">点击复制</div>
```

`v-loading` 指令用例

```jsx
<div v-loading="loading">content</div>
```

---
_Source: https://npm.io/package/iview-pro-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._