# ui-component-library

**Repository Path**: httpxiaobocom/vue-component-ui

## Basic Information

- **Project Name**: ui-component-library
- **Description**: 使用vue-cli 3模仿element-ui做了button,dialog,input,radio,radioGroup,switch,form常用的组件。
完成了basic的功能，更多的功能 ,后续再开发。造轮子一时爽，一直造轮子一直爽。
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-17
- **Last Updated**: 2021-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Element-UI, Vue, vue-cli, ui-component

## README

# ui-component-library

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

# 项目介绍


## 1.项目是什么



### 1.1.用vue cli3 从0仿造element-ui组件，
## 2.有哪些内容


### 2.1.封装常见的基础性的组件(button,dialog,input,radio,swithc,form相关的组件)
## 3.设计的知识点


### 3.1.vue基础语法 组件基本语法 组件通讯(sync,provide,inject) 插槽的使用 props校验过渡与动画处理 计算属性与监听属性 v-model语法糖

## 4.目标


### 4.1.先完成element-ui上常用组件的basic功能,再进行拓展，解锁更多功能



# 开始封装组件


## 1.使用vue-cli3快速搭建一个vue项目，并启动项目


## 2.封装Button组件


### 2.1.前置知识：
 
    组件通讯  

    组件插槽  

    props校验  
 
### 2.2.支持的参数
  
|参数名   |   参数描述                                                |      参数类型 |   default  |  
|---------|-----------------------------------------------------------|---------------|------------|
|type     | 按钮类型(可选primary / success / warning / danger / info) |       String  |    default |
|plain    |  是否是朴素按钮                                           |   Boolean     |     false  |
|round    |  是否是圆角按钮                                           |   Boolean     |     false  |
|circle   |  是否是圆形按钮                                           |   Boolean     |     false  |
|disabled |  是否禁用按钮                                             |   Boolean     |     false  |
|iconClass|  图标类名(vb-icon-check/search/edit/star-off/)            |   String      |    --      |  -                                                                      
  
### 2.3.支持click event

## 3.封装dialog组件


### 3.1.前置知识必要
  
vue过渡与动画  

sync修饰符  

具名插槽与v-slot指令  

 
### 3.2.参数支持
  
| 参数名  | 参数描述                       | 参数类型 | 默认值              |
|---------|--------------------------------|----------|---------------------|
| title   | 对话框标题                     | String   | Tips                |
| width   | 宽度                           | String   | 50%                 |
| top     | 与顶部的距离                   | String   | 15vh(15%的设备高度) |
| visible | 是否显示dialog(支持sync修饰符) | Boolean  | false               |


事件支持  



| 事件名      | 事件描述       |
|-------------|----------------|
| handleClose | 模态框关闭的事件 |

插槽说明  


|插槽名称|      插槽描述       |
|--------|--------------------|
|content |  dialog的内容       |
|title   |  dialog的标题        |
|footer  |  dialog的底部操作区 |

 

## 3.封装input



### 3.1.参数支持

| 参数名称      | 参数描述                  | 参数类型 | 默认值       |
|---------------|---------------------------|----------|--------------|
| placeholder   | 占位符                    | String   | please input |
| type          | 文本框类型(text/password) | String   | text         |
| disabled      | 禁用                      | Boolean  | false        |
| clearable     | 是否显示清空按钮          | Boolean  | false        |
| show-password | 是否显示密码切换按钮      | Boolean  | false        |
| name          | name属性                  | String   | 无          |
| v-model       | 绑定的value属性           | String    | 无          |
事件支持  



|事件名称       |      事件描述 |
|-------------|----------------|
|handleInput  |     内容输入事件  |


## 4.封装switch组件


### 4.1.参数支持
 
|参数名称       |        参数描述             |  参数类型      |     默认值  |   
|---------------|----------------------------|-----------------|-----------|
|v-model        |        双向绑定             | 布尔类型       |    false  |  
|name           |        name属性             |  String        |    text   |
|activeColor    |        自定义的激活的颜色    |   String      |    #409eff|  
|inactiveColor  |        自定义的不激活的颜色  |   String      |    #dcdfe6|  
|width          |          宽度               |  Numberber        |   40     |
|activeText     |        激活的字体颜色       |    String      |     ''    |
|inactiveText   |        未激活的字体颜色     |   String       |    ''      |

事件支持  


|事件名称       |        事件描述     | 
|---------------|--------------------|
|handleClick    |    点击时触发的事件 |
 

## 5.封装radio组件


### 5.1.参数支持
 
|参数名称  |        参数描述            |        参数类型        |  默认值 |
|----------|----------------------------|------------------------|---------|
|v-model   |       双向绑定             |  String/Array/Object   |  ''      |
|label     |       单选框的序号         |    String/Number/Boolean |   ''    |
|value     |    通过v-model传进的来的值 |       String              |   ''    |
|name      |       name属性             |        String          |  ''     |

 
| 事件名称    | 事件描述                      |
|-------------|-------------------------------|
| handleClick | 点击时触发的事件,实现双向绑定 |

当radio被radioGroup包裹时，如何进行与App.vue这个爷爷节点进行通信？  

可以用provide/inject进行通信,可以去vue官网查看，也有其他方法也可以实现  

    这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，  
    不论组件层次有多深，并在其上下游关系成立的时间里始终生效  

```javascript
1.在父组件中发送
provide() {
    return { radioGroup: this };
  },
2.在子组件中接受
inject: {
    radioGroup: { default: '' }
  }
3.在子组件中发送给App.vue中监听的input
this.radioGroup.$emit("input",this.label);
```
 

## 6.封装form/form-item组件
 
| 参数名称   | 参数描述        | 参数类型 | 默认值   |
|------------|-----------------|----------|----------|
| label      | 输入框label     | String   | Username |
| labelWidth | 输入框label宽度 | String   | ''       |
 

已经封装好的v-model可以实现双向数据绑定，只要App.vue用一个对象去接收vb-input传回来的值就好了。
```javascript
<vb-form :model='form'>
      <vb-formitem label="Username">
          <vb-input v-model="form.name"></vb-input>
      </vb-formitem>
       <vb-formitem label="Password">
          <vb-input v-model="form.password" ></vb-input>
      </vb-formitem>
      <div class="row" style="margin:20px">
          <vb-button >cancel</vb-button>
          <vb-button type='primary'>confirm</vb-button>
      </div>
  </vb-form>
```