系统组件·

## 1. 引入三方组件
除了 Element UI 组件以及项目内置的系统组件，有时还需要引入其它[三方组件](https://www.npmjs.com/ "三方组件")

### 1.1 如何安装
这里，以引入 vue-count-to 为例。在终端输入下面的命令完成安装：
> <span style="font-family:楷体">## 加上 --save 参数，会自动添加依赖到 package.json 中去。
npm install vue-count-to --save
</span>

### 1.2 如何注册
Vue 注册组件有两种方式：全局注册、局部注册。

### 1.2.1 局部注册
在对应的 Vue 页面中，使用 components 属性来注册组件。代码如下：

```java
<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

```

### 1.2.2 全局注册
① 在 main.js中，全局注册组件。代码如下：
```java
import countTo from 'vue-count-to'
Vue.component('countTo', countTo)

```
② 在对应的 Vue 页面中，直接使用组件，无需注册。代码如下：
```java
<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

```
## 2. 系统组件
项目使用到的相关组件。

### 2.1 树形选择组件
使用案例：

### 2.2 表格分页组件
[el-pagination](https://element.eleme.cn/#/en-US "el-pagination") ，二次封装成 pagination 组件。

在 notice/index.vue 的使用案例：
```java
<el-form-item label="上级菜单">
  <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
              placeholder="选择上级菜单"/>
</el-form-item>

```

![](/media/202409/2024-09-03_133826_393792.png)

### 2.3 表格分页组件
案例：
```java
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
            @pagination="getList"/>

```

![](/media/202409/2024-09-03_133903_482050.png)

### 2.4 工具栏右侧组件
```java
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

```
### 2.5 富文本编辑器
`````java
<el-form-item label="内容">
  <editor v-model="form.content" :min-height="192"/>
</el-form-item>

`````

![](/media/202409/2024-09-03_134551_617159.png)

### 2.6 表单设计组件
① 表单设计组件 form-generator

在 build/index.vue 中使用，效果如下图：

![](/media/202409/2024-09-03_134635_841815.png)

② 表单展示组件 使用案例：

```java
<parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />

```