# my-ui
**Repository Path**: soini/my-ui
## Basic Information
- **Project Name**: my-ui
- **Description**: 做一些简单的移动端的ui组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-27
- **Last Updated**: 2022-01-26
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# my-ui
## 介绍
做一些简单的移动端的ui组件
## 软件架构
依赖于vue做的一一些移动组件
## 安装教程
1. npm i soinmyui
## 使用说明
1. 在main.js里引入css样式 import 'soinmyui/theme-chalk/index.css';
2. 在main.js里引入组件库import myui from 'soinmyui';
3. Vue.use(myui)
4. 就可以随便在组件里使用了
## 组件列表
### 组件名：button--按钮
#### Props
| 属性名 | 描述 | 类型 | 默认值 | 可选值 |
| ------ | ---------- | -------- | --------- | ---------------------------------- |
| t`ype` | `按钮样式` | `string` | `default` | `primary/info/warn/danger/default` |
------
### 组件名：drawer--抽屉
------
#### Props
| 属性名 | 描述 | 类型 | 默认值 | 可选值 |
| -------------- | ------------------------- | --------- | -------- | ----------------------- |
| `open` | `打开drawer参数` | `boolean` | `false` | `true` |
| `align` | `drawer出现的位置` | `string` | `bottom` | `top/right/bottom/left` |
| `size` | `drawer框大小` | `string` | `30%` | `-` |
| `showClose` | `关闭按钮的显隐` | `boolean` | `true` | `false` |
| `isDestroyDom` | `是否卸载drawer内部的dom` | `boolean` | `false` | `true` |
| `isMaskBg` | `是否去掉drawer遮罩` | `boolean` | `false` | `true` |
#### Events
| 属性名 | 描述 | 回调参数 |
| ------- | ---------- | ---------- |
| `close` | `关闭事件` | `callback` |
### Slots
| 属性名 | 描述 |
| ------ | ------------------ |
| `-` | `自定义drawer内容` |
------
### 组件名：search--搜索框
------
#### Props
| 属性名 | 描述 | 类型 | 默认值 | 可选值 |
| ----------------- | ------------------------- | ----------------- | -------- | ------------------------------ |
| `type` | `和原生input类型保持一致` | `string` | `-` | `-` |
| `placeholder` | `和原生placeholder一致` | `string` | `-` | `-` |
| `shape` | `搜索框的圆角和直角` | `string` | `square` | `square（直角）|round（圆角）` |
| `value / v-model` | `绑定值` | `string / number` | `-` | `-` |
| `showAction` | `是否显示右侧按钮` | `boolean` | `false` | `true` |
| `actionText` | `右侧按钮名称` | `string` | `取消` | `-` |
#### Events
| 属性名 | 描述 | 回调参数 |
| -------- | ---------- | ---------------------- |
| `blur` | `失焦事件` | `{event: Event}` |
| `focus` | `聚焦事件` | `{event: Event}` |
| `search` | `搜索事件` | ` value:string/number ` |
| `cancel` | `取消事件` | `-` |
### Slots
| 属性名 | 描述 |
| ------------ | ------------------------- |
| `label` | `左侧内容 （搜索框外部）` |
| `left-icon` | `左侧图标（搜索框内）` |
| `right-icon` | `右侧图标（搜索框内）` |
| `action` | `右侧内容（搜索框外部）` |
### 组件名：icon--字体图标
------
#### Props—name
| 可选值 | 描述 |
| ----------------- | ------------------------- |
| `arrow-up` | 
|
| `arrow-right` | 
|
| `arrow-down` | 
|
| `arrow-left` | 
|
| `double-arrow-left` | 
|
| `double-arrow-right` |
|
| `cross` | 
|
| `add` | 
|
| `sub` | 
|
| `navigate-w` | 
|
| `orders-w` | 
|
| `upload-w` | 
|
| `dowload-w` | 
|
| `around-exchange-w` | 
|
| `star-w` | 
|
| `search-w` | 
|
| `fold-w` | 
|
| `refresh-w` | 
|
| `edit-w` | 
|
| `map-w` | 
|
| `home-w` | 
|
| `close-w` | 
|
| `success-w` | 
|
| `info-w` | 
|
| `warn-w` | 
|
| `question-w` | 
|
| `sub-w` | 
|
| `add-w` | 
|
| `statistical-w` | 
|
| `setting-w` | 
|
| `del-w` | 
|
| `location-w` | 
|
| `time-w` | 
|
| `copy-w` | 
|
| `boult-up-w` | 
|
| `boult-down-w` | 
|
| `zoom-in-w` | 
|
| `zoom-out-w` | 
|
| `loading-w` | 
|
| `stop-w` | 
|
| `img-circle-w` | 
|
| `img-round-w` | 
|
| `file-w` | 
|